Website Image Size Guidelines for Responsive Design and Performance

There is no universal pixel width for a website image. Choose source dimensions from the image’s rendered slot at each layout state, then provide candidates that cover those slots and the pixel densities you support. Use srcset and sizes when the composition stays the same; use picture when the crop, aspect ratio, or format must change.

The practical goals are simple:

• Make the image fit its container without distortion.
• Reserve its space before it downloads.
• Send the smallest candidate that remains sharp on the current device.
• Keep a normal img src fallback for browsers and crawlers.
• Load important above-the-fold images promptly and defer images below the fold.

1. Start with the rendered slot, not a breakpoint chart

Measure or calculate the image’s CSS width in every layout state. A card image might be 320 CSS pixels on a phone, 360 pixels in a two-column tablet grid, and 280 pixels in a four-column desktop grid. In that case, the desktop source can be narrower than the tablet source even though the viewport is wider.

Create candidates around real slot widths and the display densities you intend to support. For a fluid slot, width descriptors such as 320w, 640w, and 960w let the browser choose. The familiar 320w, 480w, and 800w values shown in some documentation are teaching examples, not universal requirements. See MDN’s responsive images guide and Google’s image SEO guidance.

2. Use srcset and sizes for fluid images

When the composition is unchanged, provide a fallback src, candidates with width descriptors, and a sizes list that describes the slot. The browser evaluates the first matching sizes condition, estimates the slot width, and selects a suitable candidate.

<img
  src="/images/article-800.jpg"
  srcset="
    /images/article-320.jpg 320w,
    /images/article-480.jpg 480w,
    /images/article-800.jpg 800w,
    /images/article-1200.jpg 1200w,
    /images/article-1600.jpg 1600w
  "
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  width="1600"
  height="1067"
  alt="A cyclist riding beside a coastal road"
>

In this example, the image fills the available width on narrow screens, occupies about half the viewport in a tablet layout, and about one third on larger screens. Adjust the values to match your actual CSS grid, including gaps, max-widths, and sidebars. An inaccurate sizes value can make the browser download an unnecessarily large file or a visibly soft one.

Width descriptors versus density descriptors

Use width descriptors when the rendered width is fluid:

<img
  src="/avatar-160.jpg"
  srcset="/avatar-160.jpg 160w, /avatar-320.jpg 320w"
  sizes="160px"
  width="160"
  height="160"
  alt="Sam Lee"
>

Use density descriptors when the rendered CSS size is fixed:

<img
  src="/logo.png"
  srcset="/logo.png 1x, /logo@2x.png 2x"
  width="180"
  height="48"
  alt="Acme"
>

Do not mix width and density descriptors in the same srcset. If a component’s CSS width changes with the viewport, width descriptors are usually the clearer model.

3. Use picture for art direction and format selection

srcset changes resolution. It does not deliberately change the composition. Use picture when a narrow screen needs a tighter crop, a different aspect ratio, or a format-specific source.

<picture>
  <source
    media="(max-width: 640px)"
    srcset="/images/hero-square-480.jpg 480w,
            /images/hero-square-800.jpg 800w"
    sizes="100vw"
  >
  <source
    type="image/avif"
    srcset="/images/hero-wide-800.avif 800w,
            /images/hero-wide-1200.avif 1200w"
    sizes="100vw"
  >
  <img
    src="/images/hero-wide-800.jpg"
    srcset="/images/hero-wide-800.jpg 800w,
            /images/hero-wide-1200.jpg 1200w"
    sizes="100vw"
    width="1200"
    height="675"
    alt="A mountain range at sunrise"
  >
</picture>

Keep the final img element. Search engines discover meaningful images in standard img markup; a CSS background alone is not a reliable replacement for editorial imagery.

4. Prevent distortion and layout shift

Make images shrink with their container while preserving their intrinsic ratio:

img {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

Set intrinsic width and height attributes even when CSS scales the rendered result. The browser can reserve the correct aspect-ratio space before the bytes arrive.

<img
  src="/images/product-1200.jpg"
  width="1200"
  height="900"
  alt="Blue hiking backpack"
>

If the design intentionally crops every card to a fixed ratio, define that treatment explicitly:

.card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

Use source artwork that tolerates the crop. Do not rely on a stretched image to fill an arbitrary box.

5. Choose source dimensions and formats

Export enough candidates to cover your measured slots without creating dozens of near-duplicates. A common editorial set might include 320, 640, 960, 1280, and 1600 pixels, but your component may need different values. Inspect the largest rendered slot and include room for a high-density display where it matters.

• Use a modern format your delivery stack supports, with a JPEG or PNG fallback where necessary.
• Compress until visual defects become noticeable, then increase quality slightly.
• Do not promise a universal byte budget. Image cost depends on dimensions, detail, format, compression, and the rest of the page.
• Remove metadata that is not needed for delivery.
• Generate thumbnails and responsive candidates during your build or upload pipeline instead of resizing large originals in the browser.

Adobe’s export documentation can help when preparing multiple web assets, but image editing software is optional; the HTML and CSS patterns above are the implementation.

6. Control loading priority

Lazy loading is appropriate for images that start below the fold:

<img
  src="/images/review-800.jpg"
  width="800"
  height="533"
  loading="lazy"
  decoding="async"
  alt="Customer using the product"
>

Do not blanket-apply loading="lazy" to the image that is immediately visible or likely to be the page’s largest contentful image. A truly critical image may use a targeted priority hint:

<img
  src="/images/hero-1200.jpg"
  width="1200"
  height="675"
  fetchpriority="high"
  alt="Mountain range at sunrise"
>

High priority and preload consume bandwidth that could have served scripts, fonts, or other content. Reserve them for an image that is genuinely needed early; do not preload every candidate or every image on the page. See web.dev’s responsive image guidance.

7. A complete responsive image component

<figure class="story-image">
  <picture>
    <source
      media="(max-width: 700px)"
      type="image/avif"
      srcset="
        /media/story-mobile-480.avif 480w,
        /media/story-mobile-800.avif 800w
      "
      sizes="100vw"
    >
    <source
      type="image/avif"
      srcset="
        /media/story-wide-800.avif 800w,
        /media/story-wide-1200.avif 1200w,
        /media/story-wide-1600.avif 1600w
      "
      sizes="(max-width: 1100px) 100vw, 900px"
    >
    <img
      src="/media/story-wide-1200.jpg"
      srcset="
        /media/story-wide-800.jpg 800w,
        /media/story-wide-1200.jpg 1200w,
        /media/story-wide-1600.jpg 1600w
      "
      sizes="(max-width: 1100px) 100vw, 900px"
      width="1600"
      height="900"
      alt="A team reviewing a responsive layout"
      decoding="async"
    >
  </picture>
  <figcaption>Responsive image candidates selected from the actual content width.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));