Why it matters
Google uses Core Web Vitals as part of page experience. Largest Contentful Paint (LCP) — often a hero image — should load within 2.5 seconds, and Cumulative Layout Shift (CLS) should stay below 0.1. Heavy, unsized images hurt both, especially on mobile connections.
The 4-step workflow
- Resize to display size. A photo shown 800 px wide does not need 4000 px. Use Resize image — about 2× the display width covers high-density screens.
- Choose a modern format. Convert photos to WebP (or AVIF) and keep PNG only for graphics that need lossless quality.
- Compress. In Compress image, quality 70–80% is usually invisible to visitors.
- Name files descriptively before uploading (see image SEO).
HTML tips
- Always set
widthandheightattributes so the browser reserves space (prevents layout shift). - Use
loading="lazy"for images below the fold — but never on the main hero image. - Give the LCP image
fetchpriority="high". - Serve several sizes with
srcsetandsizesso phones download smaller files.
Target file sizes
| Image | Typical width | Target size |
|---|---|---|
| Full-width hero | 1600–2400 px | 150–350 KB |
| Content image | 800–1200 px | 50–150 KB |
| Product image (with zoom) | 1200–2000 px | 100–300 KB |
| Thumbnail | 300–600 px | 10–40 KB |
Frequently asked questions
Should I use WebP or AVIF?
WebP is the safe default with universal browser support. AVIF compresses better and is supported by modern browsers; use it if your platform can generate and serve it.