[ACCEPTED]-Where to specify image dimensions for fastest rendering: in HTML or in CSS?-rendering
According to Google Page Speed, it does not really matter 25 if you specify the dimensions via CSS or 24 HTML, as long as your CSS targets the IMG 23 tag itself and not a parent element :
When 22 the browser lays out the page, it needs 21 to be able to flow around replaceable elements 20 such as images. It can begin to render a 19 page even before images are downloaded, provided 18 that it knows the dimensions to wrap non-replaceable 17 elements around. If no dimensions are specified 16 in the containing document, or if the dimensions 15 specified don't match those of the actual 14 images, the browser will require a reflow 13 and repaint once the images are downloaded. To 12 prevent reflows, specify the width and height 11 of all images, either in the HTML tag, or 10 in CSS.
However, note that they advise not 9 to resize the image using these dimensions, ie 8 to always use the real dimensions :
Don't 7 use width and height specifications to scale 6 images on the fly. If an image file is actually 5 60 x 60 pixels, don't set the dimensions 4 to 30 x 30 in the HTML or CSS. If the image 3 needs to be smaller, scale it in an image 2 editor and set its dimensions to match (see 1 Optimize images for details.)
I tend to do it in the CSS. This is certainly 10 a win when there are multiple images with 9 the same dimensions (so you can do stuff 8 like .comment img.usergroup { width: 16px; height: 16px; }), and have the same images subject 7 to scaling in different stylesheets like 6 user-selectable themes.
When you have completely 5 independent images that are used on the 4 site only once, it doesn't really make sense 3 to abstract their size out to CSS, so the 2 HTML version would probably be more appropriate 1 there.
I think CSS gives you more flexibility: you 4 can specifically set the width or height 3 while setting the other dimension to auto. But 2 when setting both dimensions, I don't thing 1 there's a difference.
If you put a large image in an HTML page 6 without dimensions, you should definitely 5 notice the page layout shifting as the image 4 is downloaded (over an internet connection, if 3 not locally).
As per other answers, it doesn’t 2 make much difference whether you do this 1 in the HTML or the CSS.
This does not answer your question directly, but 6 I would not rely on the dimensions of your 5 image for page layout. Instead include the 4 image in a block level element. This relieves 3 both the HTML and CSS from having to hold 2 information that it really shouldn't as 1 the image may change from time to time.
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.