Categories
html image

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

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

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.