In an html document, is it difficult to resize images using height and width labels?

Question

If I have a logo, and I want to use it on another page where I require it to be smaller, this is my instinct for creating a new image, modified using a graphical editor. However, I hear what is best for the user if I instead link to the original image and resize it using a browser, 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 answer is “Change it in the graphics application”, but it depends on how you use it.

When you leave the image size in the browser, the original (full-size) image must be loaded before the browser displays it on a smaller scale. This means that you are using more bandwidth and your web page takes longer to load. However, if you mainly use a larger image on your site, then it will be faster to always use this image, since the browser can cache it.

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

Answer 2

Perfectly resize images using CSS or height and width tags. The only thing you want to be careful about is to make very large images small, because this obviously does not reduce the download size.

Doing this will work best when you cache your images efficiently so that it doesn't load a second time. Then you will get tangible benefits from this. Usually I just add the last modified image time to the URL, for example:

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

and then set the Expires header to year. If the image changes, the mtime time changes, and this causes the browser to restart it.

This is recommended for images, Javascript and CSS files.

Answer 3

If the browser resizes the image for you using a height / width label, you can finish the image with lower quality, it really depends on the type of image (for example, from a photo or simple graphics), so try it in some common browsers, But resizing the image in A graphical editor is the only way to provide a high-quality resize operation.

Answer 4

Create a smaller image in a graphics editor for several reasons:

• If users have not cached a larger image yet, they will upload a larger file unnecessarily.

• Resizing the image on the client side leads to some unpredictable scaling quality.

• Doing this in HTML is not recommended in any case, since for presentation problems (such as element sizes) you should do it via CSS.