The luminance or brightness setting is always held at the highest possible value in JPEG compression. Subsampling gets into more complicated matters where you’re converting RGB images into YCbCr (Luminance, Chroma Blue, Chroma Red). General users do not get into much deeper customizations. These are the most basic options to utilize – and they should be enough when saving for the web. This means if you save a JPEG at 40% compression you’ll get 60% quality (compared to a maximum of 100% quality with no compression). We should first clarify the two terms ‘compression’ and ‘quality’ which are the inverse of each other.
Other designers will swear 50% as a “limit” to decreasing the optimal value.īut the best advice here is to just try out different settings and see what looks best! You can’t go wrong with a few test studies optimizing JPEG images for the web. I would argue that below 30% you’re really chopping off fundamental picture quality. You’ll have to consider which types of graphics will output the highest file sizes – these are the ones which really need compression. The values you choose for optimization are completely dependent on the project at hand. Many web developers will vouch between 50% – 70% is a safe range to stick with. I added the possible JPEG values below – notice the inherent naming conventions.Įven in Adobe Photoshop 60% image quality is considered ‘high’. If you open the Save for Web dialog box in Photoshop you’ll notice they offer preset values you can choose from. Most times you’ll be recommended to save images much lower than 90% quality. It actually calculates through an optimization limit formula which increases your file sizes exorbitantly.Įven compared to 90% or 95% quality you’ll see a significant drop in file size. This will not produce the most possible “optimized” image. You should almost never save your JPEG images at 100% quality. Web optimization is a vital part of web development and maintenance but also something often overlooked by webmasters.
Ultimate Guide To Web Optimization (Tips & Best Practices)