If you want images to behave smartly across different screen sizes — mobile, tablet, desktop — you can use max-width: 100%, srcset, picture.
Forcing a big image to load on mobile eats up both the user's data and speed. Your site might look gorgeous, but if loading feels like a slow stroll, users will just walk away.
html
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Responsive landscape photo"
style="max-width: 100%; height: auto;">You should see
The browser will pick and show the right image file for the screen size.