HTML: HTML Responsive Images
Last updated: 2026-09-08
The same image should display at different sizes and resolutions on phones, tablets, and desktops — this is "responsive images." Learn how to make images clear, bandwidth-efficient, and fast-loading across all screen sizes.
1. Viewport Settings
The first step in responsive design is setting the viewport. Without it, mobile browsers shrink the page to a 980px width for display, making text and images very small. Add this <meta> tag and the page width will match the device screen:
▶ Example
▶ Try it Yourself2. Image Responsiveness
The two most commonly used CSS properties for making images automatically adapt to their container width:
max-width: 100%— Image never exceeds container width, and won't stretch beyond its original sizewidth: 100%— Image always fills the container width, may be stretched and distorted
▶ Example
▶ Try it Yourself3. The srcset Attribute
srcset lets the browser automatically select the most suitable image based on screen density (1x, 2x, 3x) or viewport width. You simply provide multiple image versions, and the browser "smartly chooses":
▶ Example
▶ Try it YourselfThere are two common ways to use srcset:
- x descriptor: Select based on screen density. Normal screens use 1x, Retina screens use 2x or 3x.
- w descriptor: Select based on viewport width. Combined with the
sizesattribute to tell the browser the actual display width of the image, the browser calculates the optimal image.
4. The <picture> Element
<picture> is more flexible than srcset. It lets you load completely different images at different screen widths — for example, a panoramic image on wide screens and a cropped close-up on narrow screens (this is called "art direction" in design):
▶ Example
▶ Try it Yourself<picture> is also commonly used to offer multiple image formats (such as WebP), with the browser selecting the first supported format:
▶ Example
▶ Try it YourselfThe browser checks each <source> from top to bottom. If it supports the format, it loads it; if none are supported, it falls back to <img>. This way, you enjoy the compression benefits of new formats while maintaining compatibility.
❓ FAQ
srcset and sizes?srcset provides multiple image sources with their resolutions (like 480w, 768w), while sizes tells the browser the actual display width of the image at different viewport widths (like (max-width: 480px) 100vw). The browser calculates which image to load based on both. Simply put: srcset is "what images are available," sizes is "how big will the image be in different situations."srcset+sizes has three advantages: 1) Browsers can decide which image to load while parsing HTML, without waiting for JavaScript; 2) Works even when JavaScript is disabled; 3) Browsers can choose more intelligently (considering network conditions, device pixel ratio, etc.). JavaScript is only suitable for complex art direction scenarios (like different compositions); simple resolution switching is handled by srcset.<picture> vs srcset?srcset is for "different resolution versions of the same image" — the browser automatically selects the appropriate sharpness. <picture> is for "displaying different images in different scenarios" — which could be different compositions (art direction) or different formats (WebP/AVIF/JPG). Simple rule: if only sharpness differs, use srcset; if composition or format differs, use <picture>.alt text. Note: images in srcset must be different versions of the same content — don't use completely different images, or search engines may consider it deceptive.📖 Summary
<meta name="viewport">is the first step for mobile adaptationmax-width: 100%makes images responsive without distortionsrcsetloads different resolution images based on screen density or viewport width<picture>+<source>displays differently composed images at different screen widths, or offers multiple image formats- Always use
<img>as the fallback for<picture>
📝 Exercises
- Responsive Image Gallery: Create a gallery page with 3 images, using
max-width: 100%on each to ensure they display completely on mobile. Usesrcsetto provide 1x and 2x versions for each image. - Art Direction Practice: Use
<picture>to implement: desktop shows a 1200px-wide landscape photo, tablet shows a 768px cropped version, phone shows a 480px close-up. Usemin-widthmedia queries to control breakpoints.
