JPEG Compression Best Practices: Quality & Optimization

JPEG has been the backbone of web photography since the early 1990s, and it is not going anywhere. Despite the rise of WebP and AVIF, JPEG still accounts for over 40% of all image bytes transferred on the web according to the HTTP Archive Web Almanac 2024. Every browser supports it, every image editor exports it, and every CMS handles it without configuration. If you work with images on the web, you need to understand how JPEG compression works and how to get the most out of it.

The challenge is that JPEG is a lossy format, and the quality slider in your compression tool is doing a lot more under the hood than most people realize. The difference between quality 75 and quality 85 might be 40% in file size but nearly invisible to the human eye. The difference between quality 60 and quality 50 might save you another 15% but introduce noticeable banding in gradient areas.

This guide breaks down the technical foundations of JPEG compression, gives you concrete quality settings for every common use case, and walks you through optimizing JPG files with real before-and-after data using ImgCompress.app.

How JPEG Compression Works Under the Hood

Understanding the compression pipeline helps you make smarter decisions about quality settings. The JPEG standard, formally defined in the ITU-T T.81 specification published by the International Telecommunication Union, uses a multi-stage process to reduce file size. Each stage offers a different lever for trading quality against file size.

Color Space Conversion and Chroma Subsampling

The first step converts the image from RGB (red, green, blue) to YCbCr color space. Y represents luminance (brightness), while Cb and Cr represent chrominance (color difference). This separation matters because human vision is far more sensitive to changes in brightness than to changes in color. The JPEG encoder exploits this biological fact through a technique called chroma subsampling.

Chroma subsampling reduces the resolution of the color channels while keeping the luminance channel at full resolution. The three common subsampling ratios are:

• 4:4:4 — No subsampling. All three channels are stored at full resolution. This preserves maximum color accuracy but offers the least compression benefit. Use this for images where color precision is critical, such as product photography with saturated colors or medical imaging.
• 4:2:2 — The color channels are sampled at half the horizontal resolution of the luminance channel. This cuts chrominance data by roughly 33% with minimal visible impact on most photographs. It is a good middle ground for high-quality web images.
• 4:2:0 — The color channels are sampled at half resolution in both horizontal and vertical directions, reducing chrominance data by 75%. This is the default for most JPEG encoders and web compression tools, including ImgCompress.app. For typical photographic content viewed at web display sizes, the quality difference compared to 4:4:4 is negligible.

As documented in the Mozilla MDN Web Docs on JPEG, the 4:2:0 subsampling scheme is the most widely used configuration on the web because it delivers the best balance of file size and perceptual quality for photographic content.

Discrete Cosine Transform (DCT)

After color space conversion, the encoder divides each channel into 8×8 pixel blocks and applies the Discrete Cosine Transform to each block. The DCT converts spatial pixel data into frequency coefficients — essentially decomposing the block into a set of cosine wave patterns at different frequencies.

Low-frequency coefficients represent the broad color and brightness gradients in the block. High-frequency coefficients represent fine details like sharp edges, texture, and noise. The key insight is that most of the visual information in a typical photograph is concentrated in the low-frequency coefficients. The high-frequency data can often be reduced or eliminated without the viewer noticing.

Quantization: Where Quality Loss Actually Happens

Quantization is the step where data is permanently discarded, and it is directly controlled by the quality setting you choose. The encoder divides each DCT coefficient by a corresponding value from a quantization table, then rounds the result to the nearest integer. Larger divisors in the quantization table mean more aggressive rounding, which means smaller files but more information lost.

When you move the quality slider from 90 down to 70, you are telling the encoder to use a quantization table with larger divisors, especially for the high-frequency coefficients. This is why compression artifacts in JPEG images typically appear as blockiness (the 8×8 block boundaries become visible) and ringing (halos around sharp edges) — these are the visual consequences of quantizing away high-frequency detail.

Entropy Coding

The final stage applies lossless entropy coding (Huffman coding in baseline JPEG, or arithmetic coding in some implementations) to the quantized coefficients. This step compresses the data further without any additional quality loss. There is not much you can do to influence this stage as an end user, but optimized JPEG encoders like MozJPEG apply more efficient Huffman tables than the standard ones, squeezing out an extra 2–5% file size reduction at no quality cost.

Quality Settings Guide: What to Use and When

The quality slider is the most important control you have when compressing JPEG images. Here is a practical reference table based on our testing across hundreds of images with different content types:

