How to Compress Images for the Web Without Losing Quality

Images typically account for the largest portion of a web page's total size. Unoptimized images slow down your site, hurt your search rankings, and frustrate visitors — especially on mobile. The good news is that you can dramatically reduce image file sizes while keeping them visually identical to the originals.

Why Image Optimization Matters

SEO and Search Rankings

Google has made page speed a ranking factor since 2018, and with the introduction of Core Web Vitals, it matters even more. Largest Contentful Paint (LCP) — one of the three Core Web Vitals — directly measures how quickly the largest visible element loads. Since that element is often an image, optimizing your images is one of the highest-impact SEO improvements you can make.

User Experience

Studies consistently show that users abandon pages that take more than three seconds to load. On mobile connections, a single uncompressed 5MB hero image can add several seconds to load time. Compressing that image to 200KB makes it load 25 times faster.

Bandwidth and Hosting Costs

Smaller images mean less bandwidth consumed, which translates to lower hosting costs. For high-traffic sites, the savings from image optimization alone can be significant.

Image Formats Compared

JPG (JPEG)

Best for photographs and complex images with many colors and gradients. JPG uses lossy compression, which means it permanently removes some image data to achieve smaller file sizes. At quality settings of 80-90%, the visual difference is negligible for most photography.

PNG

Ideal for graphics, logos, icons, and any image with text, sharp edges, or transparency. PNG uses lossless compression, preserving every pixel exactly. The tradeoff is larger file sizes compared to JPG for photographic content.

WebP

A modern format that supports both lossy and lossless compression, as well as transparency. WebP typically produces files 25-35% smaller than JPG and 25% smaller than PNG at equivalent visual quality. With universal browser support in 2026, WebP is now the recommended format for most web images.

Lossy vs Lossless Compression

Understanding the difference between these two approaches is key to choosing the right settings:

Lossy compression permanently discards data that the algorithm considers least visible to the human eye. This achieves much smaller file sizes but cannot be undone. Each time you re-save a lossy image, quality degrades further.
Lossless compression reduces file size without removing any image data. The original can be perfectly reconstructed. The size reduction is smaller (typically 10-30%) but quality is preserved exactly.

For web use, lossy compression at moderate quality settings (75-90%) is almost always the right choice for photographs. For graphics and icons, lossless PNG or lossless WebP preserves crisp edges.

Ideal File Sizes for the Web

While there are no absolute rules, these guidelines help you target the right file sizes:

Hero images / banners — aim for 100-300KB. These are large and visible, so quality matters, but keep them under 300KB.
Content images — aim for 50-150KB. Blog post images, product photos in articles, and similar mid-size images.
Thumbnails — aim for 10-30KB. Small preview images should be aggressively optimized.
Icons and logos — aim for 5-20KB. Use SVG when possible; otherwise, use optimized PNG.

Practical Workflow Tips

Always start from the highest quality source. Never compress an already-compressed image — this compounds quality loss. Start from the original or the highest-resolution version available.
Resize before compressing. There is no point serving a 4000x3000 image if it displays at 800x600. Resize to the display dimensions (or 2x for retina) before applying compression.
Use the right format for the content. Photos should be JPG or WebP. Graphics with flat colors, text, or transparency should be PNG or SVG.
Test at different quality levels. Start at quality 85 and compare. If the result looks identical to the original, try going lower. If you notice artifacts, increase slightly.
Batch process when possible. If you have many images, use a tool that supports batch optimization to save time.

What About Next-Gen Formats Like AVIF?

AVIF is an even newer format that offers better compression than WebP. However, encoding speed is slow and browser support, while growing, is not yet as complete as WebP. For most use cases in 2026, WebP offers the best balance of compression, quality, speed, and compatibility.