Best Image Sizes for Websites

There is no single correct image size, but there are defensible defaults. The right dimension is the size the image is displayed at, multiplied by the pixel density of the screens you care about, and nothing beyond that.

Starting points by role

• Full-width hero on desktop: 1920 pixels wide, or 2560 if your layout is genuinely that wide.
• Blog body image inside a text column: 1200 to 1600 pixels wide.
• Card or grid thumbnail: 600 to 800 pixels wide.
• Avatar or small icon: 200 to 400 pixels square.
• Open Graph social preview: 1200 by 630 pixels.

Accounting for retina displays

A high-density screen draws two or three device pixels for every CSS pixel. An image displayed 800 CSS pixels wide therefore needs a 1600 pixel source to look crisp on a 2x display. Going beyond 2x is rarely worth the extra weight; the visual gain at 3x is very hard to see and the file grows substantially.

Serve several widths, not one

The srcset attribute lets you list multiple versions and let the browser pick. A phone downloads the 800 pixel file, a desktop retina screen downloads the 2400 pixel one. This is the single highest-impact image change most sites can make, and it costs only build-time work.

Always pair srcset with a sizes attribute describing how wide the image will render, otherwise the browser assumes full viewport width and downloads more than it needs.

Do not forget dimensions in the markup

Set width and height attributes, or an aspect-ratio in CSS, so the browser can reserve space before the file arrives. Without them the page jumps as images load, which is exactly what the Cumulative Layout Shift metric penalises.