What size should images be for a website? Pixel widths and KB budgets
5 minutes, updated 2026-11-09
Images are usually most of a page's weight, and the largest image near the top is often what decides how fast the page feels. Search engines measure that moment as Largest Contentful Paint and want it under 2.5 seconds. Getting there is mostly about sending images no larger than the layout can show.
Width: match the largest box, times two
Find the widest the image is ever displayed, in CSS pixels, and export it at about twice that width so it is sharp on high-density screens. Going beyond twice adds bytes no screen can show. If the site supports responsive images (srcset), provide two or three widths and let the browser pick.
Starting points
| Image | Width to export | Budget per image |
|---|---|---|
| Full-width hero | 1920 to 2400 px | 150 to 300 KB |
| Content image in an article | 1200 to 1600 px | 80 to 150 KB |
| Product photo with zoom | 1600 to 2000 px | 100 to 250 KB |
| Grid or card thumbnail | 400 to 600 px | 20 to 50 KB |
| Logo or icon | Use SVG where possible | Under 10 KB |
Format
WebP is accepted by every current browser and is about a quarter to a third smaller than JPG at the same visual quality; AVIF is smaller again but slower to create. Use JPG only where a platform will not take the others, and PNG only for graphics that need exact pixels. Keep quality around 75 to 85 for photos; the difference above that is rarely visible on a web page.
Loading
- Give every image a width and height (or an aspect ratio) so the page does not jump while it loads.
- Let images below the first screen load lazily; never lazy-load the main image at the top.
- Remove camera metadata; it can be tens of kilobytes per photo and is never shown.
- Resize before uploading even if the platform resizes too: you control the quality, and the original is not left lying on a server.
Doing a batch
In the resize tool, choose a width in pixels with 'Fit inside', pick WebP, and drop every image for the page. All of them come out at the same width, renamed with their new size, in one ZIP.