Optimize Images for the Web: The Complete Guide

Images are, by median, about half the bytes a web page ships — and the largest image is very often the LCP element Google times your page by. Cut a hero image from 2 MB to 150 KB and you can move Largest Contentful Paint by a full second on mobile; no JavaScript refactor delivers that cheaply. The good news: image optimization is a short, ordered checklist, and every step runs free in your browser. Do the steps in this order — each one compounds the next.

1. Resize first (the biggest win)

A 4000×3000 photo from a phone camera displayed in an 800-pixel-wide content column wastes over 90% of its pixels — the browser downloads all of them, then throws most away. Before touching formats or quality sliders, scale the image to roughly the largest size it will be displayed at (up to 2× for high-DPI screens: an 800px slot warrants a 1600px image, not 4000px). The Image Resizer does this in-browser with no upload. Resizing routinely cuts file size 80–90% on its own, which is why it comes first: compressing an image you should have resized is polishing wasted pixels.

2. Pick the right format

Format choice is the second multiplier. The short version: photos compress far better as JPG than PNG (PNG vs JPG covers why), and modern formats beat both — WebP is typically 25–35% smaller than an equivalent JPG (WebP vs JPG has the numbers), while AVIF often halves the JPG size at similar quality.

• Convert photos and screenshots with Image to WebP — WebP is supported by every current browser and is the safe modern default.
• Squeeze further with Image to AVIF for hero images and photo-heavy pages, where its savings matter most.
• Stuck with legacy requirements (old email clients, CMS restrictions)? At minimum convert photographic PNGs with PNG to JPG — a photo saved as PNG is frequently 5–10× larger than it needs to be.

Keep PNG only for what it's good at: graphics with sharp edges, text, and transparency.

3. Compress

With size and format right, quality settings take the last big slice. The Image Compressor lets you drop quality while previewing the result; for photos, quality around 75–80 is usually visually indistinguishable from 100 at half the bytes. Compress once, from the best source you have — recompressing an already-compressed JPG stacks artifacts. If you're processing a whole folder, the Bulk Image Converter handles batches in one pass.

4. Strip metadata

Camera photos carry EXIF data — capture time, device model, and often GPS coordinates of where the shot was taken. That's both wasted bytes and a privacy leak when the photo goes on a public site. Check what a file is carrying with the Image Metadata Viewer, then strip it with the EXIF Remover; How to View and Remove EXIF Data walks through both. Note that some converters strip EXIF as a side effect — verify rather than assume.

5. Favicons & extras

The small stuff still shows up in audits. Generate a complete favicon set — ICO, PNG sizes, apple-touch-icon — from one image with the Favicon Generator (full guide). A missing favicon means a 404 on every page load; an unoptimized 1 MB apple-touch-icon is a classic silent tax.

Common mistakes

• Upscaling. Enlarging a small image adds bytes and blur, never detail. If the source is 600px, redesign for 600px or find a bigger source.
• Compressing twice. Each lossy save stacks artifacts on the last. Keep an original and always export from it — don't re-compress yesterday's output.
• PNG for photographs. The single most common weight mistake on the web. PNG is lossless and huge for photos; it's for graphics and transparency.
• Shipping AVIF with no fallback. Serve AVIF via the <picture> element with WebP or JPG sources behind it, so older browsers and image proxies still render something.
• Optimizing images the page never shows. Audit first: lazy-load below-the-fold images and delete unused ones — the cheapest image is the one you don't send.