How to choose and use PNG, JPG, and GIF as web image formats

So which one of these formats, GIF, PNG, and JPG, should we choose as a candidate format, and which image format can make the image smaller but have better image quality?

1. Image Format

GIF

The most outstanding feature of GIF is that it supports animation. At the same time, GIF is also a lossless image format, which means that after you modify the image, the image quality is not lost. In addition, GIF supports semi-transparency (fully transparent or fully opaque).
According to Google, GIFs are suitable for very small or simple images (less than 10×10 or with less than 3 colors).

PNG

First of all, PNG includes PNG-8 and true color PNG (PNG-24 or PNG-32). The biggest advantages of PNG over GIF are:

• Usually smaller in size
• Support alpha (full transparency)

But we know that PNG does not support animation.

Also note that IE6 can support PNG-8, but will display gray when processing PNG-24 transparency. For related examples, please refer to sitepoint .

Generally, images saved as PNG-8 will be smaller than GIF at the same quality, and for fully transparent images we can only use PNG-24 now. But please be careful when saving images in PNG-8 and comparing them with GIF. Because the law is not always correct.

JPG

JPG can display more colors than GIF and PNG, and it is well compressed, so JPG is very suitable for saving digital photos. But please note that it is a lossy compression, which means that every time you modify the image, it will cause pixel distortion.

After reading the above introduction, you should have a general understanding of which format to use to save which image. In short:

Bottom line: For small images or basic web page elements (such as buttons), consider PNG-8 or GIF. For photos, consider JPG.