Learn about the Pros and Cons Resizing Images with HTML.
Benefits of Resizing in HTML.
Resizing images is one of the 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 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 option and then enter the new size you wish.
Once the image is resized, you save new image and use it as you wish.
However, you don’t always have go through all that trouble.
By using HTML, you can resize images and without taking up much time at all.
All you have to do is use the WIDTH 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 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 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 it’s not your best alternative.
There are many reasons why you use HTML to resize a photo.
First of all, resizing with HTML does change the actual weight of the image.
If the image was 200K prior to resizing 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 load when visiting your website.
For this reason, you should use a editing software to resize your images.
Though Adobe PhotoShop is a top software 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, 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.