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:

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>

▶ Try It Yourself

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 size
width: 100% — Image always fills the container width, may be stretched and distorted

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>

▶ Try It Yourself

📌 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":

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">

▶ Try It Yourself

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 sizes attribute 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):

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>

▶ Try It Yourself

<picture> is also commonly used to offer multiple image formats (such as WebP), with the browser selecting the first supported format:

HTML

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Photo">
</picture>

▶ Try It Yourself

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.

📖 Summary

<meta name="viewport"> is the first step for mobile adaptation
max-width: 100% makes images responsive without distortion
srcset loads 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. Use srcset to 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. Use min-width media queries to control breakpoints.

← Previous: HTML Layout Next: HTML Lists →