What size should images be for a website? Widths, srcset and sizes

There is no single right size: make each image as wide as the space it fills on the page, multiplied by the screen's pixel density, and offer three to five widths so the browser can pick. A card 400 pixels wide on a phone with a density of 3 needs a 1,200-pixel file; the same card on an ordinary laptop needs 400. List the widths in srcset, describe the space with sizes, and set width and height so the page does not jump while the image loads.

Why is there no one right image size?

Because the same image is shown in slots of different widths on screens of different densities. CSS measures a page in CSS pixels, and a phone or a high-density laptop packs two or three device pixels into each one. A file with fewer pixels than the screen has to draw looks soft; a file with many more is downloaded and then thrown away.

So the question to ask is not "what size is best" but "how many device pixels wide is this slot, at its widest?" That is:

slot width in CSS pixels × device pixel ratio = the width of file you need

How wide should the file be for common slots?

These are worked examples of that formula, not rules. Check the real width of the slot in your own layout (your browser's developer tools show it).

The image fills	Slot width	At density 1	At density 2	At density 3
A thumbnail in a grid	200 px	200	400	600
A card or a blog column on a phone	400 px	400	800	1,200
A blog column on a laptop	720 px	720	1,440	2,160
The full width of a 1,440 px laptop	1,440 px	1,440	2,880	4,320
The full width of a 1,920 px monitor	1,920 px	1,920	3,840	5,760

Rounded to a few widths you can actually make, something like 320, 640, 1,280, 1,920 and 3,840 covers every row of that table well enough. web.dev's guide to responsive images says it is "common to serve 3-5 different sizes of an image": more sizes fit each screen better but take more storage.

How much does an oversized image cost?

More than most people expect. On Nov 5, 2026 we asked i.heart.photos for 14 public images from the Heart Photos wall that are 3,840 × 2,160 pixels (4K), each at four widths, and read the size of the AVIF file it sent back for each (all at quality 50, and each response's X-Heart-Variant header confirmed it was the width we asked for):

Width	Median file	Smallest	Largest
320 px	5.4 KB	2.6 KB	8.9 KB
1,280 px	54 KB	19 KB	147 KB
1,920 px	110 KB	31 KB	395 KB
3,840 px (full size)	365 KB	60 KB	1.8 MB

Sending the full 4K file into a slot that needed 1,280 pixels cost about seven times the bytes at the median. Going from 1,280 to 1,920 pixels roughly doubled the file, close to the 2.25 times as many pixels it holds. Fourteen images is a small sample and yours will differ, but the shape holds: file size grows with the pixel count, so the width you choose matters more than almost any other setting.

Lighthouse, the audit built into Chrome, flags this. Its Properly size images check fails an image when its rendered size "is at least 4KiB smaller than the actual size," and it counts device pixel ratio when it works out the rendered size. As of Lighthouse 13 that check lives inside the "Improve image delivery" insight.

How do srcset and sizes work?

srcset lists the files you have and how wide each one is, with a w after the number. sizes tells the browser how wide the slot will be, because the browser picks a file before the page's CSS is laid out.

<img
  src="tower-1280.avif"
  srcset="tower-640.avif 640w, tower-1280.avif 1280w, tower-1920.avif 1920w, tower-3840.avif 3840w"
  sizes="(max-width: 760px) 100vw, 720px"
  width="3840" height="2160"
  alt="A tall white tower above a coastal city">

That reads: on a window up to 760 pixels wide the image fills the whole width, and otherwise it is 720 pixels wide. A phone 390 pixels wide at density 3 needs 1,170 device pixels and takes the 1,280 file; a laptop at density 2 needs 1,440 and takes the 1,920 file.

A few things worth knowing, all from MDN's reference for the img element:

• Leave out sizes and the browser assumes 100vw, the full width of the window. For an image in a narrow column, that makes it download a file far too big.
• The browser has the last word. "The user agent selects any of the available sources at its discretion," so it may take a smaller file on a slow connection or keep one it already has.
• For an image that is always the same size, such as a logo, use density descriptors instead: srcset="logo.png 1x, [email protected] 2x", with no sizes.
• width and height let the browser work out the shape before the file arrives, which stops the page jumping when it does.

To offer AVIF or WebP with a fallback as well, wrap this in the HTML <picture> element, as our post on AVIF vs JPEG XL vs WebP shows.

Does image size affect Core Web Vitals?

Yes, two of them. An <img> element can be the page's Largest Contentful Paint, and web.dev says a good LCP is 2.5 seconds or less at the 75th percentile of page loads. A big hero image that is bigger than it needs to be is often what pushes a page past that.

The other is layout shift. web.dev lists "images without dimensions" first among the most common causes of a poor Cumulative Layout Shift, and a good score is 0.1 or less. Setting width and height on every image fixes most of it.

What about sizes="auto"?

It lets the browser measure the slot itself, so you do not have to keep sizes in step with your CSS. MDN notes it is only valid with loading="lazy", since the layout must be known by the time the image loads. Can I use showed 78.61% of global browser usage supporting it on Nov 5, 2026: Chrome and Edge since version 126, Firefox since 150, and Safari only in part, from version 27. Write sizes="auto, (max-width: 760px) 100vw, 720px" and older browsers fall back to the rest of the list.

Frequently asked questions

What is the best image size for a website in pixels?

There is none for every page. For a full-width hero, 1,920 pixels is a sensible middle width and 3,840 covers large high-density screens; for a blog column, 1,440 to 2,160 is usually plenty. Work it out from the slot width times the pixel density, then round to the widths you make.

Is a 1,920-pixel image enough for a full-width banner?

On a 1,920-pixel monitor at density 1, yes. On a 1,440-pixel laptop at density 2 the slot is 2,880 device pixels wide, so a 1,920 file will look a little soft up close. Offer a larger width in srcset and let the browser decide.

Should I upload 4K images to my website?

Keep the 4K original, and serve it only where a screen can use it. On our 14 images the 4K AVIF was about seven times the size of the 1,280-pixel one, so sending it to every phone wastes most of the download.

What file size should a web image be?

No standard sets one. Lighthouse judges the bytes against the size the image is shown at, not against a fixed limit, so the right file is the one with enough pixels for its slot in an efficient format. Our post on PNG vs WebP covers the format side.

Do I need 3x images for phones?

Many phones have a density of 3, so a 3x file is the only one that gives every device pixel its own. Whether the extra bytes are worth it over 2x is your call; listing both in srcset lets the browser choose.

What Heart Photos does

Every image in Heart Photos can be fetched at any width of that ladder by adding it to the image's address: https://i.heart.photos/<id>/w320 and so on through /w640, /w1280, /w1920, /w2560 and /w3840, all AVIF. A width wider than the image itself is never made: you get the full-size image. That makes a srcset a matter of writing the address a few times:

<img
  src="https://i.heart.photos/4337aio/w1280"
  srcset="https://i.heart.photos/4337aio/w640 640w, https://i.heart.photos/4337aio/w1280 1280w, https://i.heart.photos/4337aio/w1920 1920w"
  sizes="(max-width: 760px) 100vw, 720px"
  width="1280" height="720"
  alt="A tall white tower above a coastal city">

Widths other than 1,280 and 1,920 are made the first time someone asks for them, so the very first request for one may get the next wider file for a minute while it is made. Heart Photos' own viewer does the same arithmetic as this post: it shows the smallest width that still gives every device pixel a pixel of its own at the size the image opens at, and switches to the full-size file when you zoom in past it.

To try it, open Heart Photos, upload an image, and use its address in your own page.