Skip to content

How to optimise images for a website, and how large they should be

Pixel sizes for common layouts, sensible file size budgets, the right format for each kind of image, and the loading attributes that make pages feel fast.

Websites and developers · 2 min read · Updated

Ready to try it? Open Compress Image. It runs in your browser, with no upload.Open tool

Size images for how they are displayed

The right width for an image is the width it is shown at, multiplied by the screen's pixel density. An image displayed 800 CSS pixels wide needs 800 pixels on a standard screen and about 1600 on a high-density screen such as most phones and many laptops. Anything larger is downloaded and then thrown away by the browser.

Typical widths

As a starting point, before srcset lets each device choose:

  • Full-width hero or banner images: 1920 to 2560 pixels wide.
  • Images inside an article column: 1200 to 1600 pixels.
  • Cards and thumbnails: 400 to 800 pixels.
  • Logos and icons: SVG where possible, otherwise twice the displayed size.
  • Open Graph link previews: 1200 × 630 pixels.

File size budgets

There is no official limit, but with modern formats a large hero image can usually be kept to roughly 200 to 300 KB, content images to about 150 KB and thumbnails to about 50 KB. The largest image near the top of a page often decides how quickly the page appears to load, so spend the most effort there.

Pick the format for the content

  • Photos: WebP or AVIF, with JPG as a fallback where needed.
  • Screenshots and interface images: lossless WebP, or PNG with a reduced palette.
  • Logos, icons and diagrams: SVG.
  • Animations: animated WebP or a short video instead of GIF, which is usually several times larger.

Loading, layout and metadata

  • Set width and height on every img element so the browser reserves space and the layout does not jump as images arrive.
  • Lazy-load images below the first screen with loading="lazy". Load the main image at the top normally, and consider fetchpriority="high" for it.
  • Use srcset and sizes so phones download smaller files than desktops.
  • Strip metadata. Camera EXIF adds bytes and can expose a location. Compress Image removes it by default.

A quick workflow

  1. Resize to the largest size the image is displayed at, or generate several widths with Responsive Images.
  2. Convert photos to WebP or AVIF, or let Format Shoot-out pick the smallest format at equal visual quality.
  3. Compress with the For a website preset, which saves WebP no wider than 1920 px.
  4. Check the result side by side with the original before publishing.

Tools in this guide

Related guides

All guides