How to Compress Images for Web Without Losing Quality

Why Image Size Matters for SEO and Performance

Google officially uses page speed as a ranking factor, and in 2021 it introduced Core Web Vitals — a set of measurable performance metrics that directly influence search rankings. Images are central to two of these metrics:

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element on the page to fully render. In most cases, this is a hero image or a large product photo. Google's threshold is 2.5 seconds for a "Good" LCP score. A 2MB uncompressed hero image on a mobile connection can easily push LCP to 5 seconds or more, directly hurting your ranking.

Compressing your LCP image to under 150–200KB is often the single highest-impact optimisation you can make to improve Core Web Vitals.

Cumulative Layout Shift (CLS)

Images without explicit width and height attributes cause layout shifts as they load — the page jumps and reflows when the browser discovers how large the image is. Always include width and height attributes on <img> elements to prevent this.

Business Impact

Beyond SEO, page speed directly affects conversion rates and bounce rates. Research on web performance consistently shows that pages taking over 3 seconds to load lose a significant portion of visitors — particularly on mobile. E-commerce sites see measurable conversion rate improvements for every 100ms improvement in page load time.

Lossy vs Lossless Compression Explained

Lossy Compression

Lossy compression permanently removes image data to reduce file size. The removed data is chosen by the compression algorithm to be the information least perceptible to human vision — typically fine detail in areas of uniform colour, and subtle colour variations in complex regions.

JPEG uses lossy compression based on Discrete Cosine Transform (DCT). At quality settings of 75–85%, JPEG images are typically 3–10× smaller than the uncompressed original with no perceptible quality difference to most viewers. WebP's lossy mode offers similar quality at 25–35% smaller files than JPEG at the same quality setting.

The key with lossy compression is to find the "sweet spot" — the quality level at which further reduction starts to produce visible artefacts (blocking, colour smearing, loss of sharpness). For most web photographs, this is around quality 75–85 in JPEG terms.

Lossless Compression

Lossless compression reduces file size without removing any image data. The original image can be perfectly reconstructed from the compressed file. PNG uses lossless compression (DEFLATE algorithm), as does GIF. Lossless WebP is also available.

Lossless compression is appropriate for:

• Images with text, logos, or sharp geometric edges (where JPEG artefacts would be very visible)
• Images that need transparency
• Source files that will be re-edited and re-exported multiple times (to avoid accumulating lossy compression artefacts)

Lossless formats typically produce larger files than lossy for photographs, but the same or smaller files for graphics with large areas of solid colour.

Choosing the Right Format for Web Images

Use Case	Recommended Format	Reason
Photographs, hero images	WebP (JPEG fallback)	Best size/quality ratio; JPEG for older browser support
Logos, icons (with transparency)	SVG or WebP/PNG	SVG scales perfectly; WebP/PNG for transparency
Screenshots with text	PNG or lossless WebP	Lossless preserves sharp text edges
Product thumbnails	WebP or JPEG	Good size savings; JPEG at 80–85% quality
Animated images	WebP (animated) or video	Animated WebP is smaller than GIF; video is best for longer clips
Background textures	JPEG or WebP	Subtle texture detail tolerates lossy compression well

Optimal Image Dimensions for Web

One of the most common image optimisation mistakes is uploading an image at a much larger resolution than it will ever be displayed at. An image uploaded at 5000×3000px and displayed at 800×480px is wasting bandwidth on pixels the user will never see.

As a starting framework for common web image sizes:

• Full-width hero images: 1200–1920px wide (depending on max layout width)
• Blog content images: 800–1200px wide
• Product thumbnails: 400–600px
• Profile/avatar images: 200–400px
• Open Graph / social sharing images: 1200×630px

For responsive sites, also implement the HTML srcset attribute to serve different-sized images to different viewport widths. This ensures mobile users (with smaller screens and often slower connections) receive smaller images than desktop users. The MDN guide on responsive images covers srcset implementation in detail.

Lazy Loading

Add loading="lazy" to all images that appear below the initial viewport. This defers their loading until the user scrolls near them, dramatically improving initial page load time. Your LCP element (above the fold) should not be lazy-loaded — it must load immediately. All below-the-fold images benefit from lazy loading.

Practical Steps: Compressing Images for Web

A simple workflow for every image you add to your website:

1. Resize to the correct dimensions — Use the ToolMasta Image Resizer to scale the image to the maximum width at which it will be displayed.
2. Choose the right format — WebP for photographs and most graphics; PNG for transparency; SVG for logos. See our PNG vs JPG vs WebP comparison for detailed guidance.
3. Compress — Use the ToolMasta Image Compressor to compress at the appropriate quality level (typically 75–85 for photographs). Aim for files under 100KB for standard content images, under 200KB for hero images.
4. Add width/height attributes — Include explicit pixel dimensions in your HTML img tag to prevent layout shifts.
5. Add lazy loading — Apply loading="lazy" to below-the-fold images.
6. Add meaningful alt text — Not directly a performance issue, but important for SEO and accessibility.

Looking for alternatives to popular compression tools? Our article on the best free TinyPNG alternatives compares options including tools with no daily upload limits.