There are many optimizations to be made in terms of front-end performance, and these optimizations result in improved user experience. What we’re going to talk about today is not going to improve performance, but it’s going to improve the user experience to some extent.

Refer to the blog

Scene: When they visit the page if we will see the larger picture or slow network images to load up there is a significant process, from top to bottom line by line, the signal to the user is again, and so on is still in loading images, and images without load out part of a blank, is not conducive to experience, the following look at progressive picture how to alleviate this situation

Recognize progressive images

Progressive images are actually JPEG images, and the differences between normal JPEG images are as follows:

  • When ordinary images are rendered, data will be displayed in the order of storage from top to bottom, until all the data are read, and the display of the whole picture is completed.

  • In the progressive image rendering process, the blurred outline of the entire image is displayed first, and the image becomes clearer and clearer as the number of scans increases. The main advantage of this format is that on a slow network, you can see the outline of the image and know roughly what image is being loaded.

Talk about nothing. See what happens
  • Generate two identical images, both in JPEG format

1. General picture generation

2, Progressive image generation (direct PHOTOSHOP save as JPEG, check continuous)

  • Deploy to the server to see the effect

Effect description: As you can see from the above, the two images are about the same size, and the progressive image appears to load completely at first, but looks a little blurry. Normal images are scanned line by line and rendered portions are visible.

  • The final result

conclusion

Intuitively, it seems that progressive images load faster, and this is the experience enhancement that progressive images can achieve.