Image optimisation for the web
Choosing a format, sizing for the layout, and compressing without visible damage—an order of operations that saves the most bytes.
Most oversized images are not a compression problem. They are a dimensions problem: a 4000-pixel photo displayed in a 600-pixel column carries roughly forty times the pixels it needs, and no encoder setting recovers that waste.
Order of operations
Crop for composition first, resize to the largest dimension you actually display, then choose a format and compress. Resizing after cropping avoids scaling pixels you were about to discard, and compressing last means the encoder works on the final pixel count.
Format by content type
Photographs belong in WebP where you control delivery, or JPEG when the file must open anywhere. Screenshots, diagrams, and anything with text or transparency belong in PNG, or WebP's lossless mode. Icons and logos belong in SVG, which stays sharp at any size.
Compression without visible damage
Lossy encoders discard detail the eye rarely notices, but each re-save compounds the loss. Keep a lossless master and export delivery copies from it, and compare quality settings on your actual images rather than trusting a default.
Do not forget the markup
Serving the right file still needs width and height attributes to prevent layout shift, responsive sources for different viewports, and lazy loading below the fold.
Optimise locally
Shrink files with Image Compressor, fit dimensions with Image Resizer, switch formats with Image Format Converter, and compare encodings in WebP vs JPEG.
Try related tools
Keep exploring
- learnHow to use Image CompressorCompress images locally with quality and size controls. A practical guide to Image Compressor: when it fits, how to get a reliable result, and the mistakes worth avoiding.
- learnGetting started with Image ResizerResize images by size or percent, locally. A practical guide to Image Resizer: when it fits, how to get a reliable result, and the mistakes worth avoiding.
- collectionImage ToolkitCompress, resize, crop, and convert images locally, plus QR generation and safe SVG preview—no uploads.
- comparePNG vs JPEGLossless PNG versus lossy JPEG—compare transparency, artefacts, and file size for photos, screenshots, and UI assets.
- compareWebP vs JPEGModern WebP encoding versus classic JPEG—compare file size, quality, transparency, and fallback requirements.
- compareSVG vs PNGVector markup versus raster pixels—compare scaling, file size, and safety for icons, logos, and illustrations.
- compareQR Code PNG vs SVGRaster versus vector QR output—compare print scaling, file size, and scan reliability for codes you generate.