How can I select a PNG, JPG, or GIF webpage image format?

We know that images play a very important role in the process of making webpages. Although the speed of the network is getting faster and faster, the image size is still one of the most important reasons for slow webpage loading.

Which of the following formats is used as a candidate for GIF, PNG, and jpg? Which image format can make the image smaller but have better image quality?

1. Image Format

GIF

The most prominent part of GIF is that it supports animation, and GIF is also a lossless image format. That is to say, after you modify the image, the quality of the image is not lost. in addition, GIF supports translucent (fully transparent or completely transparent ).
According to Google, GIF is suitable for small or relatively simple images (images of 10 × 10 or below 3 colors ).

PNG

First, PNG includesPNG-8AndTrue Color-PNG(PNG-24 or PNG-32). The biggest advantage of PNG over GIF is:

• Usually smaller
• Support for alpha (full transparency)

However, we know that PNG does not support animation.

At the same time, it should be noted that IE6 can support PNG-8, but will be displayed in the transparent processing of the PNG-24 will be gray. Examples can refer to sitepoint.

Usually the image is saved as a PNG-8 will get a smaller size than GIF at the same quality, and the fully transparent picture we can only use PNG-24 now. but please note that the Save picture is compared in PNG-8 and GIF. because the law is not always correct.

JPG

JPG can display more colors than GIF and PNG, and get better compression at the same time. Therefore, JPG is suitable for storing digital photos. but note that it is a distortion compression, which means that each 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 save and which image to save. Simply put:

One sentence:Small pictures or basic elements (such as buttons) of the page, consider the PNG-8 or GIF. picture then consider JPG.