Good Image Sizes for Websites: A Practical Guide to Responsive Images

There is no single best pixel size for every website image. The right source dimensions come from the image’s rendered CSS slot, the device pixel ratio, and whether the image needs a different crop on smaller screens. Measure the slot, create a small ladder of candidates around those dimensions, and let the browser choose with srcset and sizes.

For example, an image displayed at 500 × 500 CSS pixels is usually well served by a 500 × 500 intrinsic image on a 1× display. A 3× display may request up to 1500 × 1500, although sending the largest possible file is not automatically useful to every visitor. web.dev’s responsive-image guidance describes this browser-driven selection model.

Quick recommendations

Image situation	Recommended approach
Same image and crop at every width	Use width-descriptor srcset with an accurate sizes attribute.
Different mobile and desktop crop	Use <picture> with media conditions.
Fixed card or avatar slot	Generate candidates around the actual slot width and preserve the aspect ratio.
Full-bleed hero	Measure the hero at each layout breakpoint and include a larger candidate for wide or high-density screens.
Layout stability	Set accurate width and height attributes, or reserve the equivalent aspect ratio in CSS.

How to calculate image dimensions

1. Measure the rendered CSS slot

Inspect the real layout at its breakpoints. Measure the content column, card, hero, or other box where the image appears. Do not start with a universal rule such as “all website images should be 1200 pixels wide.” A 320-pixel card and a 1440-pixel full-bleed banner have different requirements.

Record the slot width and height, plus its aspect ratio. If the image is fluid, measure the maximum width and the widths it reaches on smaller screens.

2. Account for device pixel ratio

The browser may need more intrinsic pixels than CSS pixels on a high-density display. A 500-pixel CSS slot can use a 1000-pixel candidate on a 2× screen. A 3× candidate can be useful in some cases, but the largest candidate is not automatically better: it increases transfer size and decoding work, and many people will not see the full benefit.

3. Build a modest width ladder

Create candidates near the measured slots and add a larger option where high-density displays justify it. For a content image that is about 760 CSS pixels wide on desktop and fluid on mobile, a practical set might be 400w, 800w, and 1200w. This is an example, not a universal breakpoint standard. Keep the same aspect ratio across candidates whenever possible.

4. Encode and compress each candidate

Export the ladder in formats your project supports, then compare visual quality and file weight. A smaller intrinsic image that is downloaded for a narrow slot is usually preferable to sending the desktop original and shrinking it with CSS.

Use srcset and sizes for responsive resolution

Use width descriptors when the same source image and crop work at every width. Width-descriptor entries require sizes so the browser can estimate the rendered slot before choosing a file.

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(min-width: 900px) 800px, 100vw"
  width="800"
  height="450"
  alt=""
>

In this example, the image occupies the full viewport below 900px and about 800 CSS pixels at larger widths. The browser combines those hints with the viewport and device resolution when selecting a candidate.

Write sizes for the actual layout

If an image is inside a two-column layout, describe the column rather than writing 100vw for every viewport. For example:

<img
  src="article-800.jpg"
  srcset="article-400.jpg 400w, article-800.jpg 800w, article-1200.jpg 1200w"
  sizes="(min-width: 1200px) 760px, (min-width: 700px) 60vw, 100vw"
  width="1200"
  height="675"
  alt="A diagram of the capture pipeline"
>

An inaccurate sizes value can make the browser choose a file that is too large or too small. Recheck it after changing grid columns, sidebars, or page padding.

Use picture for art direction and format choices

Use <picture> when the source itself must change: for example, a landscape desktop crop becomes a tighter portrait crop on a phone. It is also useful when you need explicit format or media-condition control.

<picture>
  <source
    media="(max-width: 699px)"
    srcset="hero-mobile-480.jpg 480w, hero-mobile-720.jpg 720w"
    sizes="100vw"
  >
  <source
    media="(min-width: 700px)"
    srcset="hero-wide-800.jpg 800w, hero-wide-1200.jpg 1200w"
    sizes="(min-width: 1200px) 1100px, 100vw"
  >
  <img
    src="hero-wide-800.jpg"
    width="1200"
    height="600"
    alt="People collaborating around a screen"
  >
</picture>

Use srcset and sizes for the common case where the image content and crop stay the same. Use picture for an intentional source change rather than adding it to every image.

Reserve space to prevent layout shift

Include intrinsic dimensions that match the file’s aspect ratio. The browser can allocate the space before the image arrives, reducing cumulative layout shift. CSS can provide the same reservation when dimensions are dynamic.

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

.hero-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

max-width: 100% lets an intrinsic image shrink inside a narrow container. It does not make an oversized source efficient by itself; responsive candidates still determine how many bytes are downloaded.

