How to Use _ HTML/Xhtml _ to create a webpage in PNG, JPG, and GIF formats

Source: Internet
Author: User
We know that images play a very important role in the process of making webpages. although the network speed is getting faster and faster, the image size is too large, which is 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.