Serving Responsive Images

A responsive image is not simply an image whose CSS width changes with the viewport. A page can visually resize an image while still downloading a file that is far larger than necessary. Serving responsive images means allowing the browser to select an appropriate image resource for the current display conditions.

The goal is straightforward: users with small screens or slower connections should not have to download the same oversized image intended for a large desktop display. At the same time, high-resolution screens should be able to receive a sufficiently detailed source.

HTML provides several mechanisms for this, including srcset, sizes and picture. Combined with correctly generated image dimensions, modern formats, caching and appropriate loading behavior, they form the foundation of an efficient image delivery pipeline.

What Does Serving Responsive Images Mean?

Serving responsive images means providing multiple possible image resources and allowing the browser to choose the one that best matches the current rendering conditions. The browser can consider factors such as the image's rendered width, device pixel ratio and available network conditions.

For example, an image displayed at 360 CSS pixels does not normally need the same source file as an image displayed at 1400 CSS pixels. Sending a 2400-pixel-wide image to both users wastes bandwidth and can increase decoding and rendering costs.

Responsive images therefore solve a different problem from responsive CSS. CSS controls how an image is displayed, while responsive image markup helps determine which resource is downloaded in the first place.

Responsive CSS Does Not Automatically Mean Responsive Delivery

Consider a simple image with a fluid CSS width:

<img
  src="/images/hero-2400.jpg"
  alt="Mountain landscape"
  class="hero-image"
>

.hero-image {
  width: 100%;
  height: auto;
}

The image can visually adapt to different viewport widths, but every visitor may still download hero-2400.jpg. A phone displaying the image at 390 CSS pixels could therefore receive a resource several times wider than necessary.

The better approach is to generate multiple image variants and describe them to the browser.

The Core Responsive Image Attributes

The most important HTML mechanisms for responsive images are srcset, sizes and picture. They solve related but different problems.

Using srcset with Width Descriptors

One of the most common responsive image patterns uses width descriptors such as 480w, 768w and 1280w. These values describe the intrinsic width of each image candidate.

<img
  src="/images/photo-1280.jpg"
  srcset="
    /images/photo-480.jpg 480w,
    /images/photo-768.jpg 768w,
    /images/photo-1280.jpg 1280w,
    /images/photo-1920.jpg 1920w
  "
  alt="Mountain landscape"
>

The browser does not simply choose the numerically closest file. It uses the candidate widths together with information about how large the image is expected to render and the device's pixel density.

This is why srcset with width descriptors is normally used together with sizes.

What sizes Does

The sizes attribute tells the browser how wide the image is expected to be displayed under different viewport conditions. This information is important because the browser may need to choose an image before the CSS layout has fully resolved.

<img
  src="/images/photo-1280.jpg"
  srcset="
    /images/photo-480.jpg 480w,
    /images/photo-768.jpg 768w,
    /images/photo-1280.jpg 1280w,
    /images/photo-1920.jpg 1920w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Mountain landscape"
>

In this example, the image is expected to occupy the full viewport width when the viewport is 768 pixels or narrower. Above that breakpoint, it is expected to occupy approximately half of the viewport width.

The sizes value should describe the image's actual layout rather than simply repeat the available source widths.

How the Browser Chooses a Source

With width-based srcset, the browser has a set of candidate resources and a description of the expected rendered width. It combines this information with the device's pixel density and other browser considerations to select an appropriate candidate.

Suppose an image occupies roughly 500 CSS pixels on the page. A standard-density display may be satisfied with a candidate around that width, while a high-density display may benefit from a larger source. The browser can choose between the available candidates instead of being forced to download one fixed-size file.

The browser retains control over the final choice. Developers provide candidates and layout information rather than manually selecting an image using JavaScript for every viewport.

Width Descriptors vs Density Descriptors

srcset supports two common approaches: width descriptors such as 800w and pixel-density descriptors such as 1x and 2x.

