Right compression settings to save JPG images for Wordpress
Filed under: Design, Tutorials - How To's, Wordpress — Posted by sergio @ 1:36 am
Left: Original image enlarged 300% to show pixels.
Right: Compressed image with the lowest quality, enlarged 300% too.
Many of you who use Photoshop may know more or less how JPG works, and some of you might have a deep knowledge about the algorithm that makes our photos look bad or allows them to be quickly loaded in browsers. This post is for those who know bigger is better, but don’t know why an image gets heavier or lighter.
I don’t know about algorithms, nor do I have a degree in advanced math or programming – I’m writing this even before reading what the official site jpeg.org says about it, but I’ve been using Photoshop for the last 18 years, at least, and I can tell you what matters when it comes to image compression, in lamens terms.
How do JPG images compress the information?
An image is broken down in little pre-defined patterns. Those patterns rank from “light” to “heavy”, and depending on how many light patterns are in your image, the image will compress better. The lightest patterns have just a single degree in them, and compress perfectly in a single tone background, or with just a few smooth surfaces. The heaviest patterns are the ones needed for reproducing fine details like thin lines, sharp edges, and grainy surfaces present in hair, grass, sand, woven textures, etc.
What are the factors on JPG compression ratio?
Despite there many obvious factors affecting image compression, since web images are intended to be displayed on an RGB display only, at a fixed resolution only (for bandwidth saving), the only relevant factor is the small detail in the subject, and the visible artifacts are only enhanced or lessen by the size they appear at, which is caused by the size of the pixel, or resolution of the display. Yes, the compression will leave visible artifacts which will be seen with the eye, and the smaller the pixel, the more difficult it would be for them to be noticed.
The same image file would look really bad in 72ppi screens, but it’ll do fine in an iPhone’s which has a 160ppi resolution, and even better in a brochure at 300dpi just because the pixel, and so the whole image, would be 4 times smaller. At the same pixel count, the higher the resolution (pixels per inch), the smaller the pixel (more smaller pixels per inch), the more compression can be applied without noticing its artifacts.
Why do two identical images compress differently?
After the compression is applied, there are residual artifacts which could be considered as real detail by the algorithm if found. Since that residual artifacts are always noisy, and small, it takes extra effort for the algorithm to compress them next time you save an already-compressed image – except when image is not cropped or when trimmed area is multiple of the block sample at compressing time, e.g. 16px. So, two images which look the same and have the same resolution could end up taking different disk space.
What’s the recommended compression value for a JPG?
I’ve been asked that so many times that I should have written this long time ago. The range of quality values goes usually from 1 to 10, except in Photoshop that scale goes up to 12 where there’s actually no more compression, and it specifies how “loose” the pattern matching is against the original. The closer to the original, the more heavy patterns are needed to reproduce the image details, the higher the quality value.
Pages: 1 2
