Changing Image Size in HTML
Sometimes, you have an image in a website that you want to use somewhere else but in a smaller or bigger format. You can change your image's size in HTML without having two different image files. Beware that if you stretch an image too much, it will lose its quality and look very grainy. On the other side, if you make an image much smaller, the file size will stay the same and a very small image will be as heavy as its original.
Knowing how big your original image is
Before changing your image's size in HTML, you need to know its original width and height. To find out what they are, load up your favorite image editing program such as photoshop, photoshop elements or paintshop pro. There will be a menu such as image > image size somewhere to adjust the image size. Find out what they are and take a note somewhere. You need to know this to keep the same proportions when giving size values to change your image's size in html.
Changing the size of your image
When inserting an image to your content, add width="VALUE" height="VALUE" after the image's URL. Replace VALUE with a pixel size. If your original image is 800 pixels wide, 600 pixels high and you want 1/4 of the original image size, you would add width="200" height="150" to your IMG tag.
Here's an example of adding the image in the example above:
|
<html> <head> <title>changing image size in html</title> </head> <body> <img src="picture.jpg" width="200" height="150"> </body> </html> |
| Back HTML Code For Image | Next HTML Code For Links |