Welcome to our virtual newstand, full of web news, business tips and more. Please hop in the discussion and leave a comment.
Get blog updates delivered straight to your inbox, subscribe to our RSS Feed:

Image Squeezing Must for Good Web Developers Part 1


 

The average Web page weighs 1286KB, and 60% of that is image data according to the latest HTTP archive stats. Properly compressing image is of extremely important for the overall page content size and for this reason its loading time. When the users browse the Web on their mobile devices it also has a noteworthy impact on the data plan hit users acquire. We see that few web developers actually compress their images, yet when we look at the actual numbers “in the wild” and even for those that do, the results are not always ideal.

Image Formats

Let’s have a short overview of the image formats on the Web. And they are as follows:

Image Squeezing in different image format

WebP

WebP can employ both lossy and lossless techniques and it is the best suited for both real life photos and computer generated images. The WebP format uses predictive coding to achieve its high lossy compression rates and the latest entropy coding techniques to achieve better lossless results based on the VP8 video codec. It also supports animation and a full alpha channel. What’s the problem then? The main problem with WebP is not really part of the Web platform’s “official” formats since it is only supported by Chrome and Opera at the present. The higher barrier is the lack of simple fallback mechanisms both client and server side of entry for web developers that want to use WebP today.

PNG

It represents more than 256 colors only but it is the best suited for computer generated images. PNG have various subtypes. It uses a different compression algorithm but the subtype PNG8 is very similar to GIF. It supports a full alpha channel but it does not support animation. The latter supporting a full alpha channel the subtypes referred to as PNG24 and PNG24a can represent the full RGB color space. A generic compression algorithm is applied when the both PNG24 subtypes are represented as bitmaps and that is the major downfall. Usually this is not good in the terms of byte size for web developers. This format is found on the web in following percentage: PNG8-1.3%; PNG24-5.2% and PNG24a-14.3%

GIF

In early days of web this format was widely used by web developers. GIF have relatively few numbers of colors, and it is best suited for computer generated images. It is creating a bitmap that represents the image using the palette’s color that are up to 256 colors that best fits the image and then compressing that bitmap using a generic compression algorithm. IT does not support the alpha channel but it supports animation and transparency. On web this format found as animated Gif-6.4% and non- animated Gif 5.3%

JPEG

JPEG is the best suited format for taking real life photos. It is storing the frequency of color changes between different pixels in the images. This is done through eliminating high frequencies that is invisible for humans and they cannot notice anyway, and then compresses that. You cannot convert JPEG into the original bitmap image with perfect accuracy as it is a lossy image format. This is not a limitation for most users on the Web so not for web developers. You will find this format on the web with greater percentage like 66.9%.