CraigyBabyJ guide
How to reduce image file size without making it look broken
The best image optimization usually comes from doing the boring things in the right order: resize first, choose the right format, then compress while checking the preview.
Resize before compressing
A 4000 pixel photo shown in an 800 pixel content area wastes bandwidth. Reducing the pixel dimensions first normally saves more than lowering quality on an oversized file.
Pick a format that fits the image
Photos normally shrink well as JPG or WebP. Screenshots, logos and interface graphics often need PNG or a higher-quality WebP because text and sharp edges show damage quickly.
Compare the actual display size
Do not judge quality by zooming far past the size people will see. Check the compressed result at the size it appears on the page, then keep the smallest version that still looks clean.
Useful tools for this job
Use these tools when you are ready to try the workflow on your own files.