<img
  src="/images/avatar-200.jpg"
  srcset="
    /images/avatar-200.jpg 1x,
    /images/avatar-400.jpg 2x
  "
  width="200"
  height="200"
  alt="User avatar"
>

Density descriptors are convenient when an image has a predictable fixed CSS size. For example, a 200-pixel avatar can have a 200-pixel source for 1x displays and a 400-pixel source for 2x displays.

Width descriptors are generally more flexible for fluid layouts because the rendered image width can change with the viewport.

Using the picture Element

The picture element is useful when the browser needs to choose between fundamentally different sources rather than simply different resolutions of the same image.

One common use is format switching. Another is art direction, where different crops or compositions are used at different viewport sizes.

<picture>
  <source
    media="(max-width: 768px)"
    srcset="/images/hero-mobile.jpg"
  >
  <source
    media="(min-width: 769px)"
    srcset="/images/hero-desktop.jpg"
  >
  <img
    src="/images/hero-desktop.jpg"
    alt="Mountain landscape"
  >
</picture>

The important distinction is that the mobile and desktop files can contain different compositions. This is different from simply providing different resolutions of the same image.

Resolution Switching vs Art Direction

Resolution switching means providing the same image at different dimensions. The composition remains essentially the same while the browser chooses an appropriate resolution.

Art direction means providing different versions of an image because the composition itself needs to change. A wide desktop photograph might show an entire landscape, while the mobile version could use a tighter crop around the main subject.

Serving Modern Image Formats

Responsive image delivery can also be used to provide different image formats. A site can offer AVIF or WebP to browsers that support them while retaining a fallback image format.

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

The browser evaluates the source elements and uses an appropriate supported source. The img element remains important because it provides the fallback image and the normal image semantics.

Combining Formats and Responsive Widths

A production site can combine format switching with multiple responsive widths. This gives the browser choices for both encoding format and image dimensions.

<picture>
  <source
    type="image/avif"
    srcset="
      /images/photo-640.avif 640w,
      /images/photo-1280.avif 1280w,
      /images/photo-1920.avif 1920w
    "
    sizes="(max-width: 768px) 100vw, 50vw"
  >
  <source
    type="image/webp"
    srcset="
      /images/photo-640.webp 640w,
      /images/photo-1280.webp 1280w,
      /images/photo-1920.webp 1920w
    "
    sizes="(max-width: 768px) 100vw, 50vw"
  >
  <img
    src="/images/photo-1280.jpg"
    width="1920"
    height="1280"
    alt="Mountain landscape"
  >
</picture>

This is considerably more flexible than serving one large JPEG to every visitor. The browser can select an appropriate source based on supported format, expected display size and device characteristics.

Generating Image Widths

Responsive delivery requires actual image variants. If an application advertises 480w, 768w and 1280w candidates, those files need to exist and correspond to the declared intrinsic dimensions.

The exact widths should be based on the layouts used by the application. There is no universal list of breakpoints that works for every project.

A common approach is to choose a small number of practical widths that cover the range of rendered image sizes. Too few candidates can force the browser to download a file that is considerably larger than necessary, while too many candidates increase storage, build time and cache complexity.

Choosing Responsive Image Widths

Start by measuring how wide an image can actually become in the layout. If a content image never exceeds 900 CSS pixels, generating a 2400-pixel version for normal delivery may provide little benefit.

On the other hand, a full-width hero image on a large desktop display may need a much wider source than a thumbnail in a card grid.

Do Not Generate Arbitrarily Many Variants

It can be tempting to generate a large number of widths such as every 50 pixels. In most applications this creates unnecessary files without providing a meaningful improvement in delivery.

A smaller set of well-chosen widths is usually easier to maintain and cache. The browser does not require a candidate that exactly matches every possible rendered width.

Image Dimensions and Aspect Ratio

Responsive variants should normally preserve the intended aspect ratio unless the application deliberately uses different crops. If the original image is 1600 × 1000, a proportional 800-pixel-wide version would be 800 × 500.

