Browser picture rendering optimization

Why use the Height and Width properties to specify the image size

Have you seen the content when the document is loaded, it will display irregular movement. The reason is because the browser is constantly re-adjusting the layout of the page in order to display each loaded image. The browser determines the size of the image by downloading and resolving the width and height of the image, and then leave a corresponding rectangular space in the display window. The browser will then adjust the display layout of the page to insert the image into the display. This also tells us that images are independent files, which are independently loaded with the source files.

But this is not a way that the most effective display document, because the browser must check each image file before displaying adjacent and later documents, and calculates their screen space. This may bring a very large latency to the display of the document, thus interrupting the user’s reading.

For developers, a more effective way is to specify the size of the image by tag’s Height and Width properties. In this case, the browser reserves position before downloading the image, so that the display of the document can be accelerated, and mobile phone can be avoided. Both attributes require an integer value and represent the image size in pixels. The order of these two attributes appear in the label is not important.

Simply put, specify the width and height of all images in the page to eliminate unnecessary reflows and re-draws page [Repaints] to make the page rendering speed faster.

When the browser is checked, it needs to flow, such as an alternative element such as a picture. The picture size is provided, the browser knows to surround the nearby irreplaceable elements, and even start rendering the page before image download. If there is no specified image size, or if the specified size does not meet the actual size of the picture, once the image is downloaded, the browser will need the reflows and re-draw the page. In order to prevent REFLOWS, the width and height are specified in the HTML tab or in the CSS.

HEIGHT and WIDTH properties

Although the Tag HEIGHT and WIDTH attributes improve performance and make some tips, there are still some tricky negative effects when using them. Even if the user has turned off the function of automatically downloading the image, the browser still is displayed for the space reserved for the image at the specified size. This is usually an empty frame that leaves the reader, there is a meaningful icon, indicating that this is the location of the image. At this time, the page will look very bad, just like it is not completed, and most of the content is useless. If you do not need these specified sizes, the browser will only place an image icon in the text so that there are at least some texts in the display.

We have no solutions for this problem, you can only emphasize a little, just use the Alt property and some descriptive text so that the reader knows what is missing here. We still recommend that you use these dimension properties because we encourage everything to improve network performance.

It is recommended to specify the size of the image itself.

Do not use non-picture raw sizes to zoom pictures. If a picture file actually has a size of 60 ¡Á 60 pixels, do not set the size of 30 ¡Á 30 pixels in HTML or CSS. If the picture requires a smaller size, in the image editing software, set the consistent size (see Optimize the image for details.)

About this, a few pictures or scales have little effects, if it is a popular waterfall row version, and the picture scale is relatively large, Chrome can’t help.

It is recommended to specify the size of the picture or its block-level parent element.

Be sure to set the element itself, or the size of its block-level parent element. If the parent element is not block-level elements, the size will be ignored. Do not set the size on a ancestors of a non-nearest parent element.

Extended reading:

Optimize browser rendering:

What are the differences in pictures of different browsers?