Images are usually the heaviest thing on a page, so learning to compress images for web is one of the fastest ways to speed up your site, improve Core Web Vitals and hold on to visitors who would otherwise leave a slow page. The goal is not just smaller files, it is smaller files that still look sharp. This guide walks through the formats, dimensions and compression settings that get you there, plus a free tool to do it in seconds.
Why image size matters for SEO
Google uses page experience signals, including Largest Contentful Paint (LCP), as a ranking input, and the LCP element is very often a large image. A 2 MB hero image can single-handedly push LCP past the 2.5-second threshold Google considers good. Heavy images also cost real money in bandwidth and hurt conversion, mobile users on slower connections are the first to bounce. Shrinking images is the rare optimisation that helps rankings, users and hosting bills at once.
Pick the right format first
Compression starts with choosing the correct format, because the wrong one wastes bytes before you even touch quality settings:
| Format | Best for | Notes |
|---|---|---|
| WebP | Almost everything | 25 to 35 percent smaller than JPG or PNG at similar quality, supported by all modern browsers |
| JPG | Photos, complex images | Great compression for photographs, no transparency |
| PNG | Logos, icons, transparency | Lossless, larger files, only use when you need sharp edges or transparency |
| SVG | Logos, simple graphics | Vector, tiny and infinitely scalable, not for photos |
For most website photos, converting to WebP is the single biggest win. If you need a fallback for very old browsers, keep a JPG version too.
Resize before you compress
The most common mistake is uploading a 4000-pixel-wide photo straight from a camera or phone and letting the browser scale it down with CSS. The browser still downloads every one of those pixels. Resize the image to the largest size it will ever display, a full-width hero rarely needs to be wider than 1600 to 2000 pixels, and a blog thumbnail might only need 600. Resizing to the real display dimensions often cuts the file size more than compression itself.
Choose a sensible compression level
Lossy formats like JPG and WebP let you trade quality for size on a scale. In practice, a quality setting around 75 to 85 percent is the sweet spot: the file gets dramatically smaller while the difference is invisible to the human eye. Below about 60 percent you start to see blocky artefacts and blurring, especially around text and sharp edges. Always eyeball the result rather than trusting a number, some images tolerate heavier compression than others.
Compress images in your browser, free
You do not need Photoshop or a paid service. Our free image compressor runs entirely in your browser, nothing is uploaded to a server, so you can drop in a JPG, PNG or WebP, drag the quality slider, and watch the file size and preview update live before you download the smaller version. If you also need to change dimensions or switch formats, the image resizer and image format converter handle those the same way.
A simple workflow that always works
Put the steps together and you have a repeatable process for every image you publish:
- Resize the image to the maximum dimensions it will actually display at.
- Convert it to WebP unless you specifically need PNG transparency.
- Compress to around 80 percent quality and check the preview looks clean.
- Add descriptive, keyword-relevant alt text when you place it on the page.
- Serve responsive sizes with the
srcsetattribute so mobile devices get smaller files.
Automate it so you never forget
Manual compression works, but the images that slip through are usually the ones someone uploaded in a hurry. Build compression into your process so it happens by default. On WordPress, an image optimisation plugin can compress and convert to WebP automatically on upload. On a modern hosting or CDN setup, image services can resize and re-encode on the fly based on the visitor’s device and browser. If you run a build step, image tooling can process a whole folder at deploy time. The principle is the same everywhere: make the optimised version the path of least resistance, so no one has to remember to do it. For one-off images, or to spot-check what a plugin produced, keep a browser-based compressor bookmarked, it takes ten seconds and confirms the file is as small as it should be.
Common mistakes to avoid
A few habits quietly undo your work. Do not compress the same JPG repeatedly, each pass loses quality permanently. Do not use PNG for photographs, the files will be several times larger than a JPG for no benefit. Do not forget alt text, it is both an accessibility requirement and a small SEO signal. And do not rely on the CMS to optimise for you, most upload originals untouched unless you install a plugin or compress first.
The takeaway
Fast-loading images come down to three decisions: the right format (usually WebP), the right dimensions (the real display size), and a sensible compression level (around 80 percent). Get those right and you will routinely cut image weight by 60 to 80 percent with no visible loss, which flows straight through to faster pages, better Core Web Vitals and a smoother experience for every visitor. Run your next image through the image compressor and see the saving for yourself, then browse the rest of our free SEO tools.