Complete Guide to Image Optimization for the Web
Images · Published 2026-11-07 · Updated 2026-11-15 · 9 min read · By Tool Magic Lab Editorial Team
Table of contents
Images decide whether a page feels instant or sluggish, and they are the asset teams most often ship carelessly — straight from a camera or a design tool, at whatever size and format they happened to be. Optimization is a workflow, not a single slider. This guide covers the whole pipeline: dimensions, format, compression, metadata, delivery and description.
Step 1: Resize to the display size
The largest saving is almost always pixels you never show. If an image renders at 800 CSS pixels wide, serving a 3,200-pixel original wastes roughly sixteen times the data for zero visual benefit (retina screens justify up to 2× the display size, not 4×). Decide the largest size each image slot can render at, and generate exactly that — plus responsive variants (srcset) so phones do not download desktop-sized files. The Image Resizer (/image/image-resizer) does this in your browser, and the platform-specific resizers (YouTube, Instagram, Pinterest thumbnails) encode each network's current dimensions so you do not have to memorise them.
Step 2: Choose the format by content, not habit
Photographs: WebP or AVIF, with JPG as the compatibility fallback. Graphics with transparency or crisp lines: PNG, or WebP which also supports transparency. Logos and icons: SVG, which is resolution-independent and often a few kilobytes. Screenshots with text: PNG or lossless WebP — lossy compression smears text edges first. Our WebP vs PNG vs JPG guide goes deeper, including the compression figures from Google's format studies.
Step 3: Compress with your eyes, not a magic number
Lossy quality is a dial, not a virtue. For photographs, quality 75–85 in WebP/JPG is visually indistinguishable from the original in real layouts; below ~60, skies band and faces waxy. The honest workflow: compress, view at 100% in the actual slot, compare against the original, adjust. The Image Compressor (/image/image-compressor) shows before/after sizes and a live preview precisely so this judgement happens with evidence. Beware any tool that promises '90% smaller, no quality loss' as a blanket claim — for an already-optimized file, that is arithmetically impossible without visible damage.
Step 4: Strip metadata — selectively
EXIF data (camera model, GPS coordinates, timestamps) adds bytes and can leak location. For public web images, strip it: re-encoding through the Metadata Remover does this by rebuilding the file without the metadata blocks. Keep originals archived privately if the metadata matters for your records. One exception: photographers asserting rights may keep copyright fields deliberately — that is a choice, not an accident.
Step 5: Deliver properly
Set width and height attributes (or aspect-ratio in CSS) so layout does not shift while images load. Lazy-load below-the-fold images; give the single hero/LCP image priority loading instead. Serve through your framework's image pipeline where you can — Next.js, for example, generates sized AVIF/WebP variants on demand and caches them. Add long cache headers: images rarely change, and when they do, a new filename solves it.
Step 6: Describe every image
Alt text is part of optimization — for accessibility and for image search. Write what the image shows and why it is on the page ('Illustration of documents merging into a locked stack'), not a keyword list. Decorative images get empty alt (alt="") so screen readers skip them. File names matter too: 'webp-vs-png-comparison.webp' tells everyone — users, crawlers, future you — more than 'IMG_4021.webp'.
The workflow, condensed
- Resize to slot size (≤2× for retina).
- Convert: photo → WebP/AVIF, logo → SVG, screenshot → PNG/lossless.
- Compress at 75–85 and eyeball the result at full size.
- Strip EXIF for public images.
- Ship responsive variants, dimensions set, lazy below the fold, priority for the hero.
- Write real alt text and a descriptive filename.
Run that pipeline once and save it as your team's checklist — every image after that is minutes of routine instead of a recurring performance problem.
Written by the Tool Magic Lab Editorial Team. Tool Magic Lab content is produced with AI assistance and editorially reviewed for accuracy — see our AI Usage Disclosure and Editorial Policy.
