The same big photo on a small phone wastes data and slows the page.
Direct answer
Make images flexible with max-width: 100%; height: auto;, offer several sizes with srcset and sizes, and use <picture> when you need different formats or art direction. Set width and height to prevent layout shift.
Basic CSS
img {
max-width: 100%;
height: auto;
}
srcset
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(min-width: 900px) 50vw, 100vw"
width="800" height="533"
alt="A group of friends hiking at sunrise"
loading="lazy">
picture element
<picture>
<source type="image/avif" srcset="photo.avif">
<source type="image/webp" srcset="photo.webp">
<img src="photo.jpg" alt="Sunrise over hills" width="800" height="533">
</picture>
Tips
- Compress images.
- Use modern formats like WebP or AVIF with a fallback.
- Lazy-load images below the fold.
Where Teyro fits
Teyro's Responsive Web Design with CSS course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Right size, right format, reserved space.
