Detailed explanation of various types of image formats such as JPG, GIF and PNG
|
Everyone knows that images on web pages are generally in jpg, gif and png formats. What are the differences between them? After reading the following content, you may have your own conclusion. -------------------------------------------------------------------------------- GIF format features : Transparency Gif is a Boolean transparency type, which means it can be fully transparent or fully opaque, but it is not translucent (alpha transparency). Animation The Gif format supports animation. Lossless Gif is a lossless image format, which means you can do anything with the gif image without losing image quality. Horizontal Scan Gif is compressed using an algorithm called LZW. When compressing gif, pixels are compressed horizontally from top to bottom. This means that under the same conditions, horizontal gif images are smaller than vertical gif images. For example, a 500*10 image is displayed progressively with smaller intervals than a 10*500 image. Gif supports selective interval progressive display. From the above characteristics, it can be seen that gif images with only 256 colors are not suitable as photos. They are suitable for graphics that do not require high colors. -------------------------------------------------------------------------------- Jpeg format features : Transparency It does not support transparency. Animation It also does not support animation. Lossless Except for some operations such as rotation (only 90, 180, 270 degrees), cropping, changing from standard type to advanced type, and editing the original data of the image, all other operations on the JPEG image will cause its quality loss. Therefore, we generally use png as a transition format during the editing process. Interlaced progressive display It supports interlaced progressive display (but IE browser does not support this attribute, but IE will display it when the entire image information is fully arrived). From the above we can see that Jpeg is the most suitable for photographic images on the web and in digital cameras. -------------------------------------------------------------------------------- Png format features : Transparency Png fully supports alpha transparency (transparent, semi-transparent, opaque), although there are two quirks in IE6 (discussed in detail below): Animation It does not support lossless animation PNG is a lossless image format, which means you can do anything with the PNG image without losing image quality. This also makes PNG a transitional format for JPEG editing. Horizontal scanning. Like GIF, PNG is also horizontally scanned, which means that horizontally repeated colors are smaller than vertically repeated colors. Interval progressive display. It supports interval progressive display, but it will cause the image size to become larger. The first type of PNG is called PNG8 (Boolean transparency), which can be simply understood as a static GIF. They both have only 256 colors and support indexed transparency, which is to specify whether a pixel is transparent or not. The second type of PNG is also called PNG8 (Alpha transparency). You can specify the transparency of a pixel, for example, 50% transparency. The advantage is that it is smaller than PNG24/32, but the effect is the same. The disadvantage is that IE6 does not support it well, and will display semi-transparent pixels as fully transparent. The third type of PNG is called PNG24 PNG24 is not transparent, but has many colors, more than 256 colors. The png24 exported in Photoshop is actually png32. The fourth type of PNG is called PNG32 Like Photoshop's PSD, it is the default source file format for Fireworks, containing layer and channel information. The difference from PNG24 is that it has more transparency information. The disadvantage is that IE6 does not support it well, and will display transparent areas as a blue-gray background: it can only be done through the AlphaImageLoader method that affects performance and requires special tags (VML). Note : Boolean transparent png8 can be displayed normally in any browser (just like gif). Alpha transparent png8 is incorrectly displayed as fully transparent in browsers other than IE6 and below, but all other browsers can display it normally. Photoshop can only export PNG8 with Boolean transparency. (Some png8 may have rough edges under IE6, because text, rounded corners, etc. usually have the effect of weakening the edges. You can trim them before exporting) Fireworks can export both Boolean transparent PNG8 and alpha transparent PNG8. -------------------------------------------------------------------------------- Comparison of other image formats with PNG : It is well known that GIF is suitable for graphics, JPEG is suitable for photos, and the PNG series is suitable for both. Compared to GIF For the same color value, gif format images will be smaller than png32 format images. But png8 is the best choice. PNG8 has all the features of GIF except that it does not support animation. However, its advantage over GIF is that it supports alpha transparency and better compression. So, in most cases, you should use PNG8 instead of GIF (except for very small images where GIF will compress better). Compared to JPEG JPEG has better compression than full-color PNG, which makes JPEG suitable for photos, but it is easy to cause quality loss during the editing of JPEG, so full-color PNG is suitable as a transitional format for editing JPEG. |
<<: Summary of CSS counter and content
>>: Implementation of services in docker accessing host services
Recommend
Use of Linux relative and absolute paths
01. Overview Absolute paths and relative paths ar...
Troubleshooting process for Docker container suddenly failing to connect after port mapping
1. Background Generally, for Docker containers th...
A brief discussion on the implementation principle of Webpack4 plugins
Table of contents Preface know Practice makes per...
Docker creates MySQL explanation
1. Download MySQL Image Command: docker pull mysq...
MySQL 8.0.12 installation and configuration graphic tutorial
Recorded the download and installation tutorial o...
SpringBoot integrates Activiti7 implementation code
After the official release of Activiti7, it has f...
Jenkins packaging microservices to build Docker images and run them
Table of contents Environment Preparation start 1...
The process of SSH service based on key authentication in Linux system
As we all know, SSH is currently the most reliabl...
MySQL database architecture details
Table of contents 1. MySQL Architecture 2. Networ...
Docker deploys mysql to achieve remote connection sample code
1.docker search mysql查看mysql版本 2. docker pull mys...
Linux bridge method steps to bridge two VirtualBox virtual networks
This article originated from my complaints about ...
How to view version information in Linux
How to view version information under Linux, incl...
What are Web Slices?
IE8 new feature Web Slices (Web Slices) Microsoft...
Detailed tutorial on installing centos8 on VMware
CentOS official website address https://www.cento...
MySQL column to row conversion and year-month grouping example
As shown below: SELECT count(DISTINCT(a.rect_id))...