Image sizes for websites: a practical guide
There is no single best website image size. The correct source set follows the image's maximum rendered width, layout breakpoints, device pixel density, crop behavior, and performance budget.
By PixoPublished
Start with the rendered slot
Measure the image's widest CSS layout slot, not the monitor. A full-width hero and a 320-pixel card need different source sets. If a hero renders at 1280 CSS pixels on large screens, a 1280- and possibly 2560-pixel candidate may be useful; the card should stay much smaller.
Create a small set of useful candidates
Width sets should follow the layout: for example 320, 640, 960, 1280, and 1920 pixels. Do not generate every possible size. The browser chooses among candidates, so each file should represent a meaningful step in transferred bytes.
Tell the browser the layout with sizes
The srcset attribute lists candidate widths; sizes describes how wide the image will render at viewport conditions. If sizes is missing or inaccurate, the browser may download a candidate that is larger than necessary.
Choose format and quality per image class
Use modern lossy formats for photographs, and lossless output for graphics that need it. Logos may be better as SVG. Compare text, faces, gradients, and hard edges at the rendered size rather than applying one quality number to every asset.
Protect layout and loading priority
Set intrinsic width and height or an aspect ratio to reserve space. Prioritize the main above-the-fold image when the framework supports it, and lazy-load images below the fold. Avoid making every image high priority.