HomeArticles ToolsAbout SupportSubscribe

Optimize Images for Web

Convert images to WebP, compress to the right quality, and resize to display dimensions. Faster images mean better Core Web Vitals, higher SEO rankings, and lower bounce rates. Free, instant, private.

Why image optimization matters for websites

Images are typically the largest assets on any webpage, accounting for 60–70% of total page weight on average. Unoptimized images are the single most common cause of slow page load times, which directly impacts: bounce rate (53% of mobile users abandon pages that take more than 3 seconds to load), Core Web Vitals scores (particularly LCP — Largest Contentful Paint), and Google search rankings (page speed is a confirmed ranking factor).

The web image optimization checklist

  1. Use WebP format — 25–35% smaller than JPEG at equivalent quality. All modern browsers support it.
  2. Set quality to 75–85 — Imperceptible quality difference from 100 at typical web viewing sizes.
  3. Resize to display dimensions — Never serve a 4000px image in a 800px column. Resize first.
  4. Use responsive images — Add srcset to serve different sizes to different screen widths.
  5. Add loading="lazy" — Defer off-screen images to speed initial page load.
  6. Set explicit width/height — Prevents layout shift (improves CLS score).

Recommended settings for web optimization

For most web images: WebP format, quality 80, resize to actual display width. For hero images: quality 85 and maximum 1920px wide. For thumbnails: quality 75, 400–800px wide. For product images: quality 85, 800–1200px square.

Frequently asked questions

Image optimization typically delivers the largest single improvement to page load time. Reducing a page's total image weight from 5 MB to 500 KB cuts image loading time by 90% on a typical connection. This can move LCP from 4+ seconds to under 2.5 seconds — the threshold for a "Good" Core Web Vitals score — improving both user experience and search rankings.
WebP is the recommended format for most websites. It achieves 25–35% smaller files than JPEG at equivalent quality and is supported by 97% of browsers. For advanced optimization, use AVIF as primary with WebP as fallback — AVIF is 20% smaller than WebP but has 93% browser support. Implement both via the HTML <picture> element.
Yes, directly. Google's Core Web Vitals include LCP (Largest Contentful Paint), which measures how long the largest image on the page takes to load. A poor LCP score (above 4 seconds) is a confirmed Google ranking signal. Image optimization is the fastest and most impactful way to improve LCP. Google's PageSpeed Insights will specifically flag unoptimized images as "opportunities."
Before — always. While some CMS platforms (WordPress with plugins, Shopify) offer automatic image optimization, the best approach is to pre-optimize before upload. This ensures your CDN and page source always serve optimized images regardless of plugin configuration, and avoids the processing overhead of on-the-fly optimization.