Image optimization: the complete guide
Images are the heaviest thing on most web pages. This guide covers every decision that matters — format, quality, dimensions, compression and delivery — with concrete numbers you can use today.
Why image optimization matters
The average web page now ships over 900 KB of images — more than HTML, CSS and JavaScript combined. On mobile networks that is the single largest cause of slow pages, high bounce rates and lost revenue. Google has confirmed page speed is a ranking factor, and Core Web Vitals metrics (LCP, INP, CLS) are directly affected by how you handle images.
The good news: images are also the easiest thing to fix. A well-optimized image pipeline typically cuts page weight by 40–70% with zero visible quality loss, because most images are exported with settings designed for print or editing, not for screens.
Step 1 — Choose the right format
Format choice dominates everything else. As a rule of thumb for 2026:
Use AVIF when you can — it produces the smallest files and is now supported by every major browser. Use WebP as the safe default: excellent compression, universal support, and it handles photographs, transparency and animation in one format. Use JPEG only for maximum compatibility (email, legacy CMS) and PNG only when you need pixel-perfect lossless quality or hard transparency.
A common mistake is treating "PNG" as the quality choice. PNG is lossless, but for photographs it is enormous — often 5–10× the size of an equivalent WebP at quality 80, with no visible difference on screen.
Step 2 — Set quality, not maximum quality
Quality 100 is almost never correct for the web. Photographs at quality 80 in WebP or AVIF are visually indistinguishable from the original for nearly all viewing conditions, and the file is half the size.
Practical settings that work for most sites: WebP quality 78–82 for hero and product photography, quality 70–75 for thumbnails and content images, AVIF quality 60–70 (AVIF's scale differs — it reaches equivalent quality at lower numbers than WebP or JPEG).
Step 3 — Resize for the viewport, not the source
Shipping a 4000×3000 pixel image to a 390-pixel-wide phone is the most common waste on the web. Your source dimensions only matter if someone will display them. Set a maximum dimension that matches the largest container the image will ever occupy — typically 1920px for full-width heroes, 1280px for content width, and far less for cards and thumbnails.
Then serve different sizes to different screens with the srcset and sizes attributes. This alone routinely saves 50% of mobile image bandwidth.
Step 4 — Compress losslessly and strip metadata
After format, quality and dimensions are set, a lossless re-optimization pass (OxiPNG for PNG, MozJPEG's trellis and progressive settings for JPEG) removes redundant data and EXIF metadata your visitors don't need. This is what ImageAlchemy does in its final pass.
Metadata alone — camera model, GPS coordinates, editing history — can account for several percent of file size. Stripping it is also a privacy win for your users.
Step 5 — Deliver correctly
Optimized files still need correct delivery: cache them long-term, lazy-load everything below the fold with loading="lazy", set explicit width and height to prevent layout shift, and serve AVIF/WebP with a JPEG/PNG fallback using the <picture> element.
Related guides
Compress your images now — free and private
Drop your files and ImageAlchemy compresses them in your browser. No uploads, no accounts, no limits. Batch process hundreds at once and download a ZIP.