About SSIM scores: The Structural Similarity Index (SSIM) measures perceived visual quality on a scale from 0 to 1, where 1.0 means identical to the original. Scores above 0.95 are generally considered visually lossless to most viewers. Scores above 0.98 are indistinguishable from the original even under close inspection. We measured these values by comparing compressed outputs against uncompressed TIFF source files using the SSIM algorithm described in the original Wang et al. 2004 paper.

The 80% Rule of Thumb

If you are unsure where to start, quality 80 is the single best default for photographic JPEG content on the web. At this setting, you typically get:

• 78–84% file size reduction compared to the uncompressed original
• SSIM scores above 0.96, meaning the compressed image is perceptually identical to the source at normal viewing distances
• No visible blocking or ringing artifacts at typical web display sizes (up to about 1200px wide)

From quality 80, you can adjust up or down based on the specific image and context. Images with large smooth gradients (sky, skin tones) may benefit from bumping up to 85 to avoid banding. Images with lots of fine texture (foliage, fabric) can often drop to 75 without any visible difference.

Quality vs File Size: The Diminishing Returns Curve

One of the most important things to understand about JPEG quality settings is that the relationship between quality and file size is not linear. Here is what we measured when compressing a 4000×3000 pixel landscape photograph at different quality levels:

The steepest drop happens between quality 100 and 90 — you lose 72% of the file size while the SSIM barely moves. Between quality 80 and 60, you save another 8 percentage points of file size but the SSIM drops noticeably. Below quality 50, artifacts become clearly visible in most photographic content.

This is why the 80–85 range is the sweet spot for most web use cases. You capture the vast majority of the compression benefit while staying well within the perceptually lossless zone.

Progressive JPEG vs Baseline JPEG

JPEG files come in two encoding modes: baseline and progressive. The difference affects how the image loads in the browser, and it can also affect file size.

Baseline JPEG

Baseline encoding stores the image data in a single top-to-bottom scan. The browser renders the image row by row as the data arrives. On a slow connection, you see the top portion of the image first, with the rest appearing as more data downloads. This can feel sluggish because the viewer has no sense of the overall image until most of it has loaded.

Progressive JPEG

Progressive encoding stores the image in multiple scans of increasing detail. The first scan contains a low-resolution version of the entire image. Subsequent scans add more detail until the full-quality image is complete. The browser displays the blurry preview almost immediately and sharpens it as more data arrives.

Which Should You Choose?

For web delivery, progressive JPEG is almost always the better choice, and here is why:

• Perceived performance — Users see a complete (if blurry) image much sooner, which feels faster even if the total download time is identical. This is especially valuable for hero images and above-the-fold content.
• File size — For images larger than about 10 KB, progressive JPEG files are often slightly smaller than their baseline equivalents (typically 2–5% smaller). This is because the multi-scan structure allows the entropy coder to work more efficiently across the frequency spectrum.
• Compatibility — Every modern browser handles progressive JPEG correctly. There are no compatibility concerns in 2025.

The only scenario where baseline might be preferable is for very small images (under 10 KB), where the overhead of the progressive scan structure can actually make the file slightly larger. For thumbnails under 5 KB, the difference is negligible either way.

ImgCompress.app generates progressive JPEGs by default, so you get this optimization automatically without any extra configuration.

Tutorial: Optimizing JPEG Images with ImgCompress.app

Let us walk through a practical optimization workflow. We took three photographs at different resolutions and compressed them at multiple quality levels to show you exactly what to expect.

Test Setup

• Source images: Three high-resolution photographs — a landscape (5472×3648, 4.8 MB), a portrait (3200×4800, 3.2 MB), and a product shot (2400×2400, 1.9 MB). All originals were uncompressed TIFF files converted to maximum-quality JPEG as the starting point.
• Tool: ImgCompress.app, running client-side in Chrome 122 on a MacBook Pro (M2, 16 GB RAM).
• Method: Each image was compressed at quality 60, 75, 80, and 90 using the JPEG output format. All processing happened locally in the browser — no files were uploaded to any server.

Step-by-Step Process

1. Visit ImgCompress.app in your browser.
2. Drag your JPEG files onto the upload area. You can drop multiple files at once for batch processing.
3. Select JPEG as the output format and set your desired quality level using the slider.
4. Click compress. Processing takes 1–3 seconds per image depending on resolution and your device.
5. Use the before-and-after preview to inspect the result at full zoom. Pay attention to gradient areas, fine textures, and sharp edges — these are where artifacts appear first.
6. Download the compressed file, or download all files as a ZIP if you processed a batch.

