How to Optimize Images for Website – Complete Guide

Images account for 50–80% of the data transferred on most web pages. Optimizing them is the highest-leverage activity for improving page speed, Core Web Vitals, and user experience. This guide covers every aspect of how to optimize images for website use.

The four pillars of web image optimization

1. Correct dimensions: Serve images at their actual display size. A 3000px image displayed at 600px is transmitting 80% wasted data. Always resize to the display dimensions before uploading.

2. Right format: Use WebP for web delivery. WebP creates 25–35% smaller files than JPG and PNG at comparable quality. Use PNG only when transparency is required in non-WebP contexts. Use JPG as a universal fallback.

3. Appropriate compression: For JPG, use 80–90 quality settings. For WebP, use standard lossy settings. Avoid over-compression that creates visible artifacts.

4. Lazy loading: Use the native loading="lazy" attribute on below-the-fold images. This defers loading until the user scrolls near the image, improving initial page load significantly.

Step-by-step image optimization workflow

• Step 1: Audit your current images. Use browser DevTools Network tab to see which images on your page are largest. Target the top 5 biggest files first.
• Step 2: Identify display dimensions. Right-click the image → Inspect Element → check the rendered dimensions (width × height in px).
• Step 3: Resize with Resizo. Open Resizo, drop your image, set dimensions to match (or 2× for retina), select WebP, download.
• Step 4: Replace in your CMS. Upload the optimized version and update any references to the old file.
• Step 5: Test with PageSpeed Insights. Run Google PageSpeed Insights before and after to confirm the improvement.

Target file sizes for web images

• Hero images: under 200 KB as WebP
• Blog featured images: under 100 KB as WebP
• Product images (e-commerce): under 80 KB as WebP
• Thumbnails: under 30 KB as WebP
• Icons/logos: under 10 KB as SVG or PNG

The impact on Core Web Vitals

Google's Largest Contentful Paint (LCP) measures how quickly the largest content element loads. On most pages, this is the hero image. Reducing a hero image from 2 MB to 150 KB can cut LCP from 4+ seconds to under 1 second — moving from "Poor" to "Good" in Google's ranking criteria.

Cumulative Layout Shift (CLS) is also affected by images. Always specify width and height attributes in your HTML so the browser reserves space for the image before it loads. This prevents layout jumping that hurts both user experience and CLS scores.