Images are typically the largest assets on any webpage and the single biggest contributor to slow page loads. Google's Core Web Vitals algorithm actively penalises pages with oversized, slow-loading images — directly affecting your search ranking. Yet many websites serve images that are 3–10x larger than necessary. This guide gives you the numbers you need to get images right first time.
Recommended Image File Sizes for Websites
| Image Type | Recommended Dimensions | Target File Size | Best Format |
|---|---|---|---|
| Hero / banner image | 1920 × 600–1080px | 100–300 KB | WebP / JPEG |
| Blog / article image | 1200 × 630px | 60–120 KB | WebP / JPEG |
| Product image | 800 × 800px | 50–150 KB | WebP / PNG |
| Thumbnail | 300 × 300px | 10–30 KB | WebP / JPEG |
| Logo | Vector or 200px wide | Under 10 KB | SVG |
| Icon | 32–64px (or SVG) | Under 5 KB | SVG / WebP |
| Background image | 1920px wide | 100–500 KB | WebP / JPEG |
Which Image Format Should You Use?
- WebP: The best choice for photographs and complex images in 2026. Supported by all modern browsers (Chrome, Firefox, Safari, Edge). Produces files 25–35% smaller than JPEG at equivalent visual quality. Use WebP as your primary format with JPEG as a fallback for older browsers.
- AVIF: Even more efficient than WebP — files can be 50% smaller than JPEG. Browser support is now very high (98%+). An excellent choice for new projects with no need to support very old browsers.
- JPEG: The classic compressed format for photographs. Still reliable and universally supported. Use as a fallback or when WebP/AVIF are not available.
- PNG: Best for images requiring transparency (logos, overlays, illustrations with sharp edges). Lossless compression produces larger files than JPEG — only use PNG where transparency is actually needed.
- SVG: Ideal for logos, icons, simple illustrations, and charts. Vector-based: scales to any size without quality loss. Very small file sizes for simple graphics. Not suitable for photographs.
- GIF: Supports simple animations but has only 256 colours and poor compression. Use CSS animations or video instead — MP4 is typically 80% smaller than GIF for the same animation.
Resolution: How Many Pixels Do You Actually Need?
Most screens display at 72–96 PPI (pixels per inch). Providing an image at higher resolution just increases file size with no visible improvement on standard displays. However, Retina and HiDPI displays (common on MacBooks, iPhones, and many Android phones) render at 2x or 3x — meaning you need images 2–3x the displayed pixel dimensions for sharp rendering on those screens.
The best practice is to use the srcset and sizes HTML attributes to provide multiple resolutions:
<img src="hero-800.webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w, hero-2400.webp 2400w" sizes="(max-width: 768px) 100vw, 1200px" alt="Description" loading="lazy" />
This tells the browser to pick the right image for the screen size and resolution automatically — serving a small image on mobile and a larger one on desktop Retina displays.
How Large Images Affect SEO and Core Web Vitals
Google's Core Web Vitals include:
- Largest Contentful Paint (LCP): How long the main content takes to load. Images are usually the LCP element — oversized images directly cause slow LCP scores.
- Cumulative Layout Shift (CLS): Unexpected layout shifts. Always specify width and height attributes on img tags to prevent layout shift as images load.
A page scoring "Good" on Core Web Vitals ranks better than equivalent pages with "Needs Improvement" scores — making image optimisation a direct ranking factor.
Practical Tips to Reduce Image File Size
- Resize before uploading. Never upload a 4000px wide image when it displays at 800px. Use our Image Resizer to resize to the correct dimensions first.
- Compress after resizing. Use our Image Compressor to reduce file size further. JPEG quality 75–85% is typically visually indistinguishable from 100% but 50–70% smaller.
- Convert to WebP. Converting existing JPEG assets to WebP typically cuts file size 25–35% with no visible quality change.
- Strip metadata. Camera photos embed GPS coordinates, camera settings, and other EXIF data that can add 20–100KB to a file. Stripping metadata reduces size and protects privacy.
- Use lazy loading. Add
loading="lazy"to all images below the fold. Zero code change, major performance improvement. - Use a CDN. A Content Delivery Network serves images from servers geographically close to each visitor, reducing load times globally.