How to choose and use web image formats PNG, JPG, and GIF_HTML/Xhtml_Web page production

So which format among 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. Picture format

GIF

The most outstanding thing about 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 will not be lost. In addition, GIF supports translucency (fully transparent or fully Opaque).
According to Google, GIF is suitable for small or simple images (less than 10×10 or less than 3 colors).

PNG

First of all, PNG includes PNG-8 and True Color-PNG (PNG-24 or PNG-32). The biggest advantage of PNG over GIF is:

• Usually smaller in size
• Support alpha (fully transparent)

But we know that PNG does not support animation.

At the same time, please note that IE6 can support PNG-8, but when processing the transparency of PNG-24, it will appear gray. For related examples, please refer to sitepoint.

Usually saving images as PNG-8 will result in a smaller size than GIF at the same quality, and for fully transparent images we can only use PNG-24 now. But please pay attention when saving images in PNG-8 and GIF Make a comparison. Because the laws are not always correct.

JPG

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

After reading the above introduction, you should have a general understanding of which format to use to save which kind of pictures. To put it simply:

One sentence:For small pictures or basic elements of web pages (such as buttons), consider PNG-8 or GIF. For photos, consider JPG.