Images Are 60 Percent of the Average Web Page. Here Is Which JPEG Quality Setting You Should Be Using.
Images account for more than 60 percent of the average web page's total byte weight. That figure has been consistent across HTTP Archive annual reports for most of the past decade, and 2025 data shows images remain the Largest Contentful Paint element on roughly 85 percent of desktop pages. It is not an optimization footnote. It is the single largest lever on page load time for most websites.
JPEG is the format carrying most of that weight. It has dominated photographic image compression for over three decades, and JPEG compression has a quality setting that most people set arbitrarily. The default settings in many tools are not calibrated for web performance. Understanding what that setting actually controls, and what the research says about where to put it, can cut page weight by hundreds of kilobytes per page without any visible change to image quality.
The format itself has a specific origin. Understanding how it was built helps explain both its strengths and the specific tradeoffs the quality slider controls.
Where JPEG Came From
The Joint Photographic Experts Group held its inaugural meeting in November 1986 in Parsippany, New Jersey, with the goal of creating a single standardized compression method for continuous-tone still images. By January 1988, at a second testing meeting in Copenhagen, the group had selected Adaptive Discrete Cosine Transform as the technical basis for the new standard.
The discrete cosine transform itself was older. Nasir Ahmed, along with T. Natarajan and K. R. Rao, had introduced DCT in a 1974 paper as a method for transform coding of images. DCT concentrates image energy into fewer coefficients, which makes it particularly effective for compression: most of the perceptually important information in an image ends up in a small number of low-frequency coefficients, and the high-frequency components, which represent fine detail and sharp edges, can be aggressively discarded without obvious visual damage.
After iterative refinements through 1989 and 1990, the ISO Committee Draft 10918 was approved in April 1990. The draft international standard ballot began in January 1992. G. K. Wallace published the defining technical description, "The JPEG still picture compression standard," in IEEE Transactions on Consumer Electronics in 1992. That paper remains one of the most cited documents in image processing.
The browser landscape adopted JPEG rapidly. Mosaic, the first widely used web browser, added JPEG support in 1994. JPEG became the dominant format for photographs on the web by the mid-1990s and has remained so, despite the emergence of WebP and AVIF as competitors.
What the Quality Setting Actually Controls
JPEG compression works in two stages. First, the image is converted from RGB color space to a luminance-chrominance format called YCbCr, which separates brightness information from color information. The human visual system is more sensitive to luminance than to chrominance, so JPEG compresses the color channels more aggressively than the brightness channel. Second, the DCT is applied to 8x8 pixel blocks across the image, converting each block from a grid of pixel values to a set of frequency coefficients.
The quality setting controls a quantization table that determines how aggressively each frequency coefficient is rounded. At high quality, coefficients are preserved with precision. At low quality, coefficients are rounded to coarser values, which produces blocky, distorted-looking results in areas of the image that have fine texture or sharp contrast edges. The rounding is irreversible: once a JPEG is saved at a low quality setting, the discarded information cannot be recovered.
On the standard 1-to-100 scale, quality 100 does not mean lossless. It means minimal quantization, but DCT rounding still occurs. True lossless JPEG exists as a separate specification but is rarely used.
The practical question is not "what quality can I afford" but "where does image quality stop being perceptually distinguishable at screen resolution." Multiple independent studies have found that for photographic content viewed on screen, quality settings between 75 and 85 are visually indistinguishable from quality 90 or above for the majority of viewers under typical viewing conditions. The Google Lighthouse performance audit tool recommends serving JPEGs at quality 85 as a web baseline.
The file size differences are significant. A typical product photograph at quality 95 might be 400KB. The same image at quality 85 might be 180KB. At quality 75, it might be 110KB. The visual difference between 85 and 95 is difficult to perceive even at full zoom. The load time difference is measurable and directly affects bounce rate.
The Difference Between Software Quality Scales
One complication is that different tools implement the quality scale differently. Adobe Photoshop's "Save for Web" quality 60 is not the same as libjpeg's quality 60, which is not the same as MozJPEG's quality 60. The scales converge at the extremes but diverge substantially in the middle ranges.
MozJPEG is a JPEG encoder developed by Mozilla that produces smaller files than the standard libjpeg encoder at equivalent perceptual quality. Research has found that MozJPEG at quality 80 to 85 delivers 30 to 40 percent smaller file sizes than standard libjpeg at the same quality setting, with comparable visual output measured by Structural Similarity Index (SSIM). For web use, MozJPEG quality 75 to 80 often produces results equivalent to libjpeg quality 85 to 90.
The practical implication is that when you see a "quality 85" recommendation, it applies to whichever encoder is in use, and results will vary. Browser-based tools that compress in JavaScript use their own implementations, which again have different internal calibrations.
Which Images Benefit from Higher Settings
Not all images are the same. Photographs with fine texture detail, particularly fabric, hair, and natural landscapes, show compression artifacts earlier than images with smooth gradients. Images where color accuracy is professionally important, such as product shots in fashion or food photography, warrant higher quality settings.
Screenshots and UI graphics are often better served by PNG format entirely, because JPEG compression introduces visible artifacts around sharp text and high-contrast geometric edges. PNG is lossless and handles those patterns without distortion.
Product photos on white backgrounds, blog photography, and editorial images do not need quality above 85. They can typically be served at quality 75 to 80 without visible degradation at typical display sizes.
A practical workflow: start at quality 80, compare with the original at 100 percent zoom, and increase only if you see visible blocking or blurring in areas central to the image's purpose. For a portrait, check faces and hair. For a landscape, check foliage. For a product shot, check the product surface texture.
Modern Alternatives and Why JPEG Still Matters
WebP, introduced by Google in 2010, delivers 25 to 35 percent smaller files than JPEG at equivalent perceptual quality. AVIF, based on the AV1 video codec, delivers approximately 50 percent smaller files than JPEG. Both formats have near-universal browser support as of 2025.
Despite this, JPEG remains relevant for several reasons. Existing image libraries on most websites are in JPEG format. CMS platforms, email clients, and many third-party services still process or require JPEG. Progressive JPEG loading, a variant of the format, provides perceived performance improvements on slow connections by loading a low-resolution preview first and gradually sharpening.
Conclusion
For new uploads where you control the output format, WebP at quality 80 is worth considering as a default. For existing JPEG workflows, optimizing the quality setting delivers measurable results immediately.
A well-calibrated JPEG compressor handles the compression calculation in the browser, showing you the resulting file size and allowing you to adjust quality before downloading. Comparing the original and compressed versions at full zoom, rather than at thumbnail size, is the only reliable way to set the quality threshold for a specific image type.
Frequently Asked Questions
What JPEG quality setting should I use for web images?
75 to 85 is the recommended range for most web content. Google Lighthouse suggests 85% as a baseline. Research on perceptual quality shows minimal visible difference between 85 and higher settings at typical screen sizes.
What happens if I compress a JPEG too much?
JPEG compression artifacts appear: blockiness around edges, color banding in smooth gradients, and general softening of fine detail. These become more visible at lower quality settings and in high-contrast areas of the image.
Why are images such a large portion of web page size?
HTTP Archive data shows images consistently make up over 60% of total page bytes. Photos are inherently data-rich. Without optimization, even a few uncompressed images can make a page several megabytes.