CODEWITHSUNDEEP
htmlimageimage-size
Damon
Damon

Reputation: 10809

Should image size be specified in html?

I recall it was long ago best practice to hardcode width and height for any image (generally so it allocated appropriate amount of space while loading), but now with most people on high speed and things generally more dynamic, what is the best practice for this? Is it still preferred that any content image have inline size set with html?

Upvotes: 1

Views: 813

Answers (8)

Celso Bessa
Celso Bessa

Reputation: 201

I just answered a similar question on Wordpress Stack Exchange and also on Webmaster Stack. I am posting it here intending to clarify and help more people. (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%;
}

Upvotes: -2

PackratDragon
PackratDragon

Reputation: 39

If you are designing for cross browser compatibility, then you should at the very least specify the height and width in your CSS for the image itself. I have found inconsistency between FireFox, IE, Opera, etc if sizes are not specified specifically for the image. Due to the fact that each browser, not to mention different versions, handle adherence to HTML Standards differently. I have found that some browsers will do its best to extrapolate the HTML designers intent, while others just croak on the first error. I would also recommend em sizes, rather than pixel or %'s if you intend for the website to be viewed from a mobile device such as a tablet. I will say, however I have just started playing with HTML5 so I don't of the difference in HTML5 with respect to images.

Upvotes: 0

Hilyin
Hilyin

Reputation: 113

I would say yes if you want to make sure the white space is included in case of the image does not load or during document load. But no if you're scaling/resizing the image with those attributes, as its unnecessary load on the browser and causes image distortion.

Upvotes: 0

Patricia
Patricia

Reputation: 7802

your image file itself should be the size you want it to display as, for the most part, if your concerned about slow loading especially! if you've got a 500X800 px image, that you only want to show as 100X200, scale it down! the file size will be much smaller so it will load faster :)

Upvotes: 0

oOo--STAR--oOo
oOo--STAR--oOo

Reputation: 438

Its always best to use CSS

You could hardcode the image height and width like this

.myimg img {
width: 10px;
height: 10px;
}

Upvotes: 0

Guffa
Guffa

Reputation: 700322

It doesn't matter if you set the size using HTML attributes or in a stylesheet, but you should still specify the size for images.

Eventhough images are loaded a lot faster nowadays, there is still a noticable delay between the page being displayed and the images pop up. It's still irritating when the layout of a page changes while the images are loading.

Upvotes: 2

bobek
bobek

Reputation: 8020

It doesn't have to be inline - you can do it in external CSS. Some older browsers, if you don't specify the size, will just treat it as 0px;

Upvotes: 0

Quentin
Quentin

Reputation: 943556

Yes, it is still preferred.

Plenty of people are not on high speed connections, and mobile is becoming more common.

Upvotes: 1

Related Questions