mpoiiiiYou must have come into contact with many image formats during the development process. This article uses the simplest and most popular way to introduce several common formats of images. Including the most common ones we see: PNG, JPG, GIF, SVG, and the most popular and good performing ones: WebP, AVIF.
Common images can be roughly divided into two types, namely pixel images and vector images.
Pixel images represent images by storing information about each pixel in the image. JPG, PNG, WebP, and AVIF are all pixel images.
Vector images describe images through mathematical formulas and geometric figures (such as points, lines, curves, and polygons). SVG is a vector image.
Vector images can maintain high quality at any resolution without distortion. At the same time, vector images are easier to edit. You only need to modify the mathematical description to change the image. And because it is described by mathematical formulas, it does not need to be stored pixel by pixel, so it occupies less memory.
Comparison of magnification effects of vector images and pixel images:
1. PNG
PNG (Portable Network Graphics) is a lossless compressed bitmap image format. It supports transparent background and high-quality image display, which is very suitable for web pages and graphic design.
PNG image quality will not be reduced due to compression, which is suitable for images that need to maintain high quality. Usually the file size is larger because lossless compression retains more image information.
Features: high quality, large size
2. JPG
JPG (Joint Photographic Experts Group) uses lossy compression, which means that some image details are lost during the compression process to reduce the file size. Although this can significantly reduce the file size, the image quality will be reduced, especially after multiple edits and saves.
The JPG format is mainly a middle standard between measuring information loss and image quality. Try to reduce the image size while ensuring image quality.
Features: small size
3. GIF
GIF (Graphics Interchange Format), it supports up to 256 colors and can contain multiple frames to achieve simple animation effects. GIF images are often used in web design, social media, and messaging applications because they are small in size and have good compatibility.
GIF can be thought of as a moving picture, which contains multiple frames to achieve animation effects.
Features: Can achieve moving pictures
4. SVG
SVG (Scalable Vector Graphics) is an XML-based vector image format. Unlike bitmap images, SVG images are defined by mathematically described paths, graphics, and text, so they can maintain high quality at any resolution without distortion. SVG files are often used for images that require high scaling flexibility, such as icons, illustrations, and maps.
SVG is drawn by mathematics, not by one pixel at a time, so it can be enlarged without distortion. Suitable for maps and other images that need to be scaled.
Features: No distortion when zooming in and out
5. WebP
WebP is a very popular image format now, and it is almost a perfect solution. It is a modern image format developed by Google, designed to provide higher compression efficiency while maintaining image quality. It combines the advantages of lossy and lossless compression and is a very flexible format.
WebP has a smaller file size, clearer image quality, and supports dynamic frames and background transparency.
If WebP has any disadvantages, it is that the browser compatibility is not as good as the above formats. Although modern browsers generally support WebP, there may still be compatibility issues in some older browsers or specific environments.
The compatibility issue can be solved by the server. The static resource server determines whether the device supports the WebP format, and then transmits the WebP format resources or the more compatible PNG or JPG according to the compatibility.
6. AVIF
AVIF (AV1 Image File Format) is a very advanced image format that provides excellent compression efficiency and image quality. It is particularly suitable for application scenarios that require efficient image compression and high-quality display.
Its advantages are mostly similar to WebP, but it has high dynamic range (HDR) support, which can meet the needs of high-quality photography.
Of course, low compatibility is also its biggest disadvantage.
Summary
In general, the difference between the most commonly used PNG and JPG is whether there is information loss in compression. PNG will not have information loss and supports transparent background. GIF is suitable for simple, short, silent animations, suitable for rapid dissemination on the Internet and social media.
WebP and AVIF are newly created image formats. They have many advantages and avoid disadvantages such as information loss. However, due to their late appearance, they are not as compatible as the traditional information formats and may not be displayed on old devices.
The difference between SVG and them is even greater. SVG is a vector graphic format that describes images by using mathematical formulas and geometric figures.
Of course, there are more image formats, but those are not the most commonly used. If you need to know more, you can go to Wikipedia to find more information.
