Images are usually the heaviest part of a web page. Optimizing them is the single most effective way to make a site load faster, keep visitors and improve search performance. This guide covers everything you need.
Why image optimization matters
- Speed: heavy images delay the moment your main content appears.
- Core Web Vitals: the Largest Contentful Paint (LCP), one of Google’s page experience signals, is often an image. A good LCP is 2.5 seconds or less.
- Mobile data: many visitors are on slow connections.
- Cost: smaller images use less bandwidth and storage.
1. Choose the right format
Use WebP (or AVIF) for photos and graphics, JPG as a fallback, PNG only where you truly need lossless quality and SVG for logos and icons. See JPG vs PNG vs WebP vs AVIF for a full comparison. Convert existing files with JPG to WebP and PNG to WebP.
2. Resize to the displayed size
Never upload a 5000 px photo for a 800 px slot. Work out the largest size an image is shown and resize to about twice that for high-density screens.
| Slot | Upload width |
|---|---|
| Full-width hero | 1920 px |
| Content column | 1200 px |
| Card thumbnail | 600 px |
Use the Image Resizer or Bulk Image Resizer.
3. Compress
Aim for quality 75 to 85 percent for lossy formats. Typical targets: hero banners under 200 KB, content images under 150 KB, thumbnails under 50 KB. The Image Compressor shows the saving for each file.
4. Set width and height attributes
Always include width and height on your img tags. This lets the browser reserve space before the image loads and prevents layout shifts (Cumulative Layout Shift).
5. Lazy-load below-the-fold images
Add loading="lazy" to images that are not visible at first. Do not lazy-load your main hero image, since that delays LCP. Instead, you can add fetchpriority="high" to it.
6. Serve responsive images
Use srcset and sizes so phones download small versions and desktops download large ones:
<img src="photo-800.webp" srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="533" alt="Description">7. Strip unnecessary metadata
Phone photos carry camera and GPS data. Removing EXIF data saves bytes and protects privacy.
8. Write useful alt text
Alt text helps accessibility and image search. Describe what the image shows in a short sentence, and do not stuff keywords.
9. Use descriptive file names
blue-running-shoes.webp is better than IMG_4032.webp for search engines and for you.
10. Use a CDN and caching
A content delivery network serves images from servers close to your visitors. Set long cache lifetimes for images that rarely change.
Optimization checklist
- Right format (WebP or AVIF for the web)
- Right dimensions
- Compressed to 75 to 85 percent
- Width and height attributes
- Lazy loading except the hero image
- Responsive srcset
- Alt text and descriptive file names
- Metadata stripped
- CDN and caching
Work through the list once for your biggest pages and you will often cut page weight in half.
Measure before you optimise
Run your page through a speed test and look at the Largest Contentful Paint and total page weight. Often a single oversized hero image is the biggest win. Fix the heaviest image first and test again.
The optimisation checklist
- Resize to display size. Do not ship a 4000 px image into a 800 px slot.
- Compress. Aim for under 200 KB for hero images and 100 KB for the rest.
- Use modern formats. WebP gives smaller files at the same look.
- Lazy load below-the-fold images with the
loading="lazy"attribute. - Set width and height on every image so the page does not jump while loading.
- Serve responsive sizes with
srcsetso phones download smaller files. - Cache images with long expiry headers.
Do not lazy load the main image
Lazy loading is great for images far down the page, but the first large image should load right away, or it will hurt your Largest Contentful Paint score.
Tools for each step
Shrink with the image resizer and image compressor, convert with JPG to WebP and clean files with remove EXIF data. Running WordPress? See how to optimise images for WordPress.
Frequently asked questions
What is the ideal image size for a website?
Most content images should be 1200 to 1600 pixels wide and under about 150 KB. Full-width banners can be 1920 pixels wide and under 250 KB.
Should I lazy-load every image?
Lazy-load images below the fold, but not your main hero image, which should load immediately so the Largest Contentful Paint stays fast.
Is WebP good for SEO?
WebP does not directly boost rankings, but smaller images improve page speed and Core Web Vitals, which are part of Google page experience signals.
Do I need alt text on every image?
Add descriptive alt text to meaningful images for accessibility and image search. Leave it empty for decorative images.
