![]() ![]() PNG images mainly have two modes - PNG8 and PNG24. This is what makes them suitable for storing images of natural scenes. JPEG images can support around 16 million colours. There is a significant difference in the number of colours that can be supported by these 3 formats. The top PNG logo has smooth edges whereas the bottom GIF logo has jagged edges around the text. This image consists of “imagekit.io” first saved as a PNG and a GIF image and then superimposed on a multi-coloured background. Though this can be solved to some extent using dithering, with improved PNG support, GIF is unsuitable for images with transparent backgrounds. Because of the absence of partial transparency, the edges (specially rounded or too-detailed edges) get a poor jagged effect. GIF images support transparency by declaring a single colour in the colour palette as transparent ( index transparency). PNG8 images (discussed in the “Colours” section below) can support only index transparency whereas PNG24 images can support alpha channel transparency. Partial transparency makes the edges blend smoothly into the background. PNG images support transparency in two ways - inserting an alpha channel that allows partial transparency or by declaring a single colour as transparent ( index transparency). JPEG images don’t support transparency and are hence not usable for such cases. Hence it is desirable, that the background of these logos and icons is made transparent so that a single image can be used over multiple background variations. ![]() Logos and icons often need to be placed on backgrounds with variable colours. In a simple form, transparency indicates something that is completely invisible. If you look closely, there is a lot of noise around the right most tree top and the sky. However, if an image contains text or lines, where a sharp contrast between adjacent pixels is desired to highlight the proper shape, this lossy compression technique does not yield good results. Because JPEG compression works by averaging out colours of nearby pixels (read Discrete Cosine Transform), JPEG images are best suited for photographs and paintings of natural scenes where the variations in colour and intensity are smooth. Beyond this, the compression artefacts become more prominent. It can achieve compression ratios of 1:10 without any perceivable difference in quality. JPEG is a lossy compression specification that takes advantage of human perception. This noticeable reduction in quality or distortion of the image is called compression artefact. However, this compression ratio comes at a cost of reduced quality that becomes more evident after zooming in on the image. Lossy compression algorithms always have a superior compression ratio (the ratio of the size of a compressed image to the original image) as compared to lossless compression. data loss in lossy compression is irreversible. This is not the case in lossy compression i.e. In lossless compression, it is possible to reconstruct the original image from the compressed image because there is no information loss during compression. Choosing the correct format and compression is a major factor that determines image size.Ĭompression can be of two types - lossless and lossy. Use GIF format for images that contain animations.Īlmost all forms of data that we see on the internet - text, image, video etc. - are compressed to reduce the size of data and ensure faster transmission. Use PNG format for any image that needs transparency or for images with text & objects with sharp contrast edges like logos. Use JPEG format for all images that contain a natural scene or photograph where variation in colour and intensity is smooth. Understanding these major differences would help us deliver the best possible images to our website and mobile app users. However, these 3 image formats have significant differences amongst themselves thus making each of them suitable for specific use cases. Several statistics reports, including the one from HTTP Archive, indicate that these 3 formats together comprise of more than 95% of all images loaded on websites. In this post, we would only be looking at the three most commonly used image formats in websites and mobile applications - JPEG, PNG and GIF. I bet most of us wouldn’t have come across 90% of the image formats listed on Wikipedia. There are hundreds of image formats available each with a specific use case.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |