If your website feels slow, the culprit is very often the images. A single photo straight from a phone or camera can weigh 3–8 MB — more than the rest of the page combined. Visitors on mobile data wait, search engines notice, and people leave.
The good news is that image optimisation is one of the easiest performance wins available. With the right dimensions, format and quality setting, most images can lose 70–90% of their weight with no difference anyone will notice.
Why image size matters
Loading speed. Images commonly make up the largest share of a page's total download size. Halving image weight can noticeably speed up the whole page, especially on mobile connections.
Core Web Vitals. Google's page-experience signals include Largest Contentful Paint (LCP) — how long it takes for the main content, frequently a hero image, to appear. Google considers an LCP of 2.5 seconds or less good. A multi-megabyte hero image makes that very hard to hit.
Bandwidth and hosting costs. Smaller images mean less data served — cheaper hosting and a lighter footprint for visitors on limited data plans.
Step 1: Resize to the size you actually display
This is the single biggest saving, and the step people most often skip.
A modern phone photo is around 4,000 × 3,000 pixels. If your blog's content column is 800 pixels wide, the browser downloads twelve million pixels and then throws most of them away.
Rule of thumb: export images at about twice the largest size they will be displayed to stay sharp on high-density (retina) screens — and no larger.
| Where the image appears | Suggested width |
|---|---|
| Full-width hero banner | 1,920–2,400 px |
| Blog or article content image | 1,200–1,600 px |
| Half-width image or card | 800–1,000 px |
| Thumbnail | 300–600 px |
Use Resize Image to set an exact width (height adjusts automatically to keep the proportions), scale by percentage, or pick a ready-made preset.
Step 2: Choose an efficient format
- WebP should be your default for websites. It is supported by all modern browsers and produces noticeably smaller files than JPG or PNG at the same visual quality.
- JPG is a safe fallback for photos if your platform doesn't accept WebP.
- PNG only for graphics that genuinely need lossless quality, such as logos with fine detail — and consider WebP's lossless mode instead.
- SVG for logos and icons where possible, as vector graphics stay sharp at any size and are often tiny.
Converting existing images is quick with JPG to WebP and PNG to WebP. For a fuller comparison of the formats, see JPG vs PNG vs WebP.
Step 3: Pick the right quality setting
Lossy formats let you trade quality for size. The relationship isn't linear: dropping from 100% to around 80% quality typically shrinks a photo dramatically while looking almost identical, but going much below 60% starts to show blockiness and smudged detail.
Good starting points:
- Photos: 70–82% quality.
- Hero images where detail matters: 80–85%.
- Thumbnails: 60–70% — they are small enough that artefacts are hard to see.
Compress Image offers presets (Recommended is a sensible default), a custom quality slider, and the option to output WebP automatically. It shows the before and after size for each image, so you can see exactly what you saved. You can compress a whole batch at once and download the results as a ZIP — and since everything runs in your browser, nothing is uploaded.
Step 4: Check the result
Always open the compressed image at 100% zoom and look at the areas where artefacts show up first:
- Smooth gradients such as skies (look for banding).
- Fine text or thin lines (look for fuzziness).
- Faces and skin tones.
If something looks off, raise the quality by 5–10 points and compress again from the original, not from the already-compressed file.
A worked example
A typical phone photo used as a blog header:
| Stage | Dimensions | Format | Approx. size |
|---|---|---|---|
| Original | 4,032 × 3,024 | JPG | ~4.5 MB |
| Resized | 1,600 × 1,200 | JPG | ~700 KB |
| Converted and compressed | 1,600 × 1,200 | WebP, 78% | ~150–200 KB |
The exact numbers vary with the content of the photo, but a 95%+ reduction with no visible difference on screen is completely normal.
Beyond compression: delivery tips
Once your images are lean, a few website-level practices help them load even faster:
- Lazy-load below-the-fold images (
loading="lazy") so they download only when a visitor scrolls near them. Don't lazy-load the main hero image — it should load immediately. - Always set width and height attributes so the browser reserves space and the page doesn't jump around while loading (this improves Cumulative Layout Shift).
- Serve responsive sizes with
srcset, so phones download smaller versions than desktops. Many CMS platforms and frameworks do this automatically. - Strip unnecessary metadata. Camera information and GPS coordinates add bytes and can reveal more than you intend.
Common mistakes
- Relying on the CMS to fix it. Some platforms resize images, but many still serve the original upload somewhere. Optimise before you upload.
- Using PNG for photos. It can be five to ten times bigger than an equivalent WebP or JPG.
- Compressing the same file repeatedly. Every lossy save adds artefacts. Keep originals and always export from them.
- Forgetting old content. Your oldest posts may hold the heaviest images. Audit them once in a while.
Frequently asked questions
Will compressing images hurt my SEO?
The opposite. Faster pages provide a better experience, and page experience is part of how search engines evaluate sites. Just keep using descriptive file names and alt text.
What's a good target file size?
As a guideline, try to keep content images under about 200 KB and hero images under about 300–400 KB. Thumbnails can often be under 50 KB.
Should I use AVIF?
AVIF can be even smaller than WebP and is supported by current browsers. If your platform supports serving it with a fallback, it's worth trying. WebP remains the simplest broadly compatible choice.
Summary
Resize to the display size, switch to WebP, compress to around 75–80% quality, and check the result. Those four steps take a minute per image, often cut page weight dramatically, and are among the most effective things you can do for your site's speed.