5

I have read a lot that you should separate your css styling from your content, and that using inline styling isn't the best practice, but is this the same with the size of <img> tags?

Is it the best practice to set the width and height using attributes, or is it best to put it in a css class?

<img src="myimg.png" height="100" width="200" />

or

.myimg{
    height:100px;
    width:200px;
}

<img src="myimg.png" class="myimg" />

or is there no 'best' practice? if so, in which situations should you use 1 or 2?

JoJo
  • 806
  • 1
  • 13
  • 26
  • I'm not sure there is a best practice. A better idea I'd think would be to call the image from css using `background:url(...);` Whatever is easiest for you to maintain is really the best way to go. – Drew Kennedy Jan 16 '15 at 16:38
  • For a single image I would say it doesn't really matter... if you have multiple images you're fitting into a template, I'd say CSS. If at all possible, I'd stay away from image resizing (resizing an image down with CSS/attributes will still load the whole big image), and rather intentionally set the size of the image yourself. – Chad Jan 16 '15 at 16:39
  • so it just depends on the situation then? @DrewKennedy – JoJo Jan 16 '15 at 16:39
  • 3
    imo, the best is to make the image the size you want it in your fav photo editor first and foremost since browser scaling is going to reduce the quality in one way or another. Failing to do that, either css or attributes don't matter much, but keep in mind that putting it in the CSS allows you to swap out stylesheets and totally change the look and feel of your site, while attributes are like hard coding sizes to the html, which is sometimes what you want. I'd personally got the css route – Dave Goten Jan 16 '15 at 16:39
  • @JoJo pretty much, yeah. – Drew Kennedy Jan 16 '15 at 16:39
  • See http://stackoverflow.com/a/1247693/65971 – ckuijjer Jan 16 '15 at 16:42
  • possible duplicate of [Image width/height as an attribute or in CSS?](http://stackoverflow.com/questions/640190/image-width-height-as-an-attribute-or-in-css) – pearpages Jan 16 '15 at 16:44
  • I've seen that often the HTML validators will flag up if an image doesn't have height and width set in the markup itself, and I believe that it's just better for SEO to have the sizes of the image set within the HTML itself. – Lee Jan 16 '15 at 16:44
  • @Lee really? didn't know that. How could it be better for SEO? – JoJo Jan 16 '15 at 16:46
  • @JoJo It allows search engines to index image quicker and easier I believe – Lee Jan 16 '15 at 16:51

2 Answers2

5

I believe one of the best practices is to avoid inline styling as much as possible, and try to do most attributes by CSS to the biggest extent.

However, when you try and validate HTML, it will often fail if an <img tag doesn't have height and width stated, so I would include these in the markup wherever possible. It's also a benefit to SEO, for them to be correctly identified for Image Searches.

Another important SEO factor, is to try to avoid linking to fullsize images, and then scaling them down using CSS. If you have an image which is say 3000x2000 and the output will only be 320x250, then you really should create a 320x250 version of the image, upload it, and link to that instead. This will dramatically help your website's load time, and performance.

Lee
  • 4,187
  • 6
  • 25
  • 71
3

They're both technically correct, but I would consider the second method to be "best practice" for the same reason as avoiding inline styles - by using classes and CSS, all similar elements match and I can make updates all in one place.

Edit: upvote for Dave - important point about resizing before upload. I agree!

brennan
  • 131
  • 5
  • thanks for this answer, but Lee's answer has also a good point in the HTML valitation and SEO. I gave you a +1 because it's still a good answer ;) – JoJo Jan 16 '15 at 16:52