Complete Guide to Image Compression: JPEG vs PNG vs WebP

Understanding Image Compression

Every photograph you take, every screenshot you capture, and every graphic you design starts life as a grid of pixels — and that grid is almost always far larger than it needs to be. A single uncompressed 12-megapixel photograph consumes roughly 36 megabytes of raw data. Multiply that by the dozens or hundreds of images on a typical web page, and you begin to see why image compression is not merely a convenience but an absolute necessity for anyone who publishes content on the internet.

The stakes are concrete. Images typically account for 50 to 80 percent of a web page's total weight, and research consistently shows that more than half of mobile users will abandon a page that takes longer than three seconds to load. Google factors page speed into its search rankings, which means that poorly optimized images do not just frustrate visitors — they actively bury your content in search results. Understanding how compression works, and choosing the right format for each situation, is one of the highest-leverage skills in web development and digital media management.

The Two Philosophies: Lossy and Lossless

All image compression falls into one of two camps, and the distinction shapes everything that follows.

Lossy compression works by analyzing an image and permanently discarding information that human eyes are unlikely to notice. The result is a file that looks nearly identical to the original but occupies a fraction of the storage space. The trade-off is irreversibility: once data has been thrown away, no amount of processing can bring it back. Every time you re-save a lossy file, the encoder discards another round of detail, which is why professionals keep lossless masters and only export to lossy formats at the very end of their workflow.

Lossless compression, by contrast, reduces file size without sacrificing a single pixel. It works by identifying patterns in the image data — runs of identical pixels, predictable gradients, repeating structures — and representing those patterns more efficiently. The original image can be reconstructed perfectly from the compressed file, making lossless formats ideal for graphics with sharp edges, text, or any content that will be edited further downstream. The penalty is size: lossless files are always larger than their lossy counterparts for photographic content.

JPEG: Three Decades of Dominance

JPEG, standardized in 1992 by the Joint Photographic Experts Group, remains the world's most widely used image format for photographs. Its longevity is no accident — the algorithm is a masterclass in exploiting the quirks of human vision.

The compression pipeline begins with a color-space conversion. Your camera captures pixels in RGB (red, green, blue), but JPEG's encoder immediately converts them to YCbCr, separating brightness (luminance) from color (chrominance). This separation matters because human eyes are far more sensitive to changes in brightness than to shifts in color. JPEG exploits this asymmetry through chroma subsampling, typically using a 4:2:0 scheme that stores color data at half the horizontal and half the vertical resolution of the luminance channel — a move that immediately halves the amount of color data with minimal perceptible impact.

Next comes the heart of the algorithm: the Discrete Cosine Transform (DCT). The encoder divides the image into 8×8 pixel blocks and transforms each block from the spatial domain into the frequency domain, expressing it as a sum of cosine waves at various frequencies. Low-frequency components correspond to smooth gradients, while high-frequency components represent sharp edges and fine textures. A quantization step then divides each frequency coefficient by a value from a quantization table and rounds the result to an integer. This is where data is actually lost: high-frequency coefficients, which contribute subtle details that the eye is less sensitive to, are rounded more aggressively, often to zero. The quality slider in any JPEG exporter controls how aggressive this quantization is. At quality 85, most viewers cannot distinguish the compressed image from the original; dropping below 60 introduces visible artifacts — the blocky smearing familiar to anyone who has saved a meme one too many times.

A final pass of Huffman entropy coding packs the surviving coefficients into the smallest possible bitstream. The result is a file that is typically 10 to 20 times smaller than the raw pixel data. For practical purposes, quality 75 to 85 offers the best balance for web use — going above 90 significantly increases file size with minimal visible improvement, while dropping below 60 should be reserved for thumbnails and previews where fidelity is secondary.

JPEG's strength is photographic content — smooth color gradients, natural textures, and complex scenes. Its weakness is anything with hard edges: text, line art, and graphics with large flat-color regions tend to develop ringing artifacts around sharp transitions, which is where PNG takes over.

PNG: Precision Where It Counts

The Portable Network Graphics format arrived in 1996, born partly out of frustration with the patent encumbrances surrounding GIF's LZW compression. PNG is lossless by design, which makes it the natural home for screenshots, logos, icons, UI elements, and any image containing text.

PNG's compression strategy is fundamentally different from JPEG's. Rather than transforming pixels into the frequency domain, PNG operates in the spatial domain using a two-stage pipeline. First, a prediction filter is applied to each row of pixels. The filter examines neighboring pixels — to the left, above, and diagonally above-left — and predicts the current pixel's value based on those neighbors. What gets stored is not the pixel itself but the difference between the prediction and the actual value. In areas of smooth gradient or solid color, these residuals are very small, often zero, which makes them highly compressible. PNG defines five filter types (None, Sub, Up, Average, and Paeth) and selects the best one for each row independently.

The filtered data then passes through DEFLATE compression, the same algorithm used in ZIP archives, which combines LZ77 dictionary matching with Huffman coding to squeeze out remaining redundancy. The result is a file that perfectly preserves every pixel while typically achieving 2:1 to 5:1 compression on photographic content and much higher ratios on graphics with large flat-color areas.

PNG's other signature feature is full alpha transparency. Unlike GIF, which supports only binary transparency — each pixel is either fully opaque or fully invisible — PNG provides 256 levels of transparency per pixel. This enables smooth anti-aliased edges, soft drop shadows, and complex overlay effects that blend naturally with any background, which is why PNG remains the format of choice for web design assets and UI components. The format also comes in two flavors: PNG-8, which limits the palette to 256 indexed colors (much like GIF) for smaller file sizes on simple graphics, and PNG-24/32, which supports millions of colors with full alpha transparency for complex imagery.

