Web developers are usually in a soup when it comes to getting the right image format. It takes them a series of trial & error sessions till they could finally reach the desired format- but the catch is they never really know how the major image formats, be it GIF or PNG or JPEG- actually work! However, do not worry; the article below aims to delve into the varied compression algorithms of each format to get you a vivid notion of their relevance for different images.
JPEG
Let’s start with our dear old JPEG which has managed to thrive with glory for more than 2 decades now with its ISO 10918 algorithms. So what does JPEG do? Well, JPEG compression works to carve a picture up to 8 by 8-pixel blocks & then it converts the pixels of every block into a coefficient list- to be used for equations. In basic technical terms, JPEG compression also translates a picture’s transformation from the spatial domain to the frequency domain.
Thus, JPEG is a credible name when it comes to compressing continuous-tone pictures. These refer to images with a tremendous sum of colours & smooth transitions in between. In simple words, JPEG gets the image a similar look to a photograph.
On the flip side, JPEG is never a good pick when it comes to compressing pictures with noisy, high-energy textures and crisp edges.
GIF
GIF has to be the next in the line because GIF & JPEG speak of opposite & complementary strengths.
Backed by the LZW compression algorithm, GIF shows way simpler math work than JPEG. Essentially, LZW scans over the image data & generates tiny codes for repetitive parts; in short, the algorithm is very smart at reducing repetitions. Thus, GIF is great for compressing images which show big chunks of repetitive or identical data. Images with few colours and sharp transitions could be stored losslessly and effectively as GIFs. The coolest bit is that, despite its simple outlook, GIF is also about some really fancy features, namely, animation and transparency.
Then, on the other hand, GIF is never good at compressing images with a moderate amount of colours and yes, it carries a 256-colour limit. Any attempt to convert a picture beyond that 256 boundaries will only result in awful lousy posterization.
PNG
PNG caters to the same images where GIF excels but then also packs in some crucial added benefits. These are:
• No such 256-colour limitation
• Superior compression compared to GIFs in some images with sharp edges
• Alpha-channel transparency – where the pixel is partially-transparent & not fully opaque or all-transparent
In fact, PNG assures much better compression quality compared to GIF.
To start with, the PNG algorithm reduces the data amount it would require to store using the known pixels to predict those it doesn’t know about. The format comes with 5 various prediction strategies yet PNG feels that pixels adjacent to one another would be similar. In case, this assumption rings true, PNG will save the data by just storing differences between the prediction & actual value- it’s to stress here small numbers tend to take up lesser space compared to big ones.
Next, PNG successfully cuts off repetition by enabling the picture to easily refer to identical previous pixel sequences, using the LZ77 algorithm.
Finally, after all these, PNG counts on the Huffman Coding process that boils down the remaining values further by creating the smallest-possible codes meant for common-most values. Interestingly, JPEG also takes to this method in the last step.
Bundling all the 3 lossless techniques mentioned above, PNG promises amazing benefits over the single strategy taken by GIF. Then, yes, cutting-edge modern tools can offer much greater compression ratios by altering original picture data losslessly prior to its run via this gauntlet- for a more compression-friendly approach.
N.B.- PNG is not the right choice for images donning crisp edges & solid colour swaths or precisely repetitive patterns.
Now, let’s have a look at some next-gen image formats that are spectacular in their own means-
WebP
Derived from Google’s WebM format, WebP comes with a predictive compression strategy. In simple words, it just takes PNG’s strategy to another level. It takes 1 of 16 prediction strategies in the case of every image block & can optionally lossily or losslessly compress residual difference between the actual and predicted values. The relative complexity of the format assures good flexibility which makes it a cool choice for various imagery options.
JPEG-XR
A favourite from Microsoft, JPEG-XR comes with amazing new techniques, added to basic JPEG compression mechanics. So, what do you get from JPEG-XR?
• More effective lossy compression
• Alpha-channel semi-transparency
Akin to WebP, JPEG-XR speaks of more complexity & is less well-supported compared to its predecessors.
However, it will still take some time till these next-gen formats receive support from all browsers. At present, WebP is limited to Google Chrome while JPEG-XR is to IE & Edge.