Results at Different Quality Levels

At quality 80, all three images achieved approximately 90% file size reduction. The landscape dropped from 4.8 MB to 480 KB. The portrait went from 3.2 MB to 340 KB. The product shot shrank from 1.9 MB to 195 KB. In every case, the compressed image was visually indistinguishable from the original at normal web display sizes.

At quality 60, the savings pushed past 94%, but close inspection revealed slight banding in the sky gradient of the landscape image and minor softening of fine hair detail in the portrait. For thumbnails or images displayed at small sizes, quality 60 would be perfectly acceptable. For hero images or product detail views, quality 75–80 is the safer choice.

Common JPEG Compression Mistakes and How to Avoid Them

Even experienced developers make these mistakes when working with JPEG compression. Here are the most common pitfalls and how to sidestep them.

Re-compressing Already Compressed JPEGs

This is the single most damaging mistake. Every time you open a JPEG, edit it, and save it again as JPEG, you run the image through the full lossy compression pipeline again. Each generation introduces additional quantization artifacts that compound on top of the previous ones. After three or four rounds of re-compression, the quality degradation becomes clearly visible — especially in areas with smooth gradients or fine detail.

The fix: Always keep your original high-quality source files (RAW, TIFF, or maximum-quality JPEG). Compress from the source every time you need a new output. If you need to convert a JPEG to another format, our Image Format Conversion Guide explains how to minimize quality loss during the process.

Using Quality 100 for Web Images

Quality 100 does not mean "no compression." It means "minimum quantization," and the resulting files are enormous — often 3–5× larger than quality 90 with no perceptible visual difference. As our data table above shows, dropping from quality 100 to 90 saves over 70% of the file size while the SSIM stays above 0.99.

The fix: Never use quality 100 for web delivery. Start at 80 for general use and only go above 90 if you have a specific reason (print preparation, archival storage).

Ignoring Chroma Subsampling Settings

Most compression tools default to 4:2:0 chroma subsampling, which is correct for the vast majority of photographic content. However, if you are compressing images with fine color detail — such as product photos with saturated reds and blues, or images containing thin colored lines — 4:2:0 can cause visible color bleeding at edges.

The fix: For images where color accuracy is critical, check whether your compression tool offers a 4:4:4 subsampling option. The file will be larger, but the color fidelity will be preserved. For standard web photos, 4:2:0 is the right default.

Compressing Screenshots and Graphics as JPEG

JPEG is designed for continuous-tone photographic content. Images with sharp edges, solid color blocks, and text — like UI screenshots, logos, charts, and diagrams — compress poorly as JPEG and often show visible ringing artifacts around edges.

The fix: Use PNG for screenshots and graphics that need lossless quality, or WebP for a good balance of quality and file size. See our WebP vs PNG comparison for a detailed breakdown of when to use each format.

Not Testing on Multiple Devices

Compression artifacts that are invisible on a desktop monitor may be noticeable on a high-DPI mobile screen, or vice versa. The viewing distance, screen size, and pixel density all affect how artifacts are perceived.

The fix: Always preview your compressed images on at least one mobile device in addition to your desktop. Pay particular attention to hero images and product photos that are critical to the user experience.

Conclusion

JPEG compression is deceptively simple on the surface — move a slider, get a smaller file — but the technical details matter. Understanding how DCT, quantization, and chroma subsampling interact gives you the knowledge to make informed decisions about quality settings instead of guessing.

The practical takeaways are straightforward: use quality 80 as your default starting point, prefer progressive encoding for web delivery, always compress from your highest-quality source file, and match your quality setting to the image's display context. Thumbnails can go as low as 60–70%. Hero images deserve 85–90%. And quality 100 is almost never the right answer for web delivery.

Ready to optimize your JPEG images? Try our free image compressor — it processes everything locally in your browser, supports batch uploads, and generates progressive JPEGs by default. No signup, no file uploads, no privacy concerns.

Related reading:

• Ultimate Image Compression Guide 2025: Reduce File Size by 90%
• WebP vs PNG: Complete Format Comparison Guide for 2025
• Image Format Conversion Guide: JPG, PNG, WebP & AVIF Explained