Specifying image dimensions to improve browser performance

Question

I recently ran an audit on my web site using Google Developer Tools. My images are all the same size (500 horizontal by 300 vertical pixels) so I thought it would be better if I left out the image size attributes as there would be no need to calculate an image size when it already is the correct size.

Under Networking Utilization, Specify Image Dimensions I see the following

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

Now, I'm confused. Should I really add width and height attributes to my images, even though they are already the right size? It seems redundant.

Answer 1

Browsers download data in parallel and try to start rendering the page as soon as possible.

If you do not specify the size, the browser has no idea how large the image is going to be until after the image download is fully complete.

This delay forces the browser to repaint or reflow the layout - delaying the page load time.

The more images with this issue - the slower the page will load.

If you specify the image sizes, either in HTML or CSS, then browser can avoid repaints and reflows of content.

Due to this you should always specify image sizes. Google has some tips on this.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

For more on the browser rendering process see: http://taligarsiel.com/Projects/howbrowserswork1.htm

Not sure how up to date this is but gives insights into how browsers work and why you may want to do things like not use inline CSS to override style sheets.

Answer 2

Responsive Design does not normally use any width or height attributes

Google Development Tools is a guide and you shouldn't need to enforce everything you read on their site, in fact some of the stuff is outdated. The majority of responsive websites do not use width or height because they want the images to adapt to the screen size and by using fixed width and height using <img> which would dampen user experience and Google has declared this one of the most important factors.

CSS Workaround

You could opt to use a block level element that has the width and height, personally I wouldn't use one but here is what Google says about block level.

Be sure to specify dimensions on the image element or block-level parent Be sure to set the dimensions on the element itself, or a block-level parent. If the parent is not block-level, the dimensions will be ignored. Do not set dimensions on an ancestor that is not an immediate parent.

I imagine this would look something like:

Static Design .ic {width:500px;height:500px;}

Responsive Design:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

Then you would need to use JavaScript or another solution to detect viewpoint and serve 4 different versions of the image, which again is less than practical. So if you are using responsive design then I would safely go ahead and not bother adding width and height so that your website is fluid no matter what screen views it.

Answer 3

I just answered a similar question on Wordpress Stack Exchange. Reposting it here (admins/moderators: if this isn't allowed, let me know the proper way to help).

doesn't really means you need to specify width and height in the html. What it means is that is you gotta reserve te proper space and when the image is loaded, the browser doens't have to reflow and repaint the page.

Besides, if you hardcode the dimensions, it kinds of defeats responsive behaviour. If your layout is not responsive, it's ok, but if you want to keep some responsiveness, you could use only CSS to achieve the results.

Most of time, using both width and max-width:100 will do the work, but this post from Smashing Magazine has an interesting technique: instead of using max-width:100%, you can use The Padding-Bottom Hack :

"With the technique, we define the height as a measure relative to the width. Padding and margin have such intrinsic properties, and we can use them to create aspect ratios for elements that do not have any content in them. Because padding has this capability, we can set padding-bottom to be relative to the width of an element. If we also set height to be 0, we’ll get what we want. [...]

The next step is to place an image inside the container and make sure it fills up the container. To do this, we need to position the image absolutely inside the container, like so:"

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 4

The process goes something like this:

1. read .html file
2. from .html file header, read .css, .js files (.js should be AFTER .css...)
3. read img and script from the page

Thus, image tags are read "late". However to calculate the formatting of your page, having the size of the image is a good thing (otherwise browsers use a "random" size such as 1x1, 25x25, ... whatever the browser has programmed.)

So to avoid having a page that looks broken until the images get read, putting the width and height attributes allow the browser the calculate the proper page layout immediately. This is why it is a good idea to have them there, even if they are the same sizes.