Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is setting image dimensions with CSS as "good" as setting them in HTML?

When I was first learning HTML a very long time ago, I was told that it was important to always set the dimensions of your images in your HTML, so that browsers could draw an empty box where the image should go, render your page, and then download and render the images where they belong. If you didn't set width and height values for your images, the browser would have to download the images first to discover their dimensions, and it would slow page loading for people with crappy connections.

For the past few years I've been using CSS, I always put a width and height declaration in my img tags in my HTML. My question is, is setting width and height in the style sheet, and no longer adding these HTML attributes, just as good? It certainly makes my spartan HTML look even cleaner without them.

like image 512
Michael Davis Avatar asked Nov 17 '10 16:11

Michael Davis


People also ask

Why is it important to specify the width and height of an image in HTML program?

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it.

How do I make an image fit as perfect in HTML?

One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.

Why is it best to avoid resizing images using height and width in the browser?

When you leave image resizing to the browser, the original (full-size) image has to be downloaded before the browser can display it at a smaller scale. This means that you use more bandwidth and your webpage takes longer to load.


1 Answers

The problem you mention with the image not being downloaded immediately also applies to your CSS.

The difference is that without the rest of the CSS the whole layout may not make sense. In other words, if the rest of the CSS hasn't loaded then the fact that the image dimensions are also missing won't really be that noticeable.

So personally I think it's fine to put the dimensions in the CSS.

like image 82
Gareth Avatar answered Nov 02 '22 05:11

Gareth