Large images are the most common cause of slow-loading web pages. A photograph uploaded straight from a camera or phone at full resolution can easily be 5–10MB. The same image, correctly sized and compressed for web use, should be under 200KB — a reduction of 95% or more with no visible quality difference at normal screen sizes. The gap between what most people upload and what they should upload is significant enough that image optimisation alone can meaningfully improve page load times.
Here's a practical approach to reducing image size without introducing noticeable quality loss.
Start with format
Switching to a modern format is the single highest-impact change you can make. For photographs and complex images, WebP produces files roughly 25–35% smaller than JPG at equivalent visual quality. AVIF goes further — typically 20–50% smaller than JPG — but has slightly narrower support across older software. Both formats are supported by all current major browsers.
For most web use, WebP is the right default. It's well-supported, produces genuinely smaller files than JPG, and handles transparency like PNG. If you want to push further on compression and your audience is primarily on modern browsers, AVIF is worth testing.
For images with transparency — logos, icons, interface elements — WebP supports transparent backgrounds, which means you don't need PNG for transparency and JPG for photographs. WebP handles both.
Resize to display dimensions
A 4000×3000px image displayed in an 800px-wide column sends five times more pixels than the browser uses. The browser downloads the full image and scales it down, which wastes bandwidth and slows loading without improving appearance. Resizing to the actual display dimensions before uploading is essential and often reduces file size more than compression alone.
Check the maximum width images appear on your site — typically 800–1200px for blog content, larger for hero images — and resize originals to that width before uploading. Portimg's resize tool handles this in the browser without any software.
Compress after resizing
Once the image is the right dimensions and format, compression reduces file size further by encoding the pixel data more efficiently. Most tools offer a quality setting — higher quality means larger files, lower quality means smaller files with increasingly visible artefacts.
For photographs in WebP or JPG, quality settings around 75–85% are generally indistinguishable from the original at normal viewing sizes. Going to 100% quality produces much larger files for no visible improvement. Going below 70% starts to introduce visible compression artefacts, particularly in areas with fine detail.
Portimg's image converter handles both format conversion and compression in one step. For standalone PDF compression, the PDF compressor handles that separately.
Serving multiple formats with the picture element
If you want to serve AVIF where supported and fall back to WebP or JPG for older browsers, the HTML <picture> element handles this without any server configuration:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description of the image">
</picture>Browsers pick the first format they support. This requires exporting three versions of each image, which adds overhead — for most sites, WebP alone is a better tradeoff than maintaining three versions per image for marginal additional gains.
For higher-volume sites
If you're running a content-heavy site with many images, manual conversion doesn't scale. A few options worth knowing:
CDNs with image optimisation features — Cloudflare and Bunny.net both offer this — can automatically convert and compress images on delivery without changing your upload workflow. You upload originals and the CDN serves the optimised version.
WordPress plugins like ShortPixel and Imagify compress images automatically on upload, with options to convert to WebP. These handle the optimisation step without requiring manual processing for each image.
Google's Lighthouse tool (built into Chrome DevTools) audits a page and flags images that are oversized or in suboptimal formats, with specific file size savings estimates. It's a useful way to identify which images on an existing site are causing the most performance impact.
The order matters
Resize first, then convert format, then compress. Compressing before resizing applies compression at the wrong dimensions — you end up with a large, compressed file that the browser then scales down, which is worse than compressing the correctly-sized image. The sequence resize → convert → compress produces the smallest files with the least quality loss at each step.