Optimize browser rendering: Specify the image size

Overview

Specifying the width and height for all images on the page can eliminate unnecessary reflows and redraw the page [repaints] to make page rendering faster.

Details

When a browser sketch a page, it needs to be able to flow, such as a replaceable element. The image size is provided, and the browser knows that irreplaceable elements nearby can even be used to render the page before the image is downloaded. If no image size is specified or the specified size does not match the actual size of the image, the browser will need to reflows and redraw the page once the image is downloaded. To prevent reflows, specify the width and height for all images in the HTML label or in CSS.

Suggestions

Specify the size of the image.

Do not use non-original image size to scale the image. If the actual size of an image file is 60x60 pixels, do not set the size to 30x30 pixels in HTML or CSS. If the image requires a small size, set it to a consistent size in the image editing software.

Be sure to specify the size of the image or its block-level parent Element

Be sure to set the size of the element or its block-level parent element. If the parent element is not a block-level element, the size is ignored. Do not set the size on the ancestor element of a non-Recent parent element.