The Complete Guide to Image Optimization for 2026

1 What "image optimization" actually means

Image optimization is the process of reducing an image's file size while keeping it visually acceptable for its purpose. That last part matters — "acceptable for its purpose" is different for a hero banner on a homepage than for a thumbnail in an email inbox.

An image that looks fine at 400 KB on a blog might be unacceptable at that size for a print catalogue. An image that looks fine at 60 KB in a thumbnail might be unusable at 60 KB in a full-screen portfolio view. There is no single "optimized" image — there is only the right image for the right context.

So optimization is not a single action. It is three separate levers you can pull in combination: resizing, compressing, and converting. Most people pull only one, which is why their images are still too heavy. Pulling all three — in the right order — is where the real savings come from.

2 Lever one: resizing

Resizing changes the physical pixel dimensions of an image. A 4032 × 3024 photo from a modern iPhone has about 12 million pixels. If you are placing it in a card that renders at 800 × 600 on screen, the browser has to download 12 million pixels and then throw away most of them. That is wasted bandwidth on every single visit.

The rule for resizing web images is simple: match the largest size the image will ever display at, then double it for high-density screens. If a product image renders at 400 pixels wide in your grid, exporting it at 800 pixels wide covers both standard and Retina displays. There is no reason to export at 4000 pixels for a slot that only ever shows 400.

Resizing is the single highest-impact lever because it reduces the actual amount of information the browser has to download. Everything else is fine-tuning.

3 Lever two: compressing

Compressing keeps the pixel dimensions the same but reduces the file size by simplifying the data inside the image. There are two types, and understanding the difference changes how you think about the quality slider.

• Lossy compression throws away some data permanently in exchange for a smaller file. JPG and lossy WebP are both lossy. A JPG saved at quality 80 is visually indistinguishable from one saved at quality 100 on most screens, but is often 60–70% smaller.
• Lossless compression reduces file size without losing any data at all. PNG and lossless WebP are lossless. Lossless files are larger than lossy files for the same image, but they preserve every pixel exactly. This matters for graphics, logos, and images with sharp text edges.

For photographs, quality 80 is a good default. For screenshots of text, raise it to 90 or higher — text is where lossy compression shows first. For thumbnails and blog images, 70 is fine.

4 Lever three: converting

Converting changes the file format itself. In 2026 there are four formats worth knowing:

• JPG — oldest, most compatible, no transparency. Still fine for photographs when you need the widest possible support.
• PNG — lossless, supports transparency, larger file sizes. Good for logos, icons, and images with hard edges or text.
• WebP — modern, supports both lossy and lossless, supports transparency. Google's own WebP study found lossy WebP is 25–34% smaller than JPEG at equivalent quality, and lossless WebP is around 26% smaller than PNG. This is the format you should default to for web images in 2026.
• AVIF — newer format, often smaller than WebP in many cases. Browser support is good but not universal, so it is usually used as an additional option alongside WebP rather than a replacement.

If you are unsure what to pick, WebP is the safe default for photographs and graphics with transparency. JPG is the safe fallback for maximum compatibility. PNG is still correct for logos and text-heavy images where exact pixel preservation matters more than file size.

5 Why order matters

The order you apply these three levers makes a real difference. The correct order is:

1. Resize first. Removing pixels reduces the amount of data that every subsequent step has to process. If you compress a 12-megapixel image and then resize it down to 800 pixels, you wasted effort — and the compression artifacts get baked into the resized result.
2. Convert next. Pick the right format for the use case (WebP for web, JPG for compatibility, PNG for transparency).
3. Compress last. Apply quality reduction at the target format and size. This is the fine-tuning step.

Our free image tool applies all three in one pass, which is why it produces better results than running the same image through three separate tools.

6 Core Web Vitals and why they matter

Google's Core Web Vitals use three metrics to judge how a page feels to a real visitor:

• Largest Contentful Paint (LCP) — how long the largest visible element takes to appear. Per web.dev, an image is the LCP element on the majority of pages. Target: under 2.5 seconds.
• Interaction to Next Paint (INP) — how quickly the page responds to user interaction. Image weight indirectly affects this because heavy pages are slower to become interactive.
• Cumulative Layout Shift (CLS) — how much the layout jumps around as elements load. Images without explicit width and height attributes are a common cause of CLS.

Optimizing images is the most direct way to improve LCP, because LCP is usually an image. Compressing and resizing your images is one of the highest-leverage SEO tasks you can do, and it is why we built our tool.

7 How images affect AI search in 2026

AI search engines and assistants — including Google's AI Overviews, ChatGPT, and Perplexity — read and summarize web pages. They also look at images and their metadata. A page with clean image formats, descriptive alt text, and appropriate file sizes is easier for these systems to process and cite accurately.

This does not mean you should optimize specifically for AI. It means the same things that make a page fast and well-structured for human visitors also make it easier for AI tools to summarize correctly. Image optimization is a core part of that.

Two things matter most for AI citation:

• Alt text — a short, descriptive sentence that explains what the image shows. AI systems use this to understand the image's role on the page.
• Structured data — schema markup that tells AI systems what type of content the page contains and who wrote it.

8 When you don't need to optimize

Optimization is not always the right move. There are legitimate cases where you want to keep the original file untouched:

• Print or archival — keep the original untouched. Do not optimize files meant for high-resolution printing or long-term storage.
• Source files for future editing — keep the highest-quality original you have. Optimization is destructive for lossy compression.
• Legal or medical records — do not re-compress images that need to preserve every pixel exactly.
• Professional photography deliverables — deliver full-resolution files unless the client specifically asked for web-optimized copies.

The rule: optimize for the destination, keep originals for the source.

9 Common image optimization mistakes

These are the issues we see most often when people send us images that "still look too heavy" after optimization. Most of them take less than five minutes to fix.

10 Platform-specific settings

Different platforms have different defaults for image handling. Here is what works best on the four most common ones.

Keep reading