Measure the rendered size
Inspect the largest width an image occupies in your layout, then export near that width. Uploading a 3,000-pixel source for a 600-pixel card wastes bandwidth before compression even begins. Keep enough resolution for high-density screens without doubling every asset by default.
Compress by image type
Photographs generally suit WebP, AVIF or JPG. Logos and screenshots with transparency may need PNG or lossless WebP. Test an export rather than applying one format to every file.
Serve responsive variants
Create a few widths for important images and let the browser choose with `srcset` and `sizes`. A phone should not download the desktop hero image. Use a meaningful `sizes` value that matches the actual CSS layout.
Use loading strategically
Lazy-load images below the initial viewport, but let the main above-the-fold image load promptly. Always provide width and height, or an aspect ratio, so the browser reserves space and avoids layout shifts.
Performance habit: record the final dimensions and byte size for each published image. A small asset budget makes regressions easy to spot during review.
Do not forget delivery
A CDN, long-lived caching and immutable filenames can reduce repeat downloads. These optimizations complement compression; they do not make oversized source files free.
Use the resize tool to create display-sized exports, then compare them in the main optimizer.
Open the resize tool →