Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Specifying image dimensions in HTML vs CSS for page loading

I've learnt from somewhere a long time ago that specifying width and height for <img> elements in an HTML document speeds up and improves the page loading experience, and have generally kept to this practice:

<img src="" width="100" height="100" />

I'm now faced with a situation where I have a very large number of images on a single page, and I'd prefer to set the dimensions via CSS for both easier control and less repetitive HTML code:

.whatever img {width: 100px; height: 100px;}

Although this isn't a hugely serious issue, I'm wondering whether declaring the dimensions in CSS will have the same benefits as declaring the dimensions in HTML, or whether it ought to just be done in HTML directly?

Any insight would be welcome.

Thanks

like image 404
Tom Avatar asked Nov 26 '10 18:11

Tom


People also ask

Is it better to resize an image in HTML or CSS?

It's usually better to use CSS to resize images in HTML. You can do this with the height and width properties. This image is resized using the CSS 'width' and 'height' properties.

Is it a good idea to use the IMG tag's length and width attributes for every image or is it better to let the browser determine the size Why?

Thanks to some recent changes in browsers, it's now well worth setting width and height attributes on your images to prevent layout shifts and improve the experience of your site visitors.

How does specifying the height and width of an image help in faster loading of a Web page?

No, it doesn't speed up page load. But, it does prevent the 'effect' of the page building itself and breaking/fixing the layout as images are loaded. Putting the image dimensions in tells the browser to reserve the place where the image is going.


2 Answers

I guess if the style sheet is available immediately, the image dimensions will immediately apply to the layout, which is the whole point of the exercise.

That guess is supported by Google's pagespeed rules. They seem to be fine with specifying images that way (emphasis mine):

Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.

When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.

like image 84
Pekka Avatar answered Nov 07 '22 07:11

Pekka


The crucial difference between defining width and height in an attribute (as opposed to in CSS) is that it then becomes data, not a presentation parameter. Just imagine managing a following stylesheet

img[src='/images/tree.jpeg'] {
    width: 100px;
    height: 100px;
}

This needlessly entangles CSS with images. It also restricts adaptive layout, i.e. you can no longer have not-yet-loaded images take up correct space when one of their dimensions is inferred (e.g. width: 100%).

Also, consider CSS rules such as object-fit. Confusion about what width and heigth style properties then mean may arise.

like image 20
transistor09 Avatar answered Nov 07 '22 07:11

transistor09