How to Compress Images for the Web (Step-by-Step)
Optimise every image type for maximum page speed with minimum quality loss. This guide covers resize, format, quality, and WebP conversion.
- Difficulty
- Beginner
- Time
- 10 min
Last updated
FixFile.online Team
The FixFile.online editorial team — file format specialists, developers, and technical writers focused on practical file-fixing solutions.
How to Compress Images for the Web
Unoptimised images are the most common cause of slow websites. This guide shows you the exact steps to reduce image file size by 70–95% with no visible quality change.
Advertisement
Why Image Compression Matters for SEO
Google measures Largest Contentful Paint (LCP) — the time until the main image on a page loads. LCP is a direct search ranking factor.
- LCP under 2.5 seconds: Good
- LCP 2.5–4 seconds: Needs Improvement
- LCP over 4 seconds: Poor (hurts rankings)
A single unoptimised hero image (5 MB PNG) can push LCP above 6 seconds on mobile. The same image optimised to 150 KB WebP loads in under 0.5 seconds.
Step 1: Identify Your Target Display Size
Before compressing, know the exact pixel dimensions the image will display at. Storing more pixels than the display uses is pure waste.
How to find display dimensions:
- In Chrome: right-click the image on your page → Inspect → look for the
<img>element → check the rendered width in the Styles panel - In your CMS: look for "image display size" or "thumbnail dimensions" in the template settings
Common web display sizes:
| Location | Typical Display Width |
|---|---|
| Full-width hero | 1920px (1440px effective) |
| Blog content image | 800–1200px |
| Card thumbnail | 400–600px |
| Product image | 600–800px |
| Avatar / profile | 64–128px |
Step 2: Resize to 2× Display Width (Retina Support)
Upload at 2× the display width to look sharp on Retina/HiDPI screens.
For an 800px blog image: upload at 1600px wide.
- Open Resize Image
- Set width to your target (e.g., 1600)
- Enable Lock Aspect Ratio
- Download
Step 3: Choose the Right Format
| Image Content | Format |
|---|---|
| Photograph | WebP (or JPG fallback) |
| Logo with transparent background | WebP or PNG |
| Screenshot with text | PNG |
| Logo/icon (vector) | SVG |
| Animation | WebP |
Step 4: Compress at Quality 80–85
- Open Compress Image
- Upload your resized image
- Quality: 80–85 for photographs, 85–90 for graphics with fine detail
- Download
Step 5: Convert to WebP
- Open WebP Converter
- Upload your compressed JPG or PNG
- Download the WebP
WebP is 25–34% smaller than JPG at the same quality. For a site with 50 images, this saves several MB per page load.
In your HTML:
<picture>
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image" width="1600" height="900" loading="lazy">
</picture>
Expected Reductions
| Original | After Optimisation | Saving |
|---|---|---|
| 8 MB iPhone photo (PNG) | 180 KB WebP | −97.8% |
| 3 MB iPhone photo (JPG) | 130 KB WebP | −95.7% |
| 500 KB PNG logo | 40 KB PNG (lossless opt) | −92% |
| 2 MB screenshot | 120 KB PNG | −94% |
Checklist: Before Publishing Any Image
- Width matches 2× display size
- Format correct (WebP for photos, PNG for logos with transparency, SVG for icons)
- Quality set to 80–85 for photos
- width and height attributes set on
<img>tags - loading="lazy" on all below-the-fold images
Frequently asked questions
Resize to 2× the display size for retina sharpness, compress to quality 80–85, and convert to WebP format. For a full-width hero on a 1440px desktop: 2880px wide WebP at quality 80. For a 800px blog image: 1600px wide WebP at quality 85.
At quality 80–85, the difference between compressed and uncompressed is imperceptible to human eyes on a normal screen. The data discarded is below the human visual threshold. Only at quality below 60–70 do artefacts become clearly visible.
Run your URL through Google PageSpeed Insights (pagespeed.web.dev). It explicitly flags "Serve images in next-gen formats," "Properly size images," and "Efficiently encode images" if any images need optimisation, with specific byte savings for each issue.
Learn more
- What Is HEIC and Should You Convert It to JPEG?
HEIC is the photo format iPhones use by default. It is technically superior to JPEG but has compatibility problems on Windows and older apps.
- Best Image Format for Print (TIFF, PSD, JPEG, or PNG?)
Sending the wrong image format to a printer causes blurry, colour-shifted, or rejected files. Here is exactly which format to use and why.
- How to Convert Multiple Images at Once (Batch Conversion Guide)
Converting one image at a time is practical for occasional tasks. When you have dozens or hundreds of images to convert, you need a batch workflow. This guide covers the most efficient approaches.
- What Is WebP? Why Google Created It and When to Use It
WebP is Google's open-source image format that outperforms both JPG and PNG. This guide explains how it works, why it matters for web performance, and where it falls short.
- JPG vs PNG vs WebP: Which Image Format Should You Choose?
The three dominant image formats each have a specific purpose. Choosing the wrong one either wastes storage or permanently destroys quality. This guide tells you exactly which to use and when.