图像的高度和宽度自动吗？

Question

Is it possible to make my img tags generate their width and height attributes automatically, for performance purposes?

Usually, articles on web performance state that an image that includes its width and height attribute tags may load faster, relieving the browser from having to search for those values during the loading process.

Answer 1

The width and height attributes do not make the image load faster, and the browser is not "searching" for those values. What adding them does do is create a placeholder on the page that allows the browser to render other elements on the page in their proper places without having to reflow the page after the image finally loads.

To answer your question, there's no way to automatically generate these attributes, aside from some server-side solution that retrieves the image width and height from the file and writes the attributes to the page based on that. However, unless you're already doing other image processing (generating a thumbnail for instance), this is overkill and will likely waste more time on the server-side than you will save on the client-side.

Additionally, in certain scenarios, such as implementing responsive designs, it's actually preferable to not add the attributes, since you need to leave it up to the browser to determine how the page should flow and the image should display based on the resolution of the device.

Answer 2

I believe is not a question of a faster loading but probably of a faster rendering...

Anyway, you could use jQuery to generate those attributes but it won't probably change anything as jQuery takes time also to change those attributes and the images should be already loaded to get its dimensions.

From the API :

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.