Images are typically the heaviest assets on a web page. Optimizing them is the fastest way to improve load times.
Images account for 40-60% of a typical web page's total size. Slow-loading images directly impact Core Web Vitals, especially Largest Contentful Paint (LCP). Google uses these metrics as ranking signals. Faster images mean better search rankings, lower bounce rates, and improved user experience on mobile networks.
Format selection is the single biggest factor in image file size.
| Content type | Best format | Why |
|---|---|---|
| Photographs | WebP (JPG fallback) | 25-35% smaller than JPG |
| Screenshots, text | PNG | Sharp edges without artifacts |
| Logos, icons | SVG | Infinitely scalable, tiny file size |
| Maximum savings | AVIF | 50% smaller than JPG (needs fallback) |
Learn more: Best Image Format for Web in 2026
Even after choosing the right format, further compression can reduce file size by 30-70% without visible quality loss. Use our Image Compressor to strip metadata and optimize encoding. For photographs, JPG quality 75-80 is visually identical to quality 100 at a fraction of the file size.
Do not upload a 4000px-wide image if it displays at 800px. The browser downloads the full image and then scales it down, wasting bandwidth. Resize images to the largest size they will ever be displayed. For retina displays, use 2x the display size (e.g., 1600px for an 800px display slot).
Resize for any platform: YouTube | Instagram | X / Twitter | Custom crop
Add loading="lazy" to images below the fold. The browser will not download them until the user scrolls near them. This reduces initial page load time and saves bandwidth for users who do not scroll to the bottom.
Do not lazy-load the hero image or any image visible in the initial viewport. Those should load immediately for the best LCP score.
Use the HTML srcset attribute to serve different image sizes for different screen widths. Mobile users on small screens should not download desktop-sized images. A responsive image setup can cut mobile image payload by 50-70%.
A Content Delivery Network serves images from servers geographically close to the user. This reduces latency and improves time-to-first-byte. Most modern hosting platforms (Cloudflare Pages, Vercel, Netlify) include CDN by default.
On an image-heavy page, proper optimization can reduce total page weight by 50-80% and improve LCP by 1-3 seconds. The impact depends on how unoptimized the original images were.
WebP is the safest modern choice with 97%+ browser support. AVIF offers better compression but requires fallbacks for the ~7% of browsers that do not support it. Use both with the HTML picture element for maximum savings.
No. Googlebot renders JavaScript and handles lazy loading correctly. The native loading=lazy attribute is recommended by Google. Just make sure above-the-fold images are not lazy-loaded.