[Blurred and clear Web Front-end optimization images] See how my QQ space displays photos [finishing] Details JPG, GIF, and PNG image formats

Preface

This articleArticleIt is estimated that it will not be too long, there is a risk of removing the home page, but the old man (It is said that our real ye xiaochai is actually over 100 years old.. So I'm here!

Digress:Today, we also read a front-end interview question, and I wanted to find a few more questions, but I didn't find any suitable ones. Please leave a message for me if you have any good front-end questions, let's analyze the progress of the interview questions!

At the front-end time, I once discussed with our products that aimed at image compression, because I was a little white on pictures or PS, therefore, when I made an advertisement image, 100 or more K of images were directly uploaded. As a result, our colleagues made a compression, and there were only 50 or more K images, this communication has a little experience in image compression, and laid the groundwork for the second communication. The second is the study of the image from fuzzy to clear.

Webpage image format

Here I will popularize our image format first. refer:

[Sorting] Details JPG, GIF, and PNG image formats

GIF

Transparent type, can be completely transparent or completely transparent, don't look for him if translucent, and this guy can do animation.

GIF is a lossless image format.

GIF adopts LZWAlgorithmCompress. When the GIF image is compressed, the pixels are compressed from top to bottom. That is, the horizontal GIF image is smaller than the vertical one (500x10x10x500)

GIF supports progressive display of selectable intervals

JPEG

Transparent

Animation not supported

This image is very easy to lose

Supports step-by-step display (ie is not supported, and IE will display the entire picture after it is completely reached)

Jepg is especially suitable for photography pictures and digital albums on the web.

PNG

Supports various transparency, but filter processing is required for bugs in IE6.

Animation not supported

No operation will consume its quality

Incremental enhancement at intervals is supported, but the image size will increase:

 
Png8 (Boolean transparent) is equivalent to a static GIF with only 256 colors. It supports index transparency, that is, specifying a pixel is not transparent. png8 (alpha transparent) can specify the transparency of the pixel, for example, the advantage of 50% transparency is that it is smaller than png24/32, and the effect is the same. The disadvantage is that IE6 does not support png24 opacity, and many colors are more than 256 colors. png24 exported by PS is actually png32png32.
Like PSD in PS, it contains layers and channel information
 

The above is some information about the image. We will probably understand it, where I will talk about the PNG, especially the staggered PNG.

PNG staggeredWhen you use a browser to enjoy the image, the image will be gradually displayed in a way that is gradually changed from fuzzy to clear. The advanced staggered method of PNG enables horizontal and vertical image imaging on the screen, accelerating the Downloading speed. function: the staggered method can make the download time feel shorter, make sure the viewer is downloading. PNG does not have this function if it is not staggered or not.

Image Display

We know that the IMG tag will not be loaded when the Dom is loaded. Instead, the IMG Tag starts to load only when the DOM structure is complete and a rendering tree is formed (the layout ends.

The order of loading is from top to bottom, which means that we can see the image first and then the image below, but obviously this is not a good display method, if we can see fuzzy images at the beginning and then gradually become clearer, isn't it much better?

It must be a lot better...

So we discussed how to implement it, but we talked about the staggered PNG. Although I believed it at the time, because I didn't know much about it, I thought it was a bit wrong!

Users' questions

Now let's imagine the practice of QQ space (This is pure nonsense.) As a user, I uploaded images.

① I want to use my QQ space as a place for cloud storage and upload my 2 m graduation photo

② The Space generates a thumbnail and a large image as needed.

③ First, we can see the thumbnail, and then the big image. When we click the source image, we can see my first 2 MB photo.

The above is the logic I thought. If QQ space is not the logic, we will not pay attention to it, because from the perspective of users, I must want to keep my original things.

Now, how does the QQ space work ??? That is too complicated and we will not pay attention to it. Here I will explain how I did it.

Blur to clear images

This is generally the case in our photo album:

The thumbnail is shown above and the big image is shown below. Here we can actually make a fuss about the thumbnail !!!

Can we use a thumbnail to "replace" the big image before it is displayed? Let's look at our logic:

① The thumbnail is first loaded at the top of the album, even below, because the thumbnail size is very small and can be quickly loaded.

② Initially place the thumbnail in the big image display position and set its size to the big image size (this size can be obtained in multiple ways, such as computing ends when uploading)

② Place the big picture layout before the thumbnail, because the thumbnail has been displayed, but it seems a bit fuzzy because it is too large, but the big picture is slowly loaded from top to bottom to become clear, giving a blur to clear the illusion

④ Process ended

So let's take a look at our QQ space. We used speed limiting tools to speed up Firefox:

PS: The opening space is very slow after the speed limit...

How are you doing? It's slow enough!

Pay attention to the changes from top to bottom, and I found evidence here.

PS: Why am I still slow when I open the limit on the Internet? It seems that this is why I am slow...

Please refer to the three parts circled in red box here:

The first is the album display container, which is located by relative

The second is the small thumbnail on the top, which is very small:

Let's see, here we are talking so much about people .....

The third frame is the main character:

Conclusion

From the perspective of its entire layout, we thought it was the same. He did a lot of work like this, for example, the image navigation above:

We can see that the thumbnail shown above has long been displayed. When you click the next one, the thumbnail will be displayed without any blank fault. Then, the large image is slowly displayed so that users are willing to stop there.

Conclusion

Well, today we have studied an interview question, and later we have studied the solution from fuzzy to clear pictures,If you have a better solution, do not hide it.!

Well, if you have good front-end questions, please leave them here. I 've been working on this kind recently, and I will be able to help you in the future. Let's leave a old man's yuzhao!