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 size of compressed image to 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. are compressed to reduce the size of data and ensure faster transmission. CompressionĪlmost all forms of data that we see on the internet - text, image, video etc. Use GIF format for images that contain animations. 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. JPEG vs PNG vs GIF - which image format to use and when?

High quality pictures to gif