The trade-off is size. A high-resolution photograph saved as PNG can be five to ten times larger than the same image saved as JPEG at quality 85, with no visible difference to the naked eye. PNG excels at what it was designed for — precise, editable graphics — but it is wasteful for photographic content.

WebP: The Best of Both Worlds

Google introduced WebP in 2010, and after a slow start marked by limited browser support, it has matured into the most versatile image format available today. WebP offers both lossy and lossless modes, supports alpha transparency even in lossy mode, and includes animation capabilities, all in a single container.

WebP's lossy mode is built on the same intra-frame prediction techniques used in the VP8 video codec. Instead of JPEG's 8×8 DCT blocks, WebP uses variable-size prediction blocks (4×4 or 16×16) and can predict pixel values based on already-decoded neighboring blocks, a technique borrowed from video compression that significantly improves efficiency. The result: lossy WebP files are typically 25 to 34 percent smaller than equivalent-quality JPEGs. A photograph that occupies 150 KB as a JPEG might shrink to 100–110 KB as WebP with no perceptible quality difference.

WebP's lossless mode, meanwhile, averages 26 percent smaller than PNG. It achieves this through a combination of techniques including spatial prediction, color-space transforms that decorrelate the channels, a backward-reference cache for repeated pixel patterns, and an advanced entropy coder. For web developers, this means that switching every PNG icon and every JPEG photograph on a site to WebP can reduce total image weight by roughly a quarter, translating directly into faster load times and lower bandwidth costs.

As of 2025, every major browser supports WebP — Chrome, Firefox, Safari, and Edge — which eliminates the compatibility concerns that held the format back in its early years. For most web projects, WebP is now the default recommendation.

AVIF: The Next Generation

If WebP represents the current state of the art, AVIF is the format pushing the frontier forward. Based on the AV1 video codec developed by the Alliance for Open Media (which includes Google, Apple, Mozilla, Microsoft, Netflix, and Amazon), AVIF applies video-grade compression techniques to still images with remarkable results.

AVIF's lossy compression regularly outperforms WebP by another 20 to 30 percent at equivalent visual quality, which means that images occupying 100 KB as WebP can drop to 70–80 KB as AVIF with no visible degradation. It supports 10- and 12-bit color depth (compared to 8-bit for JPEG and most WebP usage), HDR content, and wide color gamuts, making it future-proof for displays that are already shipping with these capabilities. It also supports alpha transparency and animation.

The catch is encoding speed. AVIF's compression algorithm is computationally expensive — encoding an image can take several seconds, compared to milliseconds for JPEG — which makes it less suitable for real-time or on-the-fly conversion scenarios. Browser support has also lagged slightly behind WebP, though Chrome, Firefox, and Safari all handle AVIF. For static assets that are compressed once and served millions of times, AVIF's encoding cost is a negligible trade-off against its dramatic bandwidth savings.

Practical Compression in the Real World

Theory is useful, but decisions get made in practice. A hero banner at the top of a commercial website should generally be served as WebP at quality 80 to 85, with a JPEG fallback for edge cases, targeting a file size under 200 KB. Product photographs on an e-commerce site can aim for WebP at quality 75 to 80, keeping each image under 100 KB. Thumbnails — the small preview images in grids and carousels — benefit from more aggressive compression at quality 70 and a maximum width of 400 pixels, bringing them under 30 KB. Icons and logos, meanwhile, belong in PNG (or better yet, SVG for vector graphics), where their sharp edges and flat colors compress efficiently and their transparency is preserved without artifacts.

For social media, each platform applies its own re-compression, so the goal is to upload the highest quality that fits within the platform's size limits. Instagram prefers JPEG at 1080×1080. Twitter does well with PNG for graphics with text and JPEG for photographs. LinkedIn handles both, but PNG is the safer bet for infographics where text legibility matters.

These are guidelines, not laws. The right compression level for a given image depends on its content: a photograph of a snowy landscape with subtle gradients will tolerate less compression than a bold infographic with flat colors and hard edges. The only reliable test is visual inspection. Automated quality metrics like SSIM and PSNR can guide you, but they do not always correlate with what a human viewer notices at a glance.

A Workflow That Works

The most important habit in image compression is also the simplest: always start from the highest-quality source available. You can compress a raw photograph down to a tiny WebP file whenever you need to, but you can never recover detail that was already discarded by a previous compression pass. Keep your originals — whether raw camera files, PSD or Figma exports, or uncompressed PNGs — and generate optimized versions from them as a separate step.

Loopaloo's browser-based Image Compressor lets you adjust quality settings and preview the results side by side in real time, making it easy to find the sweet spot for each image. The Image Converter handles format switching — converting a batch of JPEGs to WebP, for instance — while the Image Resizer reduces dimensions before compression, which is often the single most effective way to shrink file sizes. Halving an image's width and height reduces its pixel count by 75 percent, cutting the file size proportionally before any compression algorithm even touches it. All processing happens locally in your browser, so your images are never uploaded to a remote server.

Choosing Wisely

Image compression is both a science and a craft. The science lies in the mathematics of DCT transforms, prediction filters, and entropy coding. The craft lies in knowing when to apply each technique — reaching for JPEG when universal compatibility matters, for PNG when every pixel must be preserved, for WebP when performance and quality must coexist, and for AVIF when you are optimizing for the future. Armed with that understanding, you can make every image on your site load faster, look sharper, and cost less to serve.