Responsive Image Examples for Modern Web Pages

Updated 10 November 2026 · Standard formula, shown below

Responsive image examples show how a web page can serve an appropriately sized or cropped image across phones, tablets, and desktop screens. Use HTML’s srcset and sizes when the image should keep its full composition, and the <picture> element when you need different formats or art-directed crops.

What Makes an Image Responsive?

A responsive image adapts to the space available without looking stretched, blurry, or unnecessarily large. That involves two related decisions: how wide the image appears in the layout, and which image file the browser downloads. CSS controls the displayed dimensions; HTML can give the browser a choice of source files.

A basic fluid image uses a single file:

<img src="photo-1200.jpg" alt="A hiker on a mountain trail" style="max-width: 100%; height: auto;">

This keeps the image within its container and preserves its proportions. It does not, however, stop a phone from downloading the 1200-pixel file. For performance, provide multiple source widths and let the browser select one.

Example: Choose a File by Display Width

Use width descriptors in srcset when you have several versions of the same image at different intrinsic widths. The sizes attribute tells the browser how wide the image is expected to appear in the layout:

<img
  src="trail-800.jpg"
  srcset="trail-400.jpg 400w,
          trail-800.jpg 800w,
          trail-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="A hiker following a mountain trail">

Here, the image is expected to fill the viewport on screens up to 600 CSS pixels wide. Above that breakpoint, it is expected to display at about 800 CSS pixels. The browser considers that information, the available candidates, and factors such as screen pixel density when choosing a file. The browser is not required to use one specific candidate in every circumstance.

The width labels such as 400w describe the actual pixel width of each file, not the width at which it must appear. Make sure the files really have the dimensions you declare. If the page’s CSS layout changes, update sizes so its estimates remain useful.

Example: Choose by Screen Density

For a small image that stays about the same CSS size, pixel-density descriptors can be simpler. This example offers a regular and a higher-density version:

<img
  src="avatar-160.jpg"
  srcset="avatar-160.jpg 1x, avatar-320.jpg 2x"
  width="160"
  height="160"
  alt="Portrait of the account owner">

The 1x and 2x labels indicate intended pixel densities. A 160-by-160 CSS-pixel image can look sharper on a high-density display when the browser chooses the 320-pixel source. This approach suits fixed-size assets such as avatars or icons. For images whose rendered width varies substantially with the layout, width descriptors and sizes usually communicate the choices more clearly.

Example: Art Direction with Picture

Sometimes scaling the same image is not enough. A wide landscape photo may be difficult to understand when reduced to a narrow phone screen, so a designer may provide a closer crop. The <picture> element lets the browser choose between sources according to media conditions:

<picture>
  <source media="(max-width: 600px)" srcset="trail-portrait.jpg">
  <img src="trail-landscape.jpg" alt="A hiker crossing a mountain ridge">
</picture>

The browser uses the matching source when its media condition applies and falls back to the img source otherwise. Put the fallback image in the img element, and provide its meaningful alternative text there. Use art direction only when the alternate crop preserves the image’s purpose and important context.

Example: Offer a Modern Image Format

Picture sources can also offer different file formats. Browsers that support a declared format can use it, while others can fall back to the JPEG in the img element:

<picture>
  <source srcset="forest.webp" type="image/webp">
  <source srcset="forest.avif" type="image/avif">
  <img src="forest.jpg" alt="Sunlight falling across a forest">
</picture>

Order sources with your preferred supported option first, followed by alternatives and the fallback. A format change does not guarantee a smaller file in every case; compare image quality and file size for the particular image. For different resolutions in multiple formats, each source can also include a srcset.

How to Choose and Avoid Common Problems

Choose the technique according to what varies:

Same image, flexible display width: use width-based srcset plus a realistic sizes value.
Same image, fixed display size: density descriptors can suit a small set of predictable sizes.
Different crop or composition: use picture with media conditions.
Different supported file formats: use picture sources with a type attribute and a fallback image.

A common misconception is that srcset alone makes an image fluid. It offers file choices; CSS still determines how the image fits the layout. A common CSS rule is max-width: 100%; height: auto;, or a stylesheet may set the image’s dimensions directly. Also give images explicit width and height attributes where practical. Browsers can use the aspect ratio to reserve space before an image loads, reducing unexpected layout shifts.

Check these details when an image looks wrong or loads inefficiently:

Use sizes that describe the rendered layout, not simply the screen’s maximum width.
Do not label a file with a width descriptor that differs from its actual pixel width.
Keep aspect ratios consistent among ordinary resolution candidates; use picture for genuinely different crops.
Write useful alt text for informative images. Use empty alt text, alt="", for images that are purely decorative.
Do not apply lazy loading indiscriminately to the main image visible when the page first opens; it may delay that image. Lazy loading is generally more appropriate for below-the-fold images.

Frequently Asked Questions

What is a responsive image in HTML?
A responsive image is displayed appropriately for its layout and can be supplied in a suitable file size or crop. CSS can make it fluid, while srcset, sizes, and picture help the browser select a source.

What is the difference between srcset and picture?
srcset lists alternative files for an img, often at different widths or densities. picture groups one or more conditional sources with a fallback img, making it useful for alternate crops and formats.

Do I need sizes with srcset?
When srcset uses width descriptors such as 800w, sizes helps the browser estimate the image’s rendered width. Density-descriptor sets such as 1x and 2x do not use sizes.

Does CSS alone make images responsive?
CSS such as max-width: 100%; height: auto; can make an image fit a container without distortion. It does not provide alternate image files, so the browser may still download a larger file than the layout needs.

Can a responsive image have different crops on mobile?
Yes. Use picture with a media-conditioned source for the alternate crop, followed by an img fallback. Keep the alternative meaningful and provide appropriate alt text.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.