I was playing around with some HTML last weekend, and though I’m sure that this tip is widely known among web editors, I thought I would share it because it is a mega time saver.

Let’s say that you have an image that you want to place on your website. The normal HTML code to place an image onto a website is:

<img src=“http://www.2hosting.com/image”>.

Let’s say for arguments sake that this image is 50X50, but you need this image to be 60X60. Instead of resizing the image in a photo editing program and then uploading the image again into the image directory, you can easily resize the image directly in the code. The resized image HTML would be:

<img src=“http://www.2hosting.com/image” width=”60″ height=”60″>

While that may work there are a couple of downsides. First, if you are taking 50×50 px image and using HTML to make it 60×60 you are going to lose quality because you are stretching the image. Upsizing 10 px probably isn’t going to be noticeable but much more and you are going to get a grainy picture.

The other downside to this is when you use this “feature” to make a large image smaller. Say you take a 150×200 px image and want it to show up as 75×100. Sure you can do that with HTML but the problem is your browser still requests the larger image file and then shrinks it to match the size in your HTML. I suppose this is fine if you don’t feel like resizing 1 or 2 images but if your original file is a 3 MB 1280×1040 jpeg and you are using HTML to shrink it to a smaller size you are still have to request the 3MB file to show something that could be 100k if you resize it with an image program.

Just food for thought.