DEV Community

Cover image for Responsive Images in HTML
Antonio Silva
Antonio Silva

Posted on

Responsive Images in HTML

#frontend #webdev #html

In a world where a large portion of traffic comes from mobile devices, making your images responsive is essential for delivering a great user experience. Poorly sized images can break layouts, waste bandwidth, and even harm your page performance.

In this post, you’ll learn what responsive images are, why they matter, and how to implement them in HTML using modern best practices.

What Are Responsive Images?

Responsive images are images that automatically adjust to the size of the screen or the element they’re placed in. This ensures that the image:

  • Doesn’t overflow the layout
  • Scales proportionally
  • Improves loading on different devices
  • Avoids unnecessary bandwidth usage

Basic Responsiveness with CSS

The most basic yet very effective way to make an image responsive is through CSS:

<img src="image.jpg" alt="Image description">
Enter fullscreen mode Exit fullscreen mode 
img {
    max-width: 100%;
    height: auto;
    display: block;
}
Enter fullscreen mode Exit fullscreen mode

Why this works:

  • max-width: 100%
    Tells the browser:
    👉 “this image should never be wider than its container.”

  • height: auto
    Keeps the aspect ratio intact.

  • display: block
    Removes the small whitespace that images have by default (because they’re inline elements).

Result:
The image shrinks smoothly on small screens without distortion.

Smart Responsiveness with srcset

Now we use native HTML5 features. If you want to give the browser multiple resolution options and let it choose the best one, use srcset.

The browser will automatically choose the best image depending on:

  • screen width
  • pixel density
  • layout rules you define 
<img 
    src="img-800.jpg"
    srcset="
        img-400.jpg 400w,
        img-800.jpg 800w,
        img-1600.jpg 1600w
    "
    sizes="(max-width: 600px) 400px,
           (max-width: 1200px) 800px,
           1600px"
    alt="Image description">
Enter fullscreen mode Exit fullscreen mode

How the browser decides which file to load

It evaluates:

  1. screen size
  2. device pixel ratio (1x, 2x, 3x)
  3. rules in sizes

Example:

  • Small phones → load img-400.jpg
  • Tablets/laptops → load img-800.jpg
  • Large monitors → load img-1600.jpg

Benefits:

  • faster loading
  • less bandwidth
  • better battery usage
  • improved SEO (Google Lighthouse loves this)

Using the <picture> Element (The Modern & Powerful Approach)

To deliver different images depending on the device (screen size, resolution, or format), HTML provides the <picture> element.

<picture>
    <source media="(max-width: 600px)" srcset="photo-mobile.jpg">
    <source media="(max-width: 1200px)" srcset="photo-tablet.jpg">
    <img src="photo-desktop.jpg" alt="Fully responsive photo">
</picture>
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • On screens up to 600px → loads photo-mobile.jpg
  • On screens up to 1200px → loads photo-tablet.jpg
  • Otherwise → loads photo-desktop.jpg

This boosts performance, as each device loads only what it needs.

When this is essential:

  • Vertical image on mobile.
  • Horizontal version on desktops.
  • Using modern formats with fallback.
  • Art direction (different compositions per device).

Difference Between srcset Using w and x

There are two ways to write responsive image sets.

A) Width-based (w) — Modern and recommended

<img src="img-800.jpg"
     srcset="img-400.jpg 400w, img-800.jpg 800w, img-1600.jpg 1600w"
     sizes="100vw"
     alt="">
Enter fullscreen mode Exit fullscreen mode
  • The browser calculates the final display width.
  • Selects the most appropriate file.

B) Pixel-density-based (x)

<img src="img.jpg"
     srcset="img.jpg 1x, img@2x.jpg 2x, img@3x.jpg 3x"
     alt="">
Enter fullscreen mode Exit fullscreen mode

Best for:

  • logos
  • icons
  • UI images

Example:

A 3x retina screen → loads img@3x.jpg.

Common Issues and How to Avoid Them

1. Image overflows outside the screen

Use:

img { max-width: 100%; height: auto; }
Enter fullscreen mode Exit fullscreen mode

2. Image looks stretched

→ Remove fixed width or height in the HTML.

3. Images look blurry on mobile

→ Use srcset.

4. Image appears smaller than expected

→ Ensure the container doesn’t have a too-small max-width.

When to Use Each Technique

Situation Best Technique
Only want the image to shrink on small screens CSS max-width: 100%
Want performance and smaller downloads on mobile srcset + sizes
Want completely different images per screen size <picture>
Want WebP/AVIF with fallback <picture>
Want high-resolution images for retina screens srcset 1x, 2x, 3x

Responsive images are essential for building modern, fast, and adaptable websites. With a few lines of HTML and CSS, you ensure your images display properly on any device from smartphones to 4K screens.

If you want to go further, <picture>, srcset, and sizes offer fine-grained control over performance, quality, and compatibility.

Top comments (0)