Images are almost always the heaviest thing on a web page. On a typical site they account for more bytes than HTML, CSS, JavaScript, and fonts combined. That makes image optimisation the single highest-leverage performance task most teams can tackle. This guide covers the full picture: choosing dimensions, picking formats, compressing intelligently, stripping waste, and serving images so they help rather than hurt your loading speed.
We will lean on the optimise JPEG tool for the compression steps, but the principles apply to every format you ship.
Right-Size Before You Compress
The biggest mistake in image optimisation is shipping pixels nobody sees. A photo displayed in an 800px-wide column does not need to be 4000px wide. Because file size scales roughly with the number of pixels, halving the width and height cuts the data by about three quarters before you change a single compression setting. No encoder trick comes close to that.
Decide the maximum display size for each image, account for high-density screens by allowing up to twice that width, and resize accordingly with the resize image tool. The rule never changes: resize first, compress second.
Choose the Right Format
Format choice matters as much as compression. Match the format to the content:
- JPEG: Photographs and continuous-tone images. Excellent compression for complex, varied colour.
- PNG: Logos, line art, screenshots, and anything needing transparency or razor-sharp edges.
- WebP: A modern format that beats both for most images, typically 25 to 35 percent smaller than JPEG at equal quality.
- SVG: Icons and simple vector graphics that must scale crisply at any size.
For photographs, the practical question is JPEG versus WebP. Our JPEG versus WebP comparison covers the trade-offs in detail, and the JPEG to WebP tool converts in a click so you can measure the saving yourself.
Compress Intelligently
Once an image is the right size and format, compress it. For JPEG, that means choosing a sensible quality factor, optimising the Huffman tables, and stripping metadata. The quality factor is non-linear, so exporting at 100 wastes huge amounts of data for no visible benefit; quality 80 to 85 is the practical sweet spot. For a refresher on the quality scale and step-by-step settings, see how to optimise JPEG.
The fastest route for a single file is the compress JPEG tool; for full control over quality, metadata, and progressive layout, use the optimise JPEG tool.
A Repeatable Workflow
To keep results consistent across a whole site, follow the same steps every time:
- Audit. Find your heaviest images — usually hero photos, backgrounds, and product shots.
- Resize. Cap each image at the largest size it is actually displayed, times your density factor.
- Pick a format. JPEG or WebP for photos, PNG or SVG for graphics.
- Compress. Quality around 80 for JPEG, plus Huffman optimisation and progressive layout.
- Strip metadata. Remove EXIF and thumbnails to shave extra bytes and protect privacy.
- Serve responsively. Use srcset and sizes so each device downloads an appropriately sized file.
- Lazy-load. Defer off-screen images so they do not block the initial render.
Serving: The Often-Forgotten Half
Optimised files still need to be delivered well, and delivery is where many otherwise careful teams lose their gains. Three techniques matter most:
- Responsive images with srcset let the browser pick the right resolution for each screen, so a phone never downloads a desktop-sized file.
- Lazy loading with the native loading attribute prevents off-screen images from competing for bandwidth during the critical first render.
- Caching and a CDN keep repeat visits instant and move bytes physically closer to your users.
Measuring the Impact
Image weight directly affects Largest Contentful Paint, one of Google's Core Web Vitals, because the LCP element is frequently a hero image. Shaving a hero from 600 KB to 120 KB can move your LCP from failing to passing on a mobile connection. Our guide to images and Core Web Vitals explains how to measure and improve those metrics with confidence.
Scaling Beyond Manual Work
Doing this by hand for a handful of images is fine. For a real site with hundreds of assets, bake optimisation into your build or upload pipeline so it happens automatically and nobody has to remember. Our walkthrough on how to automate image optimisation shows how to wire it into common stacks, from static-site builds to CMS uploads.
Handling High-Density and Retina Screens
Modern phones and laptops pack two or three physical pixels into each CSS pixel, so an image that looks crisp on an old monitor can look soft on a retina display. The solution is not to ship everything at maximum resolution, which would waste bandwidth on standard screens, but to provide multiple resolutions and let the browser choose.
With the srcset attribute you supply, say, a 1x and a 2x version of each image, plus the sizes attribute describing how wide the image renders at different breakpoints. A high-density phone then downloads the 2x file, while a standard laptop downloads the 1x, and neither wastes data. Generate these variants by resizing the same master with the resize image tool, then compressing each one. The extra files cost a little build time but pay off in both sharpness and speed.
Common Pitfalls That Inflate Page Weight
Even careful teams fall into a handful of traps that quietly bloat pages. Watch for these:
- CSS-scaled images: Loading a 2000px image and shrinking it with CSS to 400px wastes three-quarters of the bytes. Resize the source instead.
- Wrong format for the content: Saving a flat logo as a JPEG produces ringing and a larger file than PNG; saving a photo as PNG produces an enormous file. Match the format to the content.
- Forgotten background images: CSS background images escape many audits but still download. Optimise them too.
- Quality cranked to 100: The non-linear quality scale means 100 can double the size of a quality-85 file for no visible gain.
Auditing for these is usually the fastest way to find easy wins on an existing site, and most can be fixed by re-exporting through the optimise JPEG tool with sane settings.
Setting and Enforcing a Performance Budget
Optimisation tends to drift over time as new content is added by people who were not part of the original effort. The antidote is a performance budget: an explicit limit on how heavy a page, or an individual image, is allowed to be. A common starting point is to cap hero images at a couple of hundred kilobytes and total image weight per page at a figure your slowest target connection can load comfortably.
A budget only works if something enforces it. Add an automated check that flags any image exceeding the limit before it ships, and review the budget periodically as your audience's devices and connections evolve. Treating image weight as a first-class constraint, rather than an afterthought, is what keeps a site fast months and years after the initial optimisation work is done.
Conclusion
Optimising images for the web is a chain: right-size the pixels, choose the right format, compress at quality 80-ish, strip metadata, and serve responsively with lazy loading and a CDN. Each link compounds with the last. Start with your heaviest photos in the optimise JPEG tool at jpegoptim and watch your page weight fall.