How to Reduce Image Size for a Website

Images typically account for 50–80% of a webpage's total size. Optimizing them is the single highest-return performance improvement available — often reducing page weight by 60–80% with no visible quality change.

Why Image Size Matters for SEO

Google's Core Web Vitals include Largest Contentful Paint (LCP) — the time until the largest visible element loads. For most pages, the largest element is an image. A slow LCP hurts search rankings.

Google's PageSpeed Insights specifically flags:

• "Serve images in next-gen formats" (not using WebP)
• "Properly size images" (image dimensions larger than display dimensions)
• "Efficiently encode images" (quality too high for web use)

Fixing these three issues typically improves LCP by 1–3 seconds.

Step 1: Resize to Display Dimensions

This is the highest-leverage step. A 4000×3000 image displayed at 800×600 stores 25× more pixels than the display uses.

Rule: The image file should be no wider than the display width × device pixel ratio (2 for Retina).

For a blog post with 800px content width:

• Standard display: 800px max width
• Retina/HiDPI display: 1600px max width (2×)
• Upload at 1600px wide to cover both

Use Resize Image to hit the exact dimensions.

Step 2: Use the Right Format

Step 3: Set the Right Quality

For lossy formats (JPG, WebP):

Use our Compress Image tool set to quality 80–85 for general web use.

Step 4: Convert to WebP

WebP delivers 25–34% better compression than JPG at equivalent visual quality. Use our WebP Converter and serve with an HTML <picture> fallback:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1600" height="900">
</picture>

Step 5: Add Width and Height Attributes

Always include width and height on <img> tags. This prevents layout shift (a Core Web Vitals metric) as the page loads:

<img src="product.webp" width="800" height="600" alt="Product name">

Step 6: Lazy Load Below-the-Fold Images

Add loading="lazy" to any image not visible on initial load:

<img src="blog-image.webp" loading="lazy" alt="Description">

This defers loading until the user scrolls near the image — dramatically improving initial page load time.

Expected Results