Images are usually the heaviest part of a page. A phone photo can be 5MB; displayed at 1200 pixels wide it needs perhaps 150KB.
1. Resize to the displayed size
Find the largest width the image appears at on your site (often 1200–1600px for full-width, 600–800px for content images) and resize to that before uploading. A 4000px image scaled down by the browser still downloads at full size.
2. Compress
- Photos: JPEG at quality around 75–85, or WebP
- Graphics with flat colour or transparency: PNG, WebP, or SVG for logos and icons
Free desktop and web compression tools cut file sizes substantially with no visible difference.
3. Use modern formats
WebP is supported by all current browsers and is typically much smaller than JPEG. AVIF is smaller still. WordPress supports both; many image plugins convert automatically.
4. Lazy load below-the-fold images
<img src="/img/team.webp" alt="Our team" width="800" height="533" loading="lazy">Don’t lazy-load the main image at the top of the page; it should load immediately.
5. Always set width and height
It prevents the layout jumping as images load, improving CLS. How to measure website speed properly
6. Responsive images
<img src="/img/hero-1200.webp"
srcset="/img/hero-600.webp 600w, /img/hero-1200.webp 1200w"
sizes="(max-width: 700px) 100vw, 1200px"
alt="..." width="1200" height="600">WordPress generates this markup automatically for uploaded images.
Existing sites
Image optimisation plugins can process your existing media library in bulk. Back up first.