Using transparency PNG format in web design
Perhaps for some it is an anachronism, but with the same degree of confidence it can be argued that it is possible that someone will extract something for himself from this, but in essence:
This is a great article from Jeff Croft with my free translation.
PNG, GIF and JPEG
')
PNG format does not receive proper attention from the community of web designers and there is a quite understandable reason for this. Until recently, it was not possible to use all the advantages of the format and ensure its reliable operation in all browsers. But with the advent of PNG support in Internet Explorer 7 and some of the available JavaScript and CSS tricks for outdated browsers, we can use PNG images to significantly expand our design lexicon.
What is PNG?
What if I want to put my personal logo on all my photos? Yes, it is possible - by opening each image in Photoshop, applying the logo and resave the image. However, it will be hard to do when thousands of images are constantly updated, and, sometimes, I may be far away from my computer (for example, when I send photos from my cell phone to Flickr). Would it be great if the logo could be added automatically? Png can do it.
PNG is usually pronounced "ping" and means Portable Network Graphics. This is a format with minimal compression loss. In other words, it saves a graphic image with minimal file sizes without reducing the quality of the image. It was developed to replace the omnipresent GIF format, the legal use of which required a license from the producers of graphics software (now the patent on GIF / LZW has expired). PNG is an international standard (ISO IEC 15948: 2003) in the official recommendations of the W3C .
Moreover, being a free PNG format, the web designer offers various practical advantages over GIF:
- Better compression : For most images, PNG reaches a smaller file size than GIF
- Great color depth : PNG offers truecolor up to 48 bits, when in GIF we have only 256 color palettes
- Alpha channel transparency : When GIF offers only binary transparency, PNG allows for virtually unlimited transparency effects, offering an alpha channel for transparency.
It is appropriate to note that PNG does not allow for animation, as GIF does. But there is a standard Multiple-image Network Graphics (MNG), which allows it, but it is not so widely supported by web browsers and graphic editors.
If you are still interested, you can familiarize yourself with the continuation of the translation here .
This is a great article from Jeff Croft with my free translation.
PNG, GIF and JPEG
')
PNG format does not receive proper attention from the community of web designers and there is a quite understandable reason for this. Until recently, it was not possible to use all the advantages of the format and ensure its reliable operation in all browsers. But with the advent of PNG support in Internet Explorer 7 and some of the available JavaScript and CSS tricks for outdated browsers, we can use PNG images to significantly expand our design lexicon.
What is PNG?
What if I want to put my personal logo on all my photos? Yes, it is possible - by opening each image in Photoshop, applying the logo and resave the image. However, it will be hard to do when thousands of images are constantly updated, and, sometimes, I may be far away from my computer (for example, when I send photos from my cell phone to Flickr). Would it be great if the logo could be added automatically? Png can do it.
PNG is usually pronounced "ping" and means Portable Network Graphics. This is a format with minimal compression loss. In other words, it saves a graphic image with minimal file sizes without reducing the quality of the image. It was developed to replace the omnipresent GIF format, the legal use of which required a license from the producers of graphics software (now the patent on GIF / LZW has expired). PNG is an international standard (ISO IEC 15948: 2003) in the official recommendations of the W3C .
Moreover, being a free PNG format, the web designer offers various practical advantages over GIF:
- Better compression : For most images, PNG reaches a smaller file size than GIF
- Great color depth : PNG offers truecolor up to 48 bits, when in GIF we have only 256 color palettes
- Alpha channel transparency : When GIF offers only binary transparency, PNG allows for virtually unlimited transparency effects, offering an alpha channel for transparency.
It is appropriate to note that PNG does not allow for animation, as GIF does. But there is a standard Multiple-image Network Graphics (MNG), which allows it, but it is not so widely supported by web browsers and graphic editors.
If you are still interested, you can familiarize yourself with the continuation of the translation here .
Source: https://habr.com/ru/post/31284/
All Articles