Use progressive pictures
There are many aspects of front-end performance can be optimized, and that these optimization is to bring the user experience improvement. Today we want to talk about something that does not give the performance to bring improvement, but it can improve the user experience to a certain extent.
Reference blog
Scene: the page is accessed or if a larger picture Suman we will see pictures loaded up there is a clear process, is presented line by line from top to bottom, this is a signal to the user to wait loading still pictures, and the picture is not loaded out of a blank part of the show, is not conducive to the experience, here's a look at how progressive pictures alleviate this situation
Recognize progressive pictures
Progressive pictures is actually a JPEG format images, the difference between ordinary and JPEG images are as follows:
- When ordinary picture rendering data in the order from top to bottom when the progressive scan storage is displayed until all the data has been read is completed, it completes the display of the whole picture.
- Pictures progressive rendering, will first show vague outline of the whole picture, with the increase in the number of scans, the picture becomes more clear. The main advantage of this format is that when the network is slow, you can see the outline of the picture to know what is being loaded picture is probably yes.
He said rumor, to see results
- Generate the same two pictures, both JPEG format
1, the general picture is generated
2, generates the progressive image (ps directly saved as JPEG, continuous check)
- Deployed to the server to see results
Effect Description: You can see from the above, the size of the two pictures is about the same, a progressive picture is beginning to show the effect is as if all of a sudden it came out fully loaded, just looks a little fuzzy. The general picture is loading progressive scan, it has been rendered partially visible.
- final effect
to sum up
From the point of view seems intuitively fast progressive pictures to load a little, which is progressive pictures can be achieved experience to enhance the effect.