29

I found a similar question here, with the answer: "you should always define the width and height in the image tag." But it is from 2009.

In the meantime, many things has changed on frontend. We are all doing responsive page design now, for many devices and sizes simultaneously (mobile, tablet, desktop...).

So, I wonder is it still necessary to specify the width and height attributes, and for what reason (for responsive, page speed, SEO...)?

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
  • 2
    You should leave the attributes off the actual image and style them with css, but they are still allowed - https://www.w3.org/TR/html-markup/img.html (this is only my opinion though) – Pete Sep 07 '16 at 14:55
  • I always style images with css, but I have to add attributes because of the code review in my company. It is pretty senseless to me, but I have no clue for otherwise. – Damjan Pavlica Sep 07 '16 at 15:21
  • You should change the code review standards as it seems outdated to use the html attributes - they will only accept a pixel value so you would not be able to code responsive images – Pete Sep 07 '16 at 15:28
  • 1
    Note that the linked [answer](http://stackoverflow.com/questions/1247685/should-i-specify-height-and-width-attributes-for-my-imgs-in-html) has an edit explaining that (at least in regards to reflow/rerender) there is no benefit in specifying dimensions in the html document, (provided that it *is* specified in css). – Lars Sep 12 '16 at 13:47
  • 1
    possible duplicate: http://stackoverflow.com/q/32217863/3597276 – Michael Benjamin Sep 13 '16 at 00:03
  • 1
    @Michael_B thanks for the link, it is very helpfull! – Damjan Pavlica Sep 13 '16 at 09:21
  • Wondering about copy and paste (eg into an email) ?What happens? Is the css ever used. I would expect not but can’t test right now. – Simon_Weaver Jun 26 '18 at 03:08

7 Answers7

15

An img element has width and height attributes, but they're not required under any DOCTYPE.

Width and height attributes were only 'required' or relevant to reserve the space on the page and prevent the page moving around as it loads - which is important. This can be achieved using CSS instead providing the CSS loads quickly enough - it is likely to load before the images anyway, so all should be good.

It is also possible (and valid) to specify just one attribute, width or height and the browser will calculate the omitted value in order to maintain the correct aspect ratio.

You can specify percent values in the attributes if required. You don't need to use CSS for this, if that is what you are implying.

Also, it is relevant to add - Under HTML5 the width and height can only take a pixel value, in other words a valid non-negative integer.

Whether you use the width and height attributes can depend on your design. If you have lots of differently sized images, do you want to lump all the dimensions in the CSS or include them with the img?

Hrvoje Antunović
  • 781
  • 5
  • 15
  • 1
    In other words, it is not about relevancy, but if you want to reserve the space even with stylesheets disabled. So, maybe best place for image width and height is in html emails. – skobaljic Sep 17 '16 at 21:01
  • 1
    An img element is content and not layout. If you have a content image which you want to be 300px wide, while it has 600px width, what should you do? YES: you should set the width to 300 (pixels) and set the height (also) to half of the original height. This should NOT be done in CSS as CSS considers layouts, not content. This way your content image will still be able to scale through CSS, look sharp on retina displays and good on normal ones. And as a bonus this will also prevent the dreaded page jump, see: http://stackoverflow.com/a/39563913/2397550 – Mr. Hugo Sep 19 '16 at 01:31
13

YES, you want to declare the width and the height of an image in 2016.

  1. To make them retina-ready

If you want your image to be retina-ready, you should define a width and an height lower than the actual pixels. If the image is 800x600 specify <img width="400" height="300" />.

  1. To avoid page jump

Without the width and the height the image does not know how large it is, which causes an unwanted jump in the page as it loads (it reflows). Declaring height and width solves this problem.

Note that:

  • Images with a defined width and height can still be responsive. Simply add max-width and max-height to your CSS. This will cause the image to scale down (not up) when it does not fit the screen (see this sweet retina-ready, responsive kitten). Defining a min-width and min-height will do the opposite.
  • Adding a huge amount of compression to your JPG (around 50%) to keep the file size low is recommended when you use a single (relative large) image for all screen sizes.
Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
  • if you set min-width to an img letting min-height auto this image will loose its aspect ratio if need to decrease size under this min. So it will break responsive "rules"... – JoelBonetR Sep 19 '16 at 07:18
  • I have updated the answer with a working example. You should NOT set `min-height` to `auto`, because this value is invalid, see the property values: http://www.w3schools.com/cssref/pr_dim_min-height.asp. – Mr. Hugo Sep 19 '16 at 08:42
  • @JoëlBonetRodríguez You were probably looking for something like this, using `width: auto;`: http://codepen.io/anon/pen/BLLWxx – Mr. Hugo Sep 19 '16 at 08:52
  • Yes, sorry, i correct: if you set height: auto and min-width (some pixels) the image will loose aspect ratio while decreasing under this min value. Because the min-width will lock width resize and height will continue decreasing. – JoelBonetR Sep 19 '16 at 09:57
  • I sprinkled this page with examples. Just pick one. – Mr. Hugo Sep 19 '16 at 10:00
  • 1
    Couldn't all this be done with critical CSS instead? – Damjan Pavlica Sep 19 '16 at 10:02
  • 1
    yes, try to do the same on a page with dynamic number of images with a variety of native sizes. Will you edit the code adding media queries for each one every time you load a new image? No, thanks. The base of programming is to automate as much as possible every task and you're supposing absolutely that you are writing a simple HTML + CSS, and what to say about the example where does not contain other content to rescale a part of a single image. – JoelBonetR Sep 19 '16 at 10:06
4

Well, the basic answer to this question (as with most coding issues) is this: it depends on the situation at hand.

I would say that the “best practice” of always specifying the height and width attributes of images making a significant difference to page rendering speeds hark back to the days when designers laid out their websites using tables and spacer GIFs. We have come a long way since then.

An indication for the future is the introduction of the new picture element being drafted into HTML. The picture element is effectively a wrapper for the existing img element, which allows you to specify several images of different sizes via a source element, and the user-agent itself actually determines which version is used.

<picture>
    <source media="(min-width: 64em)" src="high-res.jpg">
    <source media="(min-width: 37.5em)" src="med-res.jpg">
    <source src="low-res.jpg">
    <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
    <p>Accessible text.</p>
</picture>

As you can see from this example code above (taken from the Intel Developer Zone's article on the HTML5 picture element) there are no height or width attributes on the img element itself.

Here are a selection of resources that will help you to decide the most appropriate method of declaring image sizes:

Jordan Clark
  • 750
  • 5
  • 18
  • 1
    First of all, a difference to the page rendering speed? Can you provide a source? Because I find that hard to believe. Furthermore, not mentioning the width and height will cause an unwanted page jump while the page loads. HTML5 does not solve this. So the answer is YES, you should always provide a width and a height. – Mr. Hugo Sep 19 '16 at 01:16
  • 2
    The Intel Developer Zone article is very out of date and the markup is wrong. – zcorpan Nov 14 '16 at 13:28
2

Good standards are always worth a recommendation. With a little extra code it's quite easy to merge static (px) values of the img tag and generic (em, %) values supplied by CSS. And simpler still, get rid of the img tag altogether and set the picture as background of a div with a unique ID. If you have multiple images, use sprites and assign each picture to its corresponding div. Your mark-up sources would then look something like <div id="image_001"></div> - that's all. Scales all by itself; no need for bloatware like JQuery, etc.

  • I think it is important to consider the difference between foreground (content) images and background (layout) images. There is a big difference in meaning and usage. – Mr. Hugo Sep 19 '16 at 01:02
  • Good point. However, both can be achieved the same way adding z-index. –  Sep 20 '16 at 11:18
  • With foreground I mean img tag. With background I mean CSS backgrounds. Have you ever seen a CMS include a background image in the content? Me neither. Backgrounds are for layout, img tags for content. – Mr. Hugo Sep 20 '16 at 11:24
  • 1
    Using img adds at least 1, usually multiple extra requests, which can be reduced to 1 single request using sprites. Regarding CMS, I don't use any, but agree with your assumption. However, sources are typically open, so editing the required parts should be easy enough. Anyway, I believe the whole topic is more about philosophy rather than actual coding. Regards. –  Sep 20 '16 at 18:19
1

If we're talking 'bout responsive, you may use bootstrap (if not, start doing this). When working with images, you should add the class img-responsive, this will modify the width of the image if necessary and the height will be auto, so if width decreases, height will decrease too.

You will always have an image that keeps the same % of its container and will never loose the aspect ratio.

There's no relation with SEO and image size declarations. Page speed will be the same always, so if the image is 800 x 600 px, you'll load the full image, even if you declare it as 60 x 40 px.

You must think that, even using img-responsive, the max width and height of this image will be the real size of the image. So if we have a 800 x 600 px image, it will not enlarge it (because it'll become loosing quality).

So in 2016, it's recommendable to NOT declare height and width of an image. Instead use bootstrap's img-responsive class, other responsive framework class that gets the same result, or hand-made the proper jquery and css to reach the same.

Hope it helps!

JoelBonetR
  • 1,551
  • 1
  • 15
  • 21
  • The `.img-responsive` class does 3 things. It sets `display: block;`, `max-width: 100%` and `height: auto;`. First of all this causes the image to be not inline. You might not want that. Secondly this does not prevent page jumping. So the only useful thing it does is making the image shrink on small screens. I do not need bootstrap to add a `max-width: 100%`. Do you? – Mr. Hugo Sep 19 '16 at 01:09
  • Note that images can perfectly become larger than their actual pixels. I would not recommend it, but for a background image, this is not uncommon. Using `width: 100;` or `min-width: 100%;` will do this. – Mr. Hugo Sep 19 '16 at 01:12
  • 1
    @JootS using img-responsive the image cannot be larger than their real pixels. I don't mind a reason for set display inline on an image, but if you need it simply add div.[class of your div] > img.img-responsive{display:inline;} Problem solved. There's jquery behind bootstrap that affects img-responsive (the reason for what width and height are re-declared "on the fly" even if you declare it on html tag. Is simplest, clear and effective. You don't want page jumping? Add an img pre-charger js library or optimize images before upload it ;-) – JoelBonetR Sep 19 '16 at 09:00
  • We are not solving a problem here. We are debating the most elegant solution for img tags. Using CSS to reset them to their defaults or setting heights and widths with jQuery is not very elegant. Using libraries to fix page jumping is even more overkill. – Mr. Hugo Sep 19 '16 at 09:10
  • 1
    i was solving the problem you imagine. I've no issues of "page jumping" because i well-optimize the images (using progressive jpg) before upload and i'm using full bootstrap, only when i need it i modify css to get the interface i want. I'm agree with you of image threatment but nowadays if you are setting full responsive pages (as its usual) it could be better to use bootstrap's classes to deal with it (it's only my opinion). Setting width and height with a fixed value on html to modify it later with css can cause resize issues when dealing with some scripts, specially in some browsers. – JoelBonetR Sep 19 '16 at 09:51
0

Yes, It is still relevant to specify width and height attribute on images in HTML.

Images often take longer to load than the HTML code that makes up the rest of the page. It is, therefore, a good idea to specify the size of the image so that the browser can render the rest of the text on the page while leaving the right amount of space for the image that is still loading.

Hence, specifying width and height attribute on image will improve the webpage performance by protecting from delay in loading.

luv4code
  • 21
  • 3
0

Yes, it is necessary to add height and width attributes to the img tag along with the src and alt attributes to prevent page-jumping. When our page loads, the specified space will be preserved for the image so that the it can occupy that place peacefully. But, there is another problem that will arise here Responsiveness. Once we give height and width attribute to img tag, the image will tend to stay in the same height for all screen-sizes which will make the image to shrink. To avoid this, we need to add height: auto; to the image in the CSS file.

Sanjay K
  • 23
  • 1
  • 7