In an html document, is it a bad practice to resize images with the height and width tags?

Question

If I have a logo image, and I want to use it on another page where I require it to be a smaller size, it is my instinct to create a new image, resized with a graphics editor. However, I am hearing that it is better for the user if I instead refer to the original image and resize it with the browser by changing the height and width in the image tag.

So I ask the crowd, what is the best practice here?

Thank you for your time,

-- Henry

Answer 1

My default response would be "Resize it in a graphics application", but it depends on how you're using it.

When you leave image resizing to the browser, the original (full-size) image has to be downloaded before the browser can display it at a smaller scale. This means that you use more bandwidth and your webpage takes longer to load. However, if you mainly use the larger image throughout your site, then it will be faster to always use this image, since the browser can cache it.

If you're concerned about image quality, you would get better results and would have more control over the downsampling process using a dedicated graphics application to resize the image.

Answer 2

It's fine to resize images with CSS or the height and width tags. The only thing you want to be careful of is making really large images small because it obviously doesn't decrease the download size.

Doing this would work best when you're effectively caching your images so it doesn't get downloaded a second time. Then you will be getting a tangible benefit from doing so. I usually just append the last modified time of the image to the URL, eg:

<img src="/images/log.png?1233454568">

and then set the Expires header to a year from now. If the image changes, the mtime changes and it will force the browser to reload it.

That's suggested for images, Javascript and CSS files.