Web Design Image Formats

Web developers are usually in a soup when it comes to getting the right image format. It takes them series of trial & error sessions till they could finally reach out to 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, not to worry; the article below aims to delve into the varied compression algorithms of each format to get you a vivid notion on 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 pixels of every block into a coefficient list- to be used for equations. In basic technical terms, JPEG compression algo translates a picture’s transformation from spatial domain to frequency domain.
Thus, JPEG is a credible name when it comes to compressing continuous-tone pictures. These refer to images with tremendous sum of colors & smooth transitions in between. In simple words, JPEG gets the image a similar look of 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 LZW compression algorithm, GIF shows a 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 colors 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 real fancy features, namely, animation and transparency.
Then, on the other hand, GIF is never good at compressing images with moderate amount of colors and yes, it carries a 256-color limit. Any attempt to convert a picture beyond that 256 boundary will only result in awful lousy posterization.

PNG

PNG caters to same images where GIF excels but then also packs in some crucial added benefits. These are:
• No such 256-color limitation
• Superior compression compared to GIFs in some images with sharp edges
• Alpha-channel transparency – where pixel is partially-transparent & not fully opaque or all-transparent
In fact, PNG assures much better compression quality compared to GIF.
To start with, 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 in 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 LZ77 algorithm.
Finally, after all these, PNG counts on the Huffman Coding process that boils down the remaining values further by creating smallest-possible codes meant for common-most values. Interestingly, JPEG also takes to this method in 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 through altering original picture data losslessly prior to it’s run via this gauntlet- for a more compression-friendly approach.
N.B.- PNG is not the right choice for images donning crisp edges & solid color 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 case of every image block & can optionally lossily or losslessly compress residual difference in 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-XRM

A favorite 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.

Previous Post Next Post

JPEG

GIF

PNG

WebP

JPEG-XRM

Categories

Recent Posts

Archive