{"id":21442,"date":"2016-11-23T13:58:36","date_gmt":"2016-11-23T13:58:36","guid":{"rendered":"http:\/\/how_to_select_the_perfect_image_format"},"modified":"2024-09-07T16:35:38","modified_gmt":"2024-09-07T23:35:38","slug":"how_to_select_the_perfect_image_format","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_select_the_perfect_image_format","title":{"rendered":"How to select the perfect image format"},"content":{"rendered":"
<\/div>\n
JPEGs, PNGs, and GIFs \u2014 oh my! Most web developers only learn which format to use through trial, error, and long experience, and not necessarily by fully understanding how these formats actually work.<\/div>\n
<\/div>\n
In this article, we\u2019ll take a high-level look at each formats\u2019 compression algorithms, in order to understand how their differing strategies make them more or less appropriate for different kinds of images. Then, we\u2019ll tour a few next-generation image formats (like WebP and JPEG-XR) and see how we can use smart servers to take advantage of these powerful (but not yet universally-supported) formats, today.<\/div>\n
<\/div>\n
Let\u2019s kick things off with a dear old friend\u2026<\/div>\n
\n

JPEG<\/h2>\n
Allow me, for a moment, to spend some time appreciating the venerable, amazing, JPEG. The twenty-five-year-old bag-of-algorithms that is ISO 10918<\/a> aka the JPEG standard has stood the test of time.<\/div>\n
<\/div>\n
So, how does it work? And what is it good for?<\/div>\n
<\/div>\n
JPEG compression carves an image up into 8\u00d78-pixel-blocks, and then does something a little bit crazy to them, with a whole lot of math. It converts each block\u2019s pixels<\/em>\u2014lists of R, G, and B values, mapped to sequential points in space\u2014into a list of coefficients<\/em>, used in equations which describe the block in terms of waves of energy<\/em>. In technical terms, the JPEG compression algorithm translates an image\u2019s information from the spatial domain<\/em> to the frequency domain<\/em>.<\/div>\n
<\/div>\n
Practically, this means that JPEG is very good at compressing continuous-tone images: images with a tremendous number of colors, and smooth transitions between them. In other words, JPEG assumes that your image is going to look more or less like a photograph.<\/div>\n
Conversely, the JPEG format is terrible<\/em> at compressing images with crisp edges or high-energy, noisy textures\u2014it\u2019ll put rings around sharp edges and blur out fine detail.<\/div>\n<\/div>\n
<\/div>\n
\"Good<\/a><\/div>\n
<\/div>\n
In order to compress these images well, we will try to employ different compression algorithms. Enter our next format:<\/div>\n
\n

GIF<\/h2>\n
In the early days of the web, if an image wasn\u2019t<\/em> a JPEG, it was a GIF.<\/div>\n
<\/div>\n
The GIF format uses the LZW compression algorithm, which is far simpler than JPEG\u2019s mathemagic. Essentially, the LZW algorithm scans over your image data and generates very short codes for the parts of it that repeat; LZW shortens repetition. Which means that the GIF<\/a> format is good at compressing images that have large chunks of identical or repetitive data. Images that only have a few colors, in broad swaths, with sharp transitions between them can be stored efficiently and losslessly<\/em> as GIFs.<\/div>\n
<\/div>\n
And even though it\u2019s a simple format, GIF sports a pair of fancy features: transparency and animation.<\/div>\n
<\/div>\n
But\u2026 GIF is terrible at compressing things that have even a moderate number of colors; heck, the format has a baked-in, hard, 256-color limit. Converting an image with more than that number of colors into a GIF results in lossy posterization<\/em>, which looks awful.<\/div>\n<\/div>\n
<\/div>\n
\"Good<\/a><\/div>\n
<\/div>\n
\n
In short, GIF and JPEG have opposite and complementary strengths. They made a killer team in the web\u2019s early days.<\/div>\n
<\/div>\n
But unresolved patent questions surrounding the LZW algorithm inspired a few very smart individuals to take a second crack at designing a lossless image format for the web.<\/div>\n<\/div>\n
\n

PNG<\/h2>\n
PNG excels with the same sorts of images that GIF does, and brings a few added benefits:<\/div>\n
<\/div>\n
\n