HTML Responsive Images
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.
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
HTML
<!-- — With viewport setting (recommended) -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin: 0; font-family: sans-serif; }
.box { padding: 20px; background: #e3f2fd; }
</style>
</head>
<body>
<div class="box">
<h1>Hello, Mobile!</h1>
<p>When viewed on a phone, the text size is appropriate and one screen shows the full content.</p>
</div>
</body>
<!-- — Without viewport setting -->
<head>
<style>
body { margin: 0; font-family: sans-serif; }
.box { padding: 20px; background: #ffebee; }
</style>
</head>
<body>
<div class="box">
<h1>Hello, Mobile!</h1>
<p>When viewed on a phone, the page is shrunk to 980px and the text is very small.</p>
</div>
</body>
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
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 20px; }
.container {
width: 80%;
max-width: 600px;
border: 2px dashed #999;
padding: 10px;
margin-bottom: 20px;
}
.img-max {
max-width: 100%;
height: auto;
}
.img-full {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>max-width: 100% (maintains aspect ratio, no stretching)</h2>
<div class="container">
<img src="https://via.placeholder.com/800x400" alt="Sample image" class="img-max">
<p>Original image width 800px, container 600px. The image shrinks to 600px without distortion.</p>
</div>
<h2>width: 100% (fills container)</h2>
<div class="container">
<img src="https://via.placeholder.com/800x400" alt="Sample image" class="img-full">
<p>The image always fills the container width. Add height: auto to prevent distortion.</p>
</div>
</body>
</html>
📌 Image loading speed matters. Using CSS to shrink a large image only makes it "look smaller" — the browser still downloads the full-size original file. It's best to crop images to the right size before uploading:small images for mobile, large images for desktop. This can dramatically improve loading speed.
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
HTML
<!-- Select based on screen density -->
<img src="photo-1x.jpg"
srcset="photo-1x.jpg 1x, photo-2x.jpg 2x, photo-3x.jpg 3x"
alt="Sample photo">
<!-- Select based on viewport width + sizes describes image display width -->
<img src="small.jpg"
srcset="small.jpg 480w,
medium.jpg 768w,
large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 80vw,
60vw"
alt="Responsive image example">
There 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.
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
HTML
<picture>
<!-- Wide screen >= 1200px: show full panorama -->
<source media="(min-width: 1200px)" srcset="landscape-full.jpg">
<!-- Medium screen >= 768px: show medium view -->
<source media="(min-width: 768px)" srcset="landscape-medium.jpg">
<!-- Small screen < 768px: show cropped close-up -->
<source media="(max-width: 767px)" srcset="landscape-cropped.jpg">
<!-- Fallback: shown when browser doesn't support picture -->
<img src="landscape-medium.jpg" alt="Landscape photo">
</picture>
<picture> is also commonly used to offer multiple image formats (such as WebP), with the browser selecting the first supported format:
Example
HTML
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Photo">
</picture>
The 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
Q What's the difference between
srcset and sizes?A
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."Q Why not use JavaScript to detect screen size and switch images?
A Using
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.Q When should I use
<picture> vs srcset?A
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>.Q Do responsive images affect SEO?
A Properly used responsive images positively impact SEO: 1) Improve page load speed (Core Web Vitals metrics); 2) Enhance mobile user experience; 3) Search engines can index
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.