Website image optimization is not one compression setting. It is a delivery workflow: choose the right visual asset, match its dimensions to the layout, select a suitable format, compress it, and verify how the page loads.
Start with the rendered size
Measure the largest size at which the image appears. A card thumbnail, article illustration, and full-width hero have different requirements. Sending a 5,000-pixel camera file into a 600-pixel card wastes download bytes and decoding memory.
Responsive designs may need several widths. The browser can choose among srcset candidates rather than downloading one oversized file for every screen. High-density displays can justify a larger candidate, but that does not mean every image needs camera resolution.
Crop before compression
Remove pixels the layout will never show. Cropping can create a larger saving than codec tuning because the encoder has less content to describe. It also makes the focal point predictable on mobile.
Do not stretch to fit. Preserve aspect ratio or create deliberate crops for landscape and portrait placements.
Match format to content
Photographs generally favor lossy JPEG, WebP, or AVIF. Transparent graphics may use WebP, AVIF, or PNG. Screenshots with fine text may need lossless PNG or carefully tested WebP. A genuine vector logo is usually best kept as sanitized SVG.
Test actual output. A format that wins on one image may lose on another, and compatibility requirements can matter more than the last few kilobytes.
Compress with a visible target
Begin with a moderate-high quality setting. Compare important details at the display size. If output remains too large, reduce dimensions before choosing an extreme quality.
A target-size tool is useful when a platform has an upload ceiling, but web performance is better evaluated with layout and loading behavior than an arbitrary universal number. The right byte budget depends on visual importance, connection conditions, and how many other resources compete for the same page load.
Protect layout stability
Reserve width and height so the browser knows the image’s aspect ratio before it downloads. This reduces layout movement. Lazy-load images below the fold, but avoid lazy-loading the likely largest contentful image when that delays its request.
Do not replace an optimized image with a CSS background when the content needs alt text and responsive source selection. Use meaningful alternative text for informative images and empty alt text for purely decorative ones.
Remove unnecessary metadata
Delivery copies rarely need camera GPS, embedded thumbnails, editor history, or large comments. Removing common metadata can save bytes and reduce privacy exposure. Color profiles are different: removing one can change appearance, so compare the result.
Verify on the built page
After optimization, check:
- The image URL returns the intended format and cache policy.
- Dimensions match the layout.
- The browser is not downloading a larger responsive candidate than needed.
- The result remains sharp at common viewport sizes.
- Transparency and background color are correct.
- No private metadata remains in the published file.
- The page does not shift when the image loads.
The resize image tool can create suitable dimensions, while the image compressor compares source and output bytes locally. Use the optimized file in a real page test before declaring the work finished.
Put the guidance into practice
Use the image compressor, image converter, or metadata cleaner to test these choices locally with your own files.