Best Image Sizes for Websites

Find the size your own layout needs

Find the width of the image area on your page, rather than using the whole browser window. Start with the dimensions recommended by your theme or image block. If those are not available, use the browser inspector or ask your website maintainer to check the displayed width on a phone and a desktop. Include any larger gallery or zoom view you need.

For an image displayed 720 pixels wide, compare 720- and 1440-pixel-wide versions. The larger version may look sharper on a high-density screen, but check whether the extra detail is worth the larger file. Use a sufficiently large original; enlarging a 900-pixel source to 1440 will not restore missing detail.

Use placement-based starting points

A 2400-pixel cover is not automatically the right file for every visitor. A phone may need a smaller variant or a different crop. Conversely, a product zoom feature may need a separate larger file than the normal product card.

Separate pixels from file size

Pixel dimensions describe the image grid, such as 1200 × 800. File size describes storage and transfer, such as kilobytes or megabytes. Two images with the same dimensions can have very different file sizes because their detail, format and compression differ.

A CSS pixel measures the image’s visible size in the page layout. On a high-density screen, one CSS pixel can use several physical screen pixels, so a sharper version may need more image pixels than its displayed width.

Start with the layout. A photograph displayed at 600 CSS pixels wide does not usually need the same source as a photograph filling a large desktop screen. High-pixel-density screens may benefit from more image pixels than the CSS display width. Whether that benefit is worthwhile depends on the image and the increase in file size.

Keep proportions deliberate

In the resizer, keep the aspect ratio locked and enter a width of 1200 pixels for a 3000 × 2000 original. The height becomes 800 automatically. You do not need to calculate and enter both dimensions. Check that faces and circles keep their shape.

When a design needs a square thumbnail from a wide photograph, crop instead of squeezing it into a square. Use the crop tool and keep the subject within the area that will remain visible on smaller screens. Enlarging a small source cannot recreate detail that was never captured.

Deliver different sizes when the layout needs them

Responsive image markup lets the browser choose between candidate files. Width-based srcset and sizes describe available widths and the intended display slot; they do not create image files for you. See MDN’s responsive image guide for implementation examples.

If you use a CMS, check whether it already generates variants and writes this markup. If you maintain static pages, export the required files and have the page reference them. Uploading three files without connecting them in the page does not make delivery responsive.

Set a practical file budget

Choose a budget for your own layout by testing representative images and the total page. A page with twelve product cards has a different image budget from a portfolio page with one detailed photograph. There is no single kilobyte threshold that guarantees fast loading or good quality.

1. Inspect the image at its actual display size.
2. Try smaller dimensions and a more efficient format.
3. Check the downloaded file size and visible detail.
4. Test the page on mobile before reusing the preset.

Separate covers, product photos and thumbnails

A wide cover needs a composition that survives narrow screens. If a subject near the edge disappears, prepare a mobile crop instead of stretching the desktop image. A product detail may need a separate large zoom file; visitors should not have to download that version for every small product card. A square thumbnail needs a deliberate crop, not a forced square aspect ratio applied to a landscape photo.

Record a small preset for each placement: aspect ratio, maximum displayed width, candidate widths and the detail that must remain readable. Recheck those presets after a theme change. If a phone still downloads the largest file, investigate the page’s responsive-image configuration rather than exporting yet another small file that the page never references.