Search code examples
htmlimagegoogle-chromegoogle-chrome-devtoolsimage-resolution

How can adding image resolution to the img tag improve network utilisation?


Google Chrome has a tab in it's built in Developer Tools, and one of the audits are telling me that the Network Utilization can be improved by setting the specific width and height to ALL images on the page.

Chrome Audits

How true is this information and how does this change things?


Solution

  • Setting height and width will do absolutely nothing for network utilisation.

    It will, however, allow the browser to lay the page out correctly before downloading the images (since it won't have to wait to download the image before it can know what size the image is). This can avoid reflowing the page or leaving it blank until the image size is known.