Resizing images for a faster website: widths, formats and layout

Why oversized images slow a page

Images are often the heaviest resources on a web page. A file that is larger than needed takes longer to arrive, and it competes for the connection with everything else the page loads.

Speed is also measured. Largest Contentful Paint (LCP) is the time until the largest image, text block or video in view has been drawn. A good value is 2.5 seconds or less. If a header image or product shot is the largest thing in view, its download time feeds straight into that number.

web.dev notes that serving desktop-sized images to mobile devices can use 2 to 4 times more data than needed.

Pick a width from the layout, then double it

Start with how wide the image is shown on the page, in CSS pixels. Many phones and laptops have high-density screens, where one CSS pixel is drawn with two or three device pixels. This is called the device pixel ratio (DPR).

web.dev's example: an image shown in a 500 × 500 box needs 500 pixels on a normal screen and 1000 pixels at a DPR of 2. A 1000 pixel image on a normal screen is twice as large as needed. web.dev also notes that the eye can't really benefit from a DPR of 3, so a smaller file often looks the same there. For most images, twice the displayed width is a good ceiling.

One size or several

A single image at twice the column width is a big improvement over the camera original. Developers can go further with responsive images: the srcset attribute lists several copies of the same picture with their widths, and the sizes attribute tells the browser how wide it will be shown. The browser then downloads the copy that fits the screen. web.dev says it is common to serve 3 to 5 sizes of an image.

If your site builder or theme makes these copies for you, upload one sensible master size rather than the full camera file. Smaller copies made from it will still be sharp.

Choose a modern format

Format matters as much as pixel size. According to web.dev, WebP often compresses better than JPEG, PNG or GIF, and AVIF has shown savings of more than 50 percent compared with JPEG in some tests. For photos on a website, WebP is a safe default. The guide on JPG, PNG, WebP and AVIF covers the choice in more detail.

Lazy loading: only below the first screen

Adding loading="lazy" to an image tells the browser to wait until the visitor scrolls near it. web.dev says this is well supported across the major browsers. It saves data on long pages with many pictures.

Use it only for images outside the first screen. web.dev warns against lazy-loading images likely to be in view when the page opens, especially the LCP image, because that delays exactly the picture you want to appear first.

Width and height stop the page jumping

Have you started reading a page and had the text jump down as a picture appeared above it? That is layout shift, measured as Cumulative Layout Shift (CLS). web.dev's target is a CLS of 0.1 or less.

The fix is to give every image a width and height attribute. Modern browsers work out the image's shape from these numbers before the file arrives and reserve the space. Without them the image starts at 0 × 0 and pushes content down when it loads. CSS such as height: auto still lets the image scale on small screens while keeping its shape.