Forums

Rugg

Hello. I was wondering which of these methods is considered the best practice for defining image height/width. Thank you for the suggestions!

<img src="images/flower.png" width="700" height="400" alt="" />

OR

In css/style.css:

img.large {
   width: 700px;
   height: 400px;
}

chrisburton

My personal opinion is to use CSS for images. It's just easier to go into your stylesheet and make the changes to a group instead of one by one. As for best practice, it's more of a preference.

Rugg

Thank you for the input Chris. I generally use CSS also, however I was recently told it could be better to define the width/height in the image tag for page loading purposes. Supposedly by doing so, the space defined for the image holds true until the page is fully loaded. Made me curious as to what everybody else did and experienced.

chrisburton

Hmm, I've never heard that before. May I ask who told you this? I use inline styling when a stylesheet is not needed because the code is too limited to load an additional file.

Rugg

A colleague of mine. Here is something I found via google, which ignited the debate. Not sure how reliable the information is—seems to be individual opinions also.

http://stackoverflow.com/questions/2414506/should-image-size-be-defined-in-the-img-tag-height-width-attributes-or-in-css

chrisburton

I believe though that if your loading an external stylesheet in your head section that it is to be rendered before anything else. Wouldn't that totally disprove this theory if you have img tags in your body using inline styling?

Rugg

Yep it should!

TheDoc

A reminder to not be resizing very large images (ie 2mb) because the end user will still have to download the entire image.

joshuanhibbert

CSS is always the smarter option. Try and keep all your design stuff together in one place.

Bluehound

If you have a lot of images that are not the same size, using just css can be more cumbersome. But, ideally it is best. As for image resizing, you shouldn't really be using the browser to do that at all.

treehouse : what would you like to learn today?

Forums

Best practice for image sizing (this or that)