How to Optimize Images for Websites and Page Speed

Images are usually the heaviest part of a web page. Optimising them improves loading speed, Core Web Vitals scores, mobile data use and conversions. This checklist covers what matters, in order of impact.

1. Serve images at the right dimensions

Upload images no larger than the biggest size they are displayed at. A 4000-pixel photo shown in an 800-pixel column wastes around 96% of its pixels. Check the display size in your browser’s developer tools, then use the Image Resizer. For high-density (Retina) screens, providing up to twice the display width is reasonable for important images.

2. Use modern formats

WebP is supported by all modern browsers and is typically 25–35% smaller than JPG. AVIF can be smaller still, though encoding is slower and tooling less universal. A good default today: WebP for photos and graphics, SVG for logos and icons. Convert with the JPG to WebP Converter or PNG to WebP Converter.

3. Compress sensibly

Quality around 70–85% is a sweet spot for photos. The Image Compressor shows the size before and after so you can find the lowest quality that still looks right. See our full guide: How to Compress Images Without Losing Quality.

4. Always set width and height

Include width and height attributes (or CSS aspect-ratio) on every image. The browser then reserves the right space before the image loads, preventing content from jumping — measured as Cumulative Layout Shift (CLS), one of Google’s Core Web Vitals.

<img src="team.webp" width="1200" height="800" alt="Our team at the Lahore office">

5. Lazy-load images below the fold

Add loading="lazy" to images that are not visible on first load. Browsers then load them only when the visitor scrolls near them. Do not lazy-load your main hero image — that delays Largest Contentful Paint (LCP). For the hero image, consider fetchpriority="high".

6. Use responsive images

With srcset and sizes, phones download a smaller version than desktops:

<img src="hero-1200.webp"
     srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-1800.webp 1800w"
     sizes="(max-width: 700px) 100vw, 1200px"
     width="1200" height="600" alt="Mountains in Hunza valley at sunrise">

7. Write useful alt text

Alt text describes images for screen-reader users and helps search engines understand them. Describe what matters in the context of the page, in one short sentence. Decorative images should have empty alt (alt=""). Audit a page with the Image Alt Text Helper.

8. Use descriptive file names

handmade-leather-wallet-brown.webp tells search engines more than IMG_4021.jpg. Use lowercase words separated by hyphens.

9. Strip metadata

Camera EXIF data (and sometimes GPS location) adds kilobytes and can reveal private information. Re-encoding in the browser removes it; check with the Image Metadata Viewer.

10. Cache and use a CDN

Serve images with long cache lifetimes and through a CDN (Cloudflare, for example) so repeat visitors and distant visitors load them quickly.

Measure the result

Test pages with PageSpeed Insights or Lighthouse in Chrome DevTools before and after. Look at LCP (aim for under 2.5 seconds) and CLS (under 0.1), and check the “Properly size images” and “Serve images in next-gen formats” audits.

Found an error or have a suggestion? Contact us — see our editorial policy for how we write and update guides.