Common Picture Formats

Let’s talk about some common Web image formats: GIF, JPG, PNG, webp

Picture Application Scenario

General display pictures, ICONS, etc

The sample

Code: github.com/js-fu/js-fu…

1. HTML common static page

Js – fu. Making. IO/fe – img / 1. Ht…

The first thing you see is that this is a normal static page, a graphic list. If the page is displayed in Disable Cache and Slow 3G environments, the following performance information is displayed:

Analyzing the figure above, it can be seen thatDOMContentLoadedThe event was executed at 2.37 seconds.loadThe event is not executed until all image resources have been loaded, which is 29.81 seconds. If you listenloadEvent, to wait a long time to execute, the experience is poor. And static page content is fixed, inflexible.

DOMContentLoaded and Load Events DOMContentLoaded: The DOMContentLoaded event is fired when pure HTML is fully loaded and parsed, without waiting for the stylesheet, image, or subframework to complete loading. Load: The load event is triggered when the entire page and all dependent resources, such as style sheets and images, have been loaded. It differs from DOMContentLoaded, which is triggered as soon as the page DOM has loaded, without waiting for dependent resources to load.

To optimize the

2. HTML uses Ajax to obtain graphic list data

Js – fu. Making. IO/fe – img / 2. Ht…

The title of this page, “Graphic List”, is fixed. Resource simulation with Ajax access. If the page is displayed in Disable Cache and Slow 3G, the following performance is displayed:

Looking at the figure above, you can see that the DOMContentLoaded event executes in 2.38 seconds, similar to 1.html. The load event is advanced to 2.39 seconds because the load image resource is being loaded asynchronously. However, there is still a problem, the image is not visible range of load, unnecessary, you can wait until the page scrolling, such as the image is visible to the lazy load.

3. HTML lazy loading

Js – fu. Making. IO/fe – img / 3. Ht…

This page, on the basis of 2.html added lazy loading function. When the initial page was rendered, only the two images that appeared on the first screen were downloaded.

4. HTML preloading

Js – fu. Making. IO/fe – img / 4 ht…

This page, on the basis of 2.html has added the preloading function. The first screen displays the loading mask and the progress bar for loading resources. After loading, the actual page is displayed. The pictures in the graphic list are all pre-loaded resources, which makes browsing much smoother.

5. HTML Sprite figure

Js – fu. Making. IO/fe – img / 5/5….

For some small pictures, such as ICONS, Sprite diagram can be used to combine a number of small pictures to reduce network requests.

6.html iconfont

Js – fu. Making. IO/fe – img / 6. Ht…

For ICONS, iconfont can also be used instead of pictures. ICONS can be changed in size, color and other styles like fonts.

7.html base64

Js – fu. Making. IO/fe – img / 7/7….

For some very small images, you can use the Base64 scheme to write the base64 encoding of the image into HTML and CSS. Can reduce network requests.

8 Check device network status. Use the OSS service and 80% quality pictures

Network status MDN NetworkInformation

Ali Cloud OSS, can realize the image quality transformation, blur, rotation, cropping and other operations.

other

When deployed to a production environment, CDN and GZIP can be used for optimization.