How to Optimize Images for Your Website: A Complete Guide for 2026

Images make up about 40% of the average web page's total weight. Optimize them properly and you can cut your page size in half, hit a sub-2.5-second Largest Contentful Paint, and rank higher in search results. Here is the full process, step by step.

Why Image Optimization Matters More Than Ever

According to HTTP Archive data, the median web page now weighs about 2.5 MB on mobile, and images account for roughly 1 MB of that. Google's Core Web Vitals — specifically Largest Contentful Paint (LCP) — directly measure how fast your largest visible element loads. On most pages, that element is an image.

The benchmark: an LCP of 2.5 seconds or less is "good." Above 4 seconds is "poor." Pages with image-based LCP elements have a 75th percentile load time nearly twice as slow as text-based LCP pages. The difference between a well-optimized hero image and a bloated one is often the difference between a green and a red Core Web Vitals score.

Step 1: Pick the Right Format

Format choice has the single biggest impact on file size. Here is how the main web formats compare, based on real compression benchmarks:

For most websites, WebP is the safest default. It handles both photos and graphics well, compresses aggressively, and works everywhere. If your stack supports it, serve AVIF as a primary with WebP as a fallback using the <picture> element. You can convert JPG to WebP or convert to AVIF with Vizua — everything runs in your browser with no upload needed.

Want a deeper comparison? See our WebP vs AVIF analysis and lossy vs lossless compression explainer.

Step 2: Resize to Actual Display Dimensions

A 4000 x 3000 pixel photo from your camera displayed at 800 x 600 on your website wastes roughly 80% of its pixels. Those invisible pixels still cost bandwidth and parsing time.

The rule: serve images at or near their rendered size. On a standard display, match the pixel dimensions exactly. On a 2x Retina screen, serve an image twice the display width for crispness — but no more.

Practical targets:

• Full-width hero: 1600-1920px wide (up to 2x for Retina)
• Blog content image: 800-1200px wide
• Thumbnail: 300-400px wide
• Avatar: 64-128px (up to 256px for 2x)

Use Vizua's image resizer to scale images down to the exact width you need before compressing. This alone can reduce file size by 70-90%.

Step 3: Compress with the Right Quality Setting

After choosing the format and resizing, compression is where you squeeze out the remaining savings. The quality slider matters more than most people realize — the relationship between quality and file size is not linear. Dropping JPEG quality from 100 to 80 saves enormous space; dropping from 80 to 60 yields diminishing returns with visible artifacts.

Recommended quality settings:

• JPEG: 75-85 — sweet spot for photos. A quality 80 JPEG is typically 60-80% smaller than the uncompressed original with no visible difference.
• WebP: 75-80 — equivalent visual quality to JPEG 85, in a smaller file.
• AVIF: 60-75 — lower numbers still look great thanks to the codec's efficiency.
• PNG: Use maximum compression level (lossless). For further savings, reduce to 8-bit (256 colors) when the graphic allows it.

Vizua's JPEG compressor handles this automatically using optimized algorithms that preserve edges and gradients. For a detailed breakdown by format, see our guide on compressing images without losing quality.

Step 4: Deliver Images Efficiently

Good compression is only half the story. How you deliver images to the browser matters just as much for performance.

Set explicit dimensions

Always include width and height attributes on your <img> tags (or use CSS aspect-ratio). This prevents layout shift — content jumping around as images load — which directly affects your Cumulative Layout Shift (CLS) score.

Lazy-load below-the-fold images

Add loading="lazy" to any image that isn't visible when the page first loads. The browser will defer downloading it until the user scrolls near it, saving bandwidth on the initial page load.

Prioritize your hero image

Do the opposite for your most important above-the-fold image: add fetchpriority="high" and make sure it does not have loading="lazy". Google's own testing shows that preloaded LCP images achieve near-perfect performance scores (75th percentile of 364ms), while lazy-loaded LCP images are nearly twice as slow (720ms).

Use responsive images

The srcset and sizes attributes let the browser pick the best image variant for the user's screen size and resolution. Serve a 400px-wide image to a phone, an 800px to a tablet, and 1600px to a desktop — all from a single <img> tag.

Step 5: Audit and Measure

Optimization is not a one-time task. Every new image you add is a chance for regression.

• PageSpeed Insights: Run Google's PageSpeed Insights on your key pages. Look at the LCP score and any "Serve images in next-gen formats" or "Properly size images" recommendations.
• HTTP Archive breakdown: Check the Network tab in your browser's DevTools. Sort by size. If any single image exceeds 200 KB, ask whether it could be resized, recompressed, or converted to a better format.
• Automate: Add image optimization to your build pipeline. Catch oversized images before they go live.

Quick Checklist

• Use WebP or AVIF as your default format
• Resize images to actual display dimensions (no wider than needed)
• Compress: JPEG/WebP at quality 75-85, AVIF at 60-75
• Set width and height on every <img>
• fetchpriority="high" on your hero/LCP image
• loading="lazy" on everything below the fold
• Use srcset/sizes for responsive delivery
• Keep hero images under 200 KB, thumbnails under 80 KB
• Strip unnecessary metadata (EXIF, ICC profiles) — see our EXIF data privacy guide
• Audit regularly with PageSpeed Insights

Frequently Asked Questions