Optimizing Images for Websites: A Guide to Faster Pages

Images often make up most of a web page's total size. A few multi-megabyte photos uploaded straight from a phone can make a page take seconds to load on mobile. Visitors leave slow pages, and Google considers page experience in rankings.

1. Upload images at the size they're shown

The most common mistake is showing a 4000-pixel-wide photo in an 800-pixel area. The browser scales it down but still downloads the whole file. As a general starting point:

For high-resolution (Retina) screens, about twice the display width is enough; larger makes no visible difference.

2. Choose the right format

• WEBP: usually the smallest file for photos and transparent images.
• JPG: for photos where WEBP can't be used.
• PNG: for sharp-edged graphics and screenshots; needlessly large for photos.
• SVG: for logos, icons and simple illustrations.

3. Compress

For photos, a quality setting of 75–85 usually makes files several times smaller without a visible difference. Compressing images before uploading also saves server space and bandwidth.

4. Give images dimensions

Setting width and height on images in HTML lets the browser reserve space before the image loads, so content doesn't jump around while the page loads. That shift is one of the page experience metrics Google measures (CLS).

5. Load off-screen images later

For images further down the page, loading="lazy" makes the browser download them only when the visitor scrolls near. Don't apply it to the main image at the top of the page; that one needs to load right away.

6. Use descriptive file names and alt text

A file name like "white-ceramic-mug.jpg" instead of "IMG_4821.jpg", and alt text that describes the image, matter both for visually impaired visitors and for image search.

Quick checklist

• Is the image much larger than the area it's shown in?
• Are photos WEBP or compressed JPG?
• Are width and height set?
• Do images further down use lazy loading?
• Is alt text written?

Shrink images in bulk and set a max width with the Image Compressor, and convert them to WEBP with the Image Converter. Your files are processed in your browser and never uploaded to a server.