How to Optimize Images for Web — A Complete Guide

Why Image Optimization Matters

On the average web page, images make up 40–60% of the total download size. A single unoptimized hero image can weigh more than all of your HTML, CSS, and JavaScript combined. This directly impacts three things that determine whether visitors stay or leave:

• Page speed: Larger images mean longer load times. A page that takes more than 3 seconds to load loses over 50% of its mobile visitors.
• SEO rankings: Google uses Core Web Vitals — particularly Largest Contentful Paint (LCP) — as a ranking factor. If your largest image loads slowly, your search position drops.
• Bandwidth costs: For both you and your visitors. On metered mobile connections, bloated images eat through data plans and slow down the entire browsing experience.

The good news: image optimization doesn't mean sacrificing quality. With the right approach, you can cut image sizes by 60–80% while keeping them visually identical to the originals.

Step 1 — Choose the Right Format

Format selection is the foundation of image optimization. Using the wrong format can make your file 5–10 times larger than it needs to be.

• Use JPG for photographs and complex images with many colors and gradients. JPG's lossy compression is specifically designed for photographic content.
• Use PNG only when you need transparency or pixel-perfect graphics (logos, icons, screenshots with text). PNG is lossless but produces much larger files for photos.
• Use WebP whenever possible for web delivery. WebP produces files 25–35% smaller than JPG and 26% smaller than PNG with equivalent quality.

For a deeper comparison of each format's strengths and limitations, read our PNG vs JPG vs WebP guide.

Step 2 — Resize to Display Dimensions

This is the most commonly overlooked optimization, and often the most impactful. If your website displays an image at 800×600 pixels, there is no reason to serve the original 4000×3000 version. The browser downloads the full file, then throws away 96% of the pixels when rendering.

Rule of thumb: resize images to 2× the display size (for Retina/HiDPI screens), but no more. If an image will be displayed at 400px wide, export it at 800px wide. Going beyond 2× adds file weight with no visible benefit.

For common use cases:

• Blog post images: 1200–1600px wide
• Thumbnails: 400–600px wide
• Hero/banner images: 1920–2400px wide (full-width)
• Product images: 800–1200px wide

Use our Image Resizer to resize to exact dimensions — no upload needed, everything runs in your browser.

Step 3 — Compress Without Visible Quality Loss

After choosing the right format and dimensions, compression is where the remaining savings come from. The key is finding the sweet spot where file size drops significantly but quality remains visually indistinguishable.

For JPG: A quality setting of 75–85% typically produces results that are indistinguishable from the original at normal viewing distances, while reducing file size by 60–80%. Below 70%, artifacts become noticeable. Below 50%, quality degrades rapidly.

For PNG: Since PNG is lossless, compression works by optimizing the encoding without discarding data. Tools can often reduce PNG sizes by 20–40% with zero quality change.

For WebP: A quality of 80% generally matches a JPG at 85–90%, in a file that's 25–35% smaller.

Try it yourself: compress with our JPG Compressor or PNG Compressor, then use the built-in side-by-side comparison to verify quality before downloading.

Step 4 — Convert to Modern Formats

If you're still serving JPGs and PNGs exclusively, you're leaving significant performance on the table. Modern formats deliver the same visual quality in substantially smaller files:

• WebP: 25–35% smaller than JPG, supported by all modern browsers. This should be your default web format in 2026.
• AVIF: Even smaller than WebP (up to 50% smaller than JPG), but slower to encode and has narrower browser support. Good for static assets where you can pre-generate files.

The safest approach is to serve WebP with a JPG fallback using the HTML <picture> element:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description">
</picture>

Convert your images instantly with our WebP Converter — 100% client-side, no upload required.

Step 5 — Implement Lazy Loading

Lazy loading defers the download of off-screen images until the user scrolls near them. This dramatically improves initial page load time because the browser only fetches images that are actually visible.

In modern HTML, it's a single attribute:

<img src="photo.webp" alt="Description" loading="lazy" width="800" height="600">

Important details:

• Don't lazy-load above-the-fold images. Your hero image and any content visible without scrolling should load immediately. Lazy loading these hurts LCP.
• Always include width and height attributes (or use CSS aspect-ratio). This prevents layout shifts as images load, which hurts your Cumulative Layout Shift (CLS) score.
• Native lazy loading (loading="lazy") is supported by all modern browsers and requires no JavaScript library.

Checklist — Image Optimization for Web

Run through this checklist for every image before it goes on your site:

1. Format: Is this the right format? Photos → JPG or WebP. Graphics/transparency → PNG or WebP. Default → WebP.
2. Dimensions: Is the image sized to 2× display dimensions? Not the raw camera output?
3. Compression: Has the image been compressed? JPG at 75–85%, WebP at 75–80%?
4. Modern format: Is a WebP version available for browsers that support it?
5. Lazy loading: Do below-the-fold images have loading="lazy"?
6. Dimensions in HTML: Do all <img> tags have width and height attributes?
7. Alt text: Does every image have descriptive alt text for accessibility and SEO?
8. File naming: Are file names descriptive (blue-hiking-backpack.webp) rather than generic (IMG_4829.jpg)?

Every step on this list is free to implement. Use Optimize for Website to automatically compress and resize images with web-optimized defaults, or Bulk Compress to process an entire folder at once.