Changing the size of your images

Posted by: admin in Tutorialimages on  

On user request, I added the possibilty to ulti reflection to change the width and height of your image (and it's reflection). Although this feature is (or I hope it is) working perfectly, I don't advice you to use it. In this article I'll try to explain why.


Let's take a look at the two images below. The first one is the original one, the second one is the same but the size is doubled. Doesn't look very good, does it? My first advice is quit simple: never make an image larger then it's original size. Enlarged images look jaggy and jaggy images shouldn't be part of a professional looking website. There are techniques to make it look better and it would lead me to far to explain them. But even these techniques aren't perfect as you can't show information on a large image that isn't there on a small image. So if you think about enlarging your images: don't.


Ulti Reflection Ulti Reflection

So what about using a smaller width and/or height for your image? I also advice you not to do this, although I have to admit that I do this myself sometimes. There are in fact 2 good reasons not to do this. The first reason is again the image quality. Browsers aren't sophisticated image manipulation programs like Photoshop or Gimp. Take a look at the example below. The left one is the original image where the width and height are changed in html. The right one is the image manipulated with Gimp to the same size. For this image, the difference between the two is very small, but still it's clear that the quality of the right one is better. A trained eye will immediately see if an image has it's original size.

Ulti Font Ulti Font

Although the difference is in most cases not very big, it's just a small effort to use an image manipulation program to resize your images in stead of using the width and height parameters of the img element. And you don't have to use an expensive program like photoshop for this. Gimp is a free alternative and a simple search will give you tons of free tools to resize your images.


If you're as lazy as I am, then you may not be convinced to avoid using the width and height parameters of the img element to make images smaller. Let me then give you the second reason: resizing with an image manipuation tool, also makes the size of the file smaller. In the example above, the left one is 22kB, the right one is 13kB. Although a difference of 9kB may not seem much, it can make quit a difference if you have a popular site. Let's say you put this image on your frontpage and this page has 500 page views a day. In a year, this small change in your image size will spare you 1,6 GB in bandwidth! So if you have a site with lot's of users, make sure the size of your images is optimized!. 

Comments (0)Add Comment

Write comment

security code
Write the displayed characters