Choosing dimensions for common website images

Use case	How to size it	Important detail
Article body	Use the maximum reading-column width and nearby smaller candidates.	Keep the original aspect ratio and reserve its height.
Card thumbnail	Measure the card image box at each grid breakpoint.	Use a consistent crop if cards must align.
Hero or banner	Measure the full-bleed area on phone, tablet, and desktop layouts.	Use picture if the crop or focal point changes.
Logo	Size for the largest rendered logo slot and include a high-density candidate where needed.	Preserve the logo’s intrinsic proportions.
Avatar	Generate candidates around the displayed circle or square dimensions.	Crop consistently and provide meaningful alt text when the person matters.
Background image	Measure the painted area and consider separate sources for mobile and desktop.	Backgrounds do not provide HTML image semantics or built-in srcset; manage loading deliberately.

Loading, accessibility, and SEO details

• Give informative images useful alt text. Use an empty alt for purely decorative images.
• Do not use CSS scaling to substitute for responsive source selection.
• Reserve space with dimensions or aspect-ratio.
• Lazy-load below-the-fold images when appropriate, but keep the primary above-the-fold image available early.
• Check that the selected candidate is not a desktop-sized original on a narrow device.
• Keep candidate aspect ratios consistent unless art direction requires a crop change.

Verify what the browser downloads

1. Open the page at each important viewport width.
2. Use the browser Network panel and filter to images.
3. Check the selected URL, transferred bytes, intrinsic dimensions, and displayed dimensions.
4. Throttle the connection and confirm that important content remains usable while images load.
5. Run a performance audit after changing the candidate ladder or sizes rules.

Look specifically for a mobile viewport downloading the largest desktop candidate, a missing sizes attribute, unexpected upscaling, and layout movement before image decode.

Common mistakes and fixes

Symptom	Likely cause	Fix
Every viewport downloads the same large file	No responsive candidates, or CSS resizing only.	Add width-descriptor srcset and an accurate sizes.
The browser chooses a file that is too large	sizes describes a slot wider than the real layout.	Measure the rendered column and update the media conditions.
The image looks soft on a high-density screen	The largest candidate is close to the CSS slot width.	Add a larger candidate where the visual difference justifies its bytes.
Content jumps when images appear	Missing dimensions or reserved aspect ratio.	Set matching width/height or use aspect-ratio.
Mobile composition is wrong	The desktop crop is being reused at every width.	Use <picture> and a mobile-specific crop.
Cards have different heights	Source aspect ratios or crop behavior vary.	Standardize the ratio and use object-fit: cover when appropriate.
Images overflow their container	Intrinsic width is larger than the layout.	Apply display: block; max-width: 100%; height: auto.

Performance, reliability, and cost considerations

Responsive images reduce unnecessary transfer and decoding work, but every additional candidate increases storage and build complexity. Keep the ladder modest, reuse candidates where the rendered slots are similar, and verify actual downloads rather than adding many speculative widths.

Image dimensions also affect reliability: very large files take longer to transfer and decode, especially on mobile devices. Reserve space so late loading does not move controls or text. When a crop is important to the meaning of the image, treat it as an art-direction decision rather than relying on an arbitrary resize.

Or skip the browser setup

If you need generated screenshots of pages at known dimensions, ScreenshotNeo provides a website screenshot API. It can capture full pages with lazy images loaded, a single element by CSS selector, custom viewports and 12 device presets, retina scale, dark mode, custom CSS and JavaScript, and image resizing. Before capture it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off.

Only clean shots are billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. ScreenshotNeo also has an MCP server with take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.

See the ScreenshotNeo documentation for all options. A basic request returns an image directly:

cURL

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

Python

import requests

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

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.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()));

Free usage includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 screenshots, and every feature is available on every plan. Create a free ScreenshotNeo account.

FAQ

Is 1200px the correct width for every website image?

No. The correct width follows the rendered slot. A 1200px source can be wasteful for a small card and insufficient for a wide, high-density hero.

Should I create a 2× file for every image?

Create a larger candidate when the slot and audience justify it. Device pixel ratio can require more intrinsic pixels, but the extra bytes should be weighed against the visible benefit.

When should I use picture instead of srcset?

Use srcset and sizes when the same image and crop scale. Use picture when the crop, format, or media-specific source must change.

Do width and height change the downloaded image size?

No. They reserve layout space and describe the intrinsic ratio. srcset and sizes control which candidate the browser downloads.

How can I confirm responsive image selection?

Inspect the image request in the browser’s Network panel at several viewport widths and device pixel ratios, then compare the selected file with the measured slot.