Responsive Images and the Picture Element
Serve appropriately sized images with srcset, sizes, and the HTML picture element.
Responsive Images and the Picture Element is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Responsive Image Challenges
A full-resolution desktop image downloaded on a mobile device wastes bandwidth and slows load time. Responsive images serve the right image at the right size for the device.
max-width: 100% Baseline
The minimum responsive image rule: prevent images from overflowing their container while preserving aspect ratio.
img {
max-width: 100%;
height: auto;
display: block;
}srcset for Different Resolutions
The srcset attribute provides multiple image sources. The browser picks the most appropriate based on device pixel ratio (DPR):
<img
src="photo-800.jpg"
srcset="photo-800.jpg 1x, photo-1600.jpg 2x"
alt="A beautiful landscape"
>srcset with Width Descriptors
Use w descriptors to tell the browser the actual pixel width of each image file:
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1600.jpg 1600w"
alt="Hero image"
>sizes Attribute
The sizes attribute tells the browser how wide the image will appear at different viewport sizes, helping it pick the right source from srcset.
<img
srcset="photo-400.jpg 400w, photo-800.jpg 800w"
sizes="(max-width: 600px) 100vw, 50vw"
src="photo-800.jpg"
alt="Product photo"
>The picture Element
The <picture> element gives full control over which image file is served using <source> elements with media conditions. The browser uses the first matching source.
<picture>
<source media="(min-width: 1024px)" srcset="hero-large.webp">
<source media="(min-width: 600px)" srcset="hero-medium.webp">
<img src="hero-small.jpg" alt="Hero image">
</picture>Art Direction with picture
Art direction serves a different crop or composition for different screen sizes — not just a smaller version of the same image.
<picture>
<!-- Wide crop for desktop -->
<source media="(min-width: 768px)" srcset="banner-wide.jpg">
<!-- Square crop for mobile -->
<img src="banner-square.jpg" alt="Banner">
</picture>Modern Image Formats: WebP and AVIF
The <picture> element enables format selection. Serve modern formats with fallback:
<picture>
<source type="image/avif" srcset="photo.avif">
<source type="image/webp" srcset="photo.webp">
<img src="photo.jpg" alt="Photo">
</picture>loading="lazy" for Performance
The loading="lazy" attribute defers off-screen image loading until the user scrolls near them:
<img
src="product.jpg"
loading="lazy"
decoding="async"
alt="Product"
>width and height Attributes
Always include width and height attributes on images. They allow the browser to reserve layout space before the image loads, preventing layout shift (CLS).
<img src="photo.jpg" width="800" height="600" loading="lazy" alt="Photo">object-fit for Images in Containers
When an image is in a fixed-size container, use object-fit to control how it fills the space:
.thumbnail {
width: 200px;
height: 200px;
object-fit: cover; /* fill, crop if needed */
object-position: center top; /* anchor at top */
}Quick Check
Which HTML attribute works alongside srcset to tell the browser the image's display width at various viewport sizes?
Recap
Responsive images use srcset and sizes to serve appropriately sized images. The <picture> element enables art direction and format selection. Always use loading="lazy", width/height attributes, and object-fit for containerized images.
Frequently asked questions
Is the “Responsive Images and the Picture Element” lesson free?
Yes — the full text of “Responsive Images and the Picture Element” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Responsive Images and the Picture Element”?
Serve appropriately sized images with srcset, sizes, and the HTML picture element. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Responsive Images and the Picture Element” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Mobile-First vs Desktop-First Approach
- Fluid Widths with Percentages
- Min-Width and Max-Width Patterns
- Responsive Images and the Picture Element