← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 10 of 20

HTML Responsive Images

A high resolution desktop image served to a mobile user wastes their data and slows your page. Responsive images solve this by letting the browser pick the right image size for the right device. HTML gives you two powerful tools for this: srcset and the picture element.

In this page:

  1. The srcset Attribute
  2. The sizes Attribute
  3. The picture Element for Art Direction
  4. Lazy Loading Images
  5. Setting width and height to Prevent Layout Shift
Syntax
markup 
<img src="default.jpg" srcset="small.jpg 480w, large.jpg 1080w" sizes="(max-width: 600px) 480px, 1080px" alt="Description">

The srcset Attribute

srcset gives the browser a menu of image options at different sizes. The browser picks the best one based on the device screen size and resolution.

Note:
  • Always include a fallback src for browsers that do not support srcset.
  • Accepted values:
  • url Nw — image width descriptor, e.g. photo-800.jpg 800w
  • url Nx — pixel density descriptor, e.g. [email protected] 2x
  • Entries are comma-separated
Warning: srcset is a suggestion not a command — the browser may still choose a cached larger image.

Example: The srcset Attribute

markup 
<img src="photo.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w" alt="Photo">

The sizes Attribute

The sizes attribute tells the browser how wide the image will be displayed at different viewport sizes. This helps the browser pick the right srcset option before downloading anything.

Note:
  • Match your sizes values to your CSS breakpoints for best results.
  • Accepted values:
  • (media-condition) length — e.g. (max-width: 600px) 100vw
  • Final entry is the default length, e.g. 50vw
  • Lengths use px, vw, em, calc()
Warning: Without sizes the browser assumes the image is always 100vw wide which leads to downloading unnecessarily large images.

Example: The sizes Attribute

markup 
<img src="photo.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w" sizes="(max-width: 600px) 480px, 800px" alt="Photo">

The picture Element for Art Direction

Sometimes you do not just want a smaller version of the same image on mobile — you want a completely different crop or composition. The picture element lets you specify entirely different images for different screen sizes.

Note:
  • Use picture when your image needs different cropping for mobile vs desktop not just different sizes.
  • Accepted attributes:
  • source media — media query
  • source srcset — image URL(s)
  • source type — MIME type
  • img src / alt — required fallback
Warning: Always include a fallback img tag inside picture — browsers that do not support picture will show this.

Example: The picture Element for Art Direction

markup 
<picture>
  <source media="(max-width: 600px)" srcset="photo-square.jpg">
  <img src="photo-wide.jpg" alt="Photo">
</picture>

Lazy Loading Images

The loading="lazy" attribute tells the browser to defer loading an image until it's about to scroll into view, which speeds up initial page load by not downloading images the visitor may never scroll down to see.

Note:
  • Accepted values:
  • loading — lazy | eager (default)
  • decoding — async | sync | auto

Example: Lazy Loading Images

markup 
<img src="photo.jpg" alt="Photo" loading="lazy">

Setting width and height to Prevent Layout Shift

Even with responsive images, explicitly setting width and height attributes (or an aspect-ratio in CSS) reserves the correct amount of space on the page before the image finishes downloading, preventing the surrounding content from jumping around as it loads.

Note:
  • Accepted attributes:
  • width — integer pixels
  • height — integer pixels

Example: Setting width and height to Prevent Layout Shift

markup 
<img src="photo.jpg" width="800" height="600" alt="Photo">
Live Example
Related Topics

HTML Responsive · HTML Background Images · HTML Images · HTML Iframe Security

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting the fallback src attribute when using srcset.
  2. Omitting the img fallback inside a picture element.
  3. Using srcset without sizes causing the browser to assume 100vw width.
Chapter Summary
  • srcset provides multiple image size options for the browser to choose from.
  • Width descriptors (400w) tell the browser the actual pixel width of each option.
  • The sizes attribute tells the browser how wide the image will display.
  • The picture element allows completely different images for different screen sizes.
  • Always include a fallback src or img for older browsers.
Browser Support

srcset and sizes are supported in all modern browsers. The picture element is supported in Chrome, Firefox, Safari, and Edge. IE11 does not support either.

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Iframe Security Next Lesson → HTML Web Fonts

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.