What is the best practice for setting image size? css or attributes? [closed]

Question

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?

Answer 1

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.

Answer 2

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!