To pass Google Core Web Vitals and achieve page load speeds under 2 seconds, compress full-width hero images to under 150 KB (max 1920px width in WebP format), keep blog body pictures under 70 KB (max 1200px width), and size thumbnails under 30 KB. Always declare width and height HTML attributes to prevent CLS layout shifts.
Why Image Optimization is Critical for Google Rankings
Google officially incorporates page experience metrics — known as Core Web Vitals — into its search ranking algorithms. The most critical metric, Largest Contentful Paint (LCP), measures how long it takes for the largest visual element on the screen (frequently a hero image or banner) to finish rendering. Pages that take longer than 2.5 seconds to load suffer lower rankings and higher bounce rates.
Recommended Image Dimensions & Target Sizes for Websites
| Placement | Max Width | Target File Size | Recommended Format |
|---|---|---|---|
| Hero Banner (Full Width) | 1920 px | 100 KB – 150 KB | WebP (Quality 80%) |
| Blog Article Content | 1200 px | 50 KB – 80 KB | WebP or JPG |
| E-commerce Product Photo | 1000 px | 60 KB – 90 KB | WebP (White background) |
| Card Thumbnail | 600 px | 20 KB – 35 KB | WebP |
- Always include descriptive
alttext containing natural keywords. - Add explicit
widthandheightattributes to prevent Cumulative Layout Shift (CLS). - Use
loading="lazy"on all below-the-fold images.
Frequently Asked Questions
What is the maximum recommended image size for web pages?
For standard blog and content pages, individual body images should not exceed 100 KB, and full-screen hero banners should stay under 150 KB. The total weight of all assets on a single page should ideally stay below 1.5 MB.