PNG stands for portable network graphics. This is a lossless compressed bitmap image format. In simple terms, it is a way to save graphic images that reduces file size without compromising image quality. It was originally created as an alternative to the omnipresent GIF format, which required a patent license for image software producers to legally use it (GIF/LZW patent is now expired). PNG is also an international standard and officially recommended by the W3C. In addition to being a freely accessible format as many websites offer free PNG downloads, PNG offers several practical benefits to GIF for the web designer. For most images, PNG has a smaller file size than GIF. PNG file formate offers up to 48 bits of true color, while GIF only allows 256 color palettes. While the GIF offers only binary transparency, PNG allows for virtually unlimited transparency effects by enabling the alpha channel for transparency. It is worth noting that PNG does not allow animation, as GIF does. The Multiple image Network Graphics (MNG) format allows for both but is not widely supported by web browsers or imaging software. Let us take a look at some of the great uses of PNG in web design. Over the years, a gradient, which is a smooth transition between two or more colors, has become a web designer's best friend. Especially popular is the subtle, almost unnoticeable gradient filling, which adds a sense of depth and texture. GIF is sometimes is a good option for gradients. If the gradient is a simple two-color fade, the GIF generally works well. However, the GIF's 256 color gamut often causes noticeable and ugly banding in more complex gradient transitions. JPEG, on the other hand, can offer quite nice gradients, but often at the expense of the large file size. And while JPEG gradients are generally pretty good, keep in mind that JPEG uses lossy compression, which means that the reproduced image is never as high quality as the original, noncompressed image Sometimes it is necessary to create an image that works equally well on different backgrounds. Some common examples are logos and icons. These conditions have traditionally been the domain of the GIF file, but there are several reasons why PNG might be a better option. When it comes to filing size for logos and simple artwork, PNG is the best. PNG's offer native transparency makes it easy to create a file that works on any background. PNG also offers binary transparency, similar to GIF, but also offers a much more interesting alpha channel variety, where pixels can be partially transparent, not just on or off. Using the latter increases the file size, sometimes beyond a binary transparent GIF, but also allows you to initialize the edges of the artwork, which is better for placement over the background.
How do web designers make use of PNG transparency?
PNG stands for portable network graphics. This is a lossless compressed bitmap image format. In simple terms, it is a way to save graphic images that reduces file size without compromising image quality. It was originally created as an alternative to the omnipresent GIF format, which required a patent license for image software producers to legally use it (GIF/LZW patent is now expired). PNG is also an international standard and officially recommended by the W3C. In addition to being a freely accessible format as many websites offer free PNG downloads, PNG offers several practical benefits to GIF for the web designer. For most images, PNG has a smaller file size than GIF. PNG file formate offers up to 48 bits of true color, while GIF only allows 256 color palettes. While the GIF offers only binary transparency, PNG allows for virtually unlimited transparency effects by enabling the alpha channel for transparency. It is worth noting that PNG does not allow animation, as GIF does. The Multiple image Network Graphics (MNG) format allows for both but is not widely supported by web browsers or imaging software. Let us take a look at some of the great uses of PNG in web design. Over the years, a gradient, which is a smooth transition between two or more colors, has become a web designer's best friend. Especially popular is the subtle, almost unnoticeable gradient filling, which adds a sense of depth and texture. GIF is sometimes is a good option for gradients. If the gradient is a simple two-color fade, the GIF generally works well. However, the GIF's 256 color gamut often causes noticeable and ugly banding in more complex gradient transitions. JPEG, on the other hand, can offer quite nice gradients, but often at the expense of the large file size. And while JPEG gradients are generally pretty good, keep in mind that JPEG uses lossy compression, which means that the reproduced image is never as high quality as the original, noncompressed image Sometimes it is necessary to create an image that works equally well on different backgrounds. Some common examples are logos and icons. These conditions have traditionally been the domain of the GIF file, but there are several reasons why PNG might be a better option. When it comes to filing size for logos and simple artwork, PNG is the best. PNG's offer native transparency makes it easy to create a file that works on any background. PNG also offers binary transparency, similar to GIF, but also offers a much more interesting alpha channel variety, where pixels can be partially transparent, not just on or off. Using the latter increases the file size, sometimes beyond a binary transparent GIF, but also allows you to initialize the edges of the artwork, which is better for placement over the background.