Problem in reducing the image size

[athirai]

Hi,

I am having a Image of size width=700 and height=500, I want to reduce the image and display it within the allocated space of width=400 and height=300.
I am using the following javascript code to reduce the image in proponate ratio.

if(iImageWidth > 400 || iImageHeight > 300){
while(!(iImageWidth <= 400 && iImageHeight <= 300)){
iImageWidth = iImageWidth * 0.99;
iImageHeight = iImageHeight * 0.99;
}
}
x.width = iImageWidth;
x.height = iImageHeight;

Everything is working fine and i am getting the reduced image. But my problem is the result image get distorted (Its not clear as the original image). When we zoom in a image its clear but when we reduced the width and height its not clear as zoom in image.
Please help to resolve this issue.
Thanks in advance.

[nomad]

Hi,

I am having a Image of size width=700 and height=500, I want to reduce the image and display it within the allocated space of width=400 and height=300.
I am using the following javascript code to reduce the image in proponate ratio.

if(iImageWidth > 400 || iImageHeight > 300){
while(!(iImageWidth <= 400 && iImageHeight <= 300)){
iImageWidth = iImageWidth * 0.99;
iImageHeight = iImageHeight * 0.99;
}
}
x.width = iImageWidth;
x.height = iImageHeight;

Everything is working fine and i am getting the reduced image. But my problem is the result image get distorted (Its not clear as the original image). When we zoom in a image its clear but when we reduced the width and height its not clear as zoom in image.
Please help to resolve this issue.
Thanks in advance.

Don't do it that way. If you have an application that can retouch images I would do it that way. Look for a selection/item that can increase or decrease images. Keep your dpi at 72 to 142 any thing above that is overkill.
MS Photo Editor can do this
there is a website that give you a free application for this called gimp
http://www.gimp.org/
it's simular to photoshop

nomad

[GluteHam]

Just to support what Nomad said, it's best to use a photo editor to resize images, rather than leave it up to the browser or a script. Even when the scale is kept, it's never as clear. I know a lot of people try this to avoid having a huge library of images, but think that when you load an image, you're loading it's full file size, even though it displays smaller.

[GluteHam]

Another thing you can try, if you want to be artistic (like you're doing a portfolio) is to just show a portion of the larger image. So, it acts as a teaser ... you can put the image inside a small div, that has styles like:

.box {
height: 50px;
width: 50px;
overflow: hidden;
}

Now, you can also use positioning to show the specific area of the image you want ... just keep in mind the browser still has to download the complete image file.