Learn about the Pros and Cons of Resizing Images with HTML

Benefits of Resizing in HTML

Resizing images is one of the most common aspects of web design. Rarely do you get a picture that is exactly the right size that you want it ultimately to be in the final product. Thankfully, there are many ways to resize an image.

One of the most common ways is to use an image editor and to edit the image within the editor. All you need to do is select the “resize image” option and then enter the new size you wish. Once the image is resized, you save the new image and use it as you wish.

However, you don’t always have to go through all that trouble. By using HTML, you can resize images easily and without taking up much time at all. All you have to do is use the WIDTH and HEIGHT variables when you call the image.

Resizing the Image

If you want to make an image two-thirds of its current size, you just input the resulting size you wish within the WIDTH and HEIGHT variables. For example, if you have an image that is originally 200 pixels wide and 100 pixels tall and you want it to be half as big, you simply enter the WIDTH as 100 and the HEIGHT as 50.

The same process can be done even quicker. If you don’t want to figure out both the new WIDTH and the new HEIGHT, simply input one of eight WIDTH or HEIGHT and the image will be correctly scaled.

Additionally, you can even change the scale using the WIDTH and HEIGHT. For example, if you have an original image that is 100 pixels wide and 100 pixels tall but you want it to become wider than it is tall, simply input a WIDTH that is bigger than the HEIGHT. The picture will be stretched accordingly and the original scale will be ignored. Keep in mind, doing this will distort the look of your images if you do not keep the width and height scaled in the same proportions.

Cons of Resizing in HTML

Though resizing images in HTML is easy, it’s not your best alternative. There are many reasons why you shouldn’t use HTML to resize a photo.

First of all, resizing with HTML does not change the actual weight of the image. If the image was 200K prior to resizing in HTML, it will still be 200K after. This is not optimal in web design. You should try to lower the weight of your images as much as possible to decrease the load time of your web pages. Users don’t want to wait on your pages to load when visiting your website. For this reason, you should use a photo editing software to resize your images. Though Adobe PhotoShop is a top software to consider, it’s also very expensive. If you don’t own PhotoShop, you can download a free image editing software such as GIMP or simply go to Picnik.com, which allows you to edit images online.

Another reason that you shouldn’t use HTML to resize images is because stretching photos causes them to become distorted. You want to present visitors with clear, high quality images, not fuzzy, distorted ones. If you resize an image in HTML from 100 pixels to 105 pixels wide, there will probably not be much distortation. But if you increase the pixels a great deal in HTML, the image will be extremely blurry and unusable.

Though using HTML to resize images is possible, your best bet is to use a photo editing program to create high quality images that take up the least amount of space possible, helping to keep the load time on your web pages as low as possible.