Keeping the ratio consistent makes resolution switching predictable. When different crops are required, the change should be intentional and implemented as art direction rather than as accidental distortion.

An Image Aspect Ratio Calculator can help determine proportional dimensions, while an Image Resize Calculator can be useful when preparing exact responsive variants.

Using width and height

Responsive images should still have width and height attributes whenever the intrinsic dimensions are known. These attributes do not force the image to remain at that displayed size.

<img
  src="/images/photo-1280.jpg"
  width="1280"
  height="800"
  alt="Mountain landscape"
  class="responsive-image"
>

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

The browser can use the intrinsic dimensions and aspect ratio to reserve the appropriate amount of space before the image finishes loading. This helps reduce layout shifts.

Responsive Images and CSS aspect-ratio

CSS aspect-ratio can also be useful when the layout needs to reserve a particular shape independently of the source file.

.image-container {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

This approach is especially useful for card grids and other layouts where all image containers need a consistent shape. It is important to distinguish this from changing the source image's actual aspect ratio.

Responsive Images and object-fit

object-fit controls how a replaced element such as img fits inside its rendered box. It does not determine which source file the browser downloads.

.card-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

A browser could still download a very large source image and then use object-fit to crop it visually. Responsive image markup is what helps reduce the amount of source data transferred in the first place.

When to Use the Image Crop Technique

CSS cropping is convenient when the same source image can serve different layouts. However, it does not always provide the best visual composition.

If a subject needs to move, enlarge or change position between desktop and mobile, generating a separate crop can be better. An Image Crop Calculator can help determine the dimensions of these variants before they are generated.

Responsive Images in Image Grids

Image grids are particularly suitable for responsive image techniques because the displayed width of each image changes significantly between desktop and mobile layouts.

<img
  src="/images/product-800.webp"
  srcset="
    /images/product-320.webp 320w,
    /images/product-480.webp 480w,
    /images/product-800.webp 800w
  "
  sizes="(max-width: 600px) 50vw, (max-width: 1000px) 33vw, 25vw"
  width="800"
  height="800"
  alt="Product"
>

Here, the sizes value describes the expected width of an image based on the number of columns. The browser can then choose a suitable candidate rather than always receiving the largest version.

Responsive Hero Images

Hero images require additional care because they are often large, visually prominent and potentially part of the page's largest content element.

A hero image should have appropriate dimensions for the largest realistic display while also providing smaller candidates for narrower layouts. If the hero is critical to the initial viewport, it should generally not be treated like an ordinary below-the-fold image.

At the same time, avoid automatically downloading the largest possible source on every device. Responsive width selection remains important even for prominent images.

Responsive Images and Lazy Loading

Responsive image selection and lazy loading solve different problems. srcset and sizes help select the appropriate resource, while loading=lazy allows suitable non-critical images to be deferred.

<img
  src="/images/article-800.webp"
  srcset="
    /images/article-400.webp 400w,
    /images/article-800.webp 800w,
    /images/article-1200.webp 1200w
  "
  sizes="(max-width: 800px) 100vw, 800px"
  width="1200"
  height="800"
  loading="lazy"
  alt="Article illustration"
>

Images that are immediately visible or important to the initial page rendering should be evaluated separately. Applying lazy loading indiscriminately can delay important content.

Responsive Images and LCP

A large hero or content image can contribute significantly to Largest Contentful Paint. Serving an unnecessarily large file can increase transfer time, while delaying a critical image can also hurt the initial rendering experience.

Responsive image selection helps by reducing the amount of data required for a particular display. For important above-the-fold images, the loading strategy should be chosen deliberately rather than simply applying the same lazy-loading rule used for every image on the page.

Responsive Images in Next.js

Frameworks such as Next.js can automate parts of responsive image delivery. The next/image component can generate and select image variants while handling several common concerns such as dimensions and responsive loading.

import Image from "next/image";

export function ArticleImage() {
  return (
    <Image
      src="/images/mountain.jpg"
      alt="Mountain landscape"
      width={1600}
      height={1000}
      sizes="(max-width: 768px) 100vw, 800px"
    />
  );
}

The sizes property is still important when the rendered width is responsive. It gives the image system information about how much horizontal space the image is expected to occupy.

The exact behavior depends on the image source, configuration and framework version, so generated markup should still be inspected when optimizing a production application.

Responsive Images with CSS Backgrounds

CSS background images do not use img, srcset and sizes in the same way. For decorative backgrounds, CSS media queries or image-set() can provide alternatives depending on the use case.

.hero {
  background-image: image-set(
    url("/images/hero.webp") type("image/webp"),
    url("/images/hero.jpg") type("image/jpeg")
  );
}

However, important content images should generally be represented as img elements rather than hidden inside CSS backgrounds. This provides better semantics, alternative text and more direct browser image loading behavior.

Responsive Images and Accessibility

Responsive image techniques should not change the meaning of the image. The img element should still have appropriate alternative text when the image communicates information.

Different responsive sources can contain different crops or compositions, but their alternative text should continue to describe the relevant content. Decorative images can use an empty alt attribute when appropriate.

Responsive Images and SEO

Responsive image markup can improve page performance by reducing unnecessary image transfers, which can indirectly support the overall quality of the user experience. It does not mean that adding more image candidates automatically improves search visibility.

Important images should still have meaningful alt text, stable dimensions and sensible file names. Search engines and browsers also need to be able to discover and process the actual image resources.

CDNs and Responsive Image Delivery

Image CDNs can move part of the responsive image pipeline to request time. Instead of storing every possible variant manually, a CDN may generate or transform an image based on requested width, format and quality.

A typical image URL might encode dimensions or transformation parameters, allowing the CDN to produce an appropriately sized resource. This can reduce the amount of image preprocessing that an application needs to manage itself.

Whether this approach is worthwhile depends on the hosting platform, traffic volume, caching strategy and image transformation capabilities available in the infrastructure.

Caching Responsive Images

Responsive image systems can produce many cacheable resources. A good caching strategy is therefore important, especially when image URLs are generated dynamically.

Stable URLs for image variants make browser and CDN caching more effective. If every request produces a different URL for the same image and dimensions, cache reuse can suffer.

How Many Responsive Variants Should You Create?

There is no fixed number that applies to every site. A simple article layout may need only a few widths, while a complex application with several image roles may need more.

A useful strategy is to identify the major rendered sizes in the actual UI and generate candidates around those sizes. The goal is to reduce large gaps between the displayed width and the selected resource without creating an unnecessarily large asset library.

Common Responsive Image Mistakes

One common mistake is using srcset without sizes for fluid width descriptors. Without an accurate sizes value, the browser has less information about the expected rendered width and may not make the optimal candidate selection.

Another mistake is declaring incorrect width descriptors. If a file declared as 800w is actually 1200 pixels wide, the browser's calculations no longer accurately represent the available resources.

Using a huge number of nearly identical candidates is also unnecessary. It increases storage and maintenance costs without necessarily producing meaningful performance improvements.

Another frequent mistake is confusing CSS cropping with responsive image delivery. object-fit can make an image look correct while the browser still downloads an unnecessarily large source.

Finally, developers sometimes optimize the image files but forget to inspect what the browser actually downloads. The final network request is what matters for real users.

Testing Responsive Image Delivery

Testing should be performed at several viewport widths and device pixel ratios. Resize the browser and inspect the Network panel to determine which image candidate is actually being requested.

Compare the intrinsic dimensions of the downloaded file with the rendered dimensions. A small difference is normal because the browser works with discrete candidates, but repeatedly downloading images several times larger than their rendered size is a sign that the responsive configuration should be reviewed.

Also test slow network conditions. A difference of several hundred kilobytes may be difficult to notice on a fast connection but can become significant on slower mobile networks.

A Practical Responsive Image Workflow

Start by identifying every important image role in the interface: hero images, article images, card thumbnails, avatars, logos and decorative graphics. Different roles often require different responsive strategies.

Next, measure the actual rendered widths at the main layout breakpoints. Use those measurements to choose a small set of practical source widths rather than selecting arbitrary values.

Generate the required image variants while preserving the intended aspect ratio. If different compositions are needed for mobile and desktop, create deliberate crops instead of relying entirely on CSS cropping.

Then add srcset and sizes for resolution switching. Use picture when format switching or art direction is required. Add width and height information to help preserve layout stability.

Finally, inspect real browser requests. Verify that mobile devices receive appropriately sized resources, that modern formats are actually used where intended and that important images are not unnecessarily delayed.

Example: A Complete Responsive Content Image

<picture>
  <source
    type="image/avif"
    srcset="
      /images/article-480.avif 480w,
      /images/article-800.avif 800w,
      /images/article-1200.avif 1200w
    "
    sizes="(max-width: 800px) 100vw, 800px"
  >
  <source
    type="image/webp"
    srcset="
      /images/article-480.webp 480w,
      /images/article-800.webp 800w,
      /images/article-1200.webp 1200w
    "
    sizes="(max-width: 800px) 100vw, 800px"
  >
  <img
    src="/images/article-800.jpg"
    srcset="
      /images/article-480.jpg 480w,
      /images/article-800.jpg 800w,
      /images/article-1200.jpg 1200w
    "
    sizes="(max-width: 800px) 100vw, 800px"
    width="1200"
    height="800"
    alt="Mountain landscape"
  >
</picture>

This example provides modern formats when available, multiple image widths, a JPEG fallback and layout information. The same pattern can be adapted to article images, product images and other responsive content.

When a Simple img Is Enough

Not every image needs a complex picture element. If an image has a predictable fixed size and does not require format switching or art direction, a simple img with appropriate dimensions may be enough.

<img
  src="/images/avatar-200.webp"
  width="200"
  height="200"
  alt="User avatar"
>

The purpose of responsive image techniques is not to make every image's markup complicated. Use the simplest mechanism that solves the actual delivery problem.

Responsive Images Are About Delivery, Not Just Layout

The central idea is easy to miss: responsive design and responsive image delivery are related but separate concerns. CSS can make a 2000-pixel image occupy 400 pixels, but it does not automatically make the downloaded resource 400 pixels wide.

srcset and sizes allow the browser to choose among multiple resolutions. picture adds format switching and art direction. Proper dimensions help maintain layout stability, while image resizing and cropping produce the actual resources needed by the page.

When these techniques are combined, the browser can receive an image that is much closer to what the current device and layout actually require.

Frequently Asked Questions

Helpful Image Tools

A Responsive Image Size Calculator can help estimate appropriate source dimensions for different display sizes. An Image Resize Calculator is useful for generating proportional variants, while an Image Crop Calculator can help plan different crops for art-directed layouts. An Image Dimension Checker can verify the actual dimensions of generated files, and an Image Aspect Ratio Calculator can help preserve the intended proportions when creating responsive variants.

Conclusion

Serving responsive images is about delivering an appropriate resource rather than simply resizing an image with CSS. The browser should have enough information and enough candidates to select an image that fits the current layout and device.

For most fluid images, srcset and sizes provide the foundation. picture becomes useful when different formats or compositions are required. Correct width and height information helps preserve layout stability, while carefully generated image variants keep the downloaded resources reasonably close to their actual display sizes.

The most effective responsive image implementation is therefore not necessarily the most complicated one. Measure the real layouts, generate a sensible set of image variants, describe them accurately in HTML and verify the actual browser requests. This produces a delivery system that scales across phones, tablets, desktops and high-density displays without unnecessarily transferring oversized images.