Images that resize themselfs without distortion

[Tensei]

Hi, new to the boards, not quite sure this would go here but I'm sure someone can help redirect me if I need to move it.

I develope a lot of sites that require thumbnails for viewing several images at once, then when the thumbnail is clicked, on the next page, that same image to be larger. No, I'm not a porn webmaster =). My question is how do people do that! For example, I want to have an image file at say 500x500, but on one page I want to show it 200x200, and the other page I want to show it 500x500. I know the HEIGTH WIDTH commands but they distort the image. I've seen it done I just can't ever figure out how. I've even seen an image file using internet explorer (just loading the image itself) that if the webbrowser window was smaller than it's default size it would shrink itself, but if i maximized it would go to default size. This has lead me to believe that it may be in the program that made the image. Not sure, let me know if you can!

Thanks

[JPnyc]

Actually what you've likely seen is 2 separate images. They may be of the same snapshot image, but they're 2 separate files, 1 of thumbnail size, 1 of full size. And what you refer to in IE, is done by IE. That's nothing inherent in the img itself. Image files do not resize on their own.

[Tensei]

Actually what you've likely seen is 2 separate images. They may be of the same snapshot image, but they're 2 separate files, 1 of thumbnail size, 1 of full size. And what you refer to in IE, is done by IE. That's nothing inherent in the img itself. Image files do not resize on their own.

Thanks for the input!

[Wiz Creations]

you can also use one image, and have that be the 500 x 500

for the thumbnail, you would put width="200" height="200" and then on the page with the actual size, you can include width="500" height="500" or just leave it because that's how big the image is naturally. of course, without it, you could end up with a little box with an X in it and mess up the layout.

[Jennifer4eva]

JPnyc is totaly right, what you have seen there is 2 different images .. resizing an image using with and height in the img tag is a verry bad practice. why?
because 1 it loses much quality (the browser is a browser, it is not photoshop, and it is not designed to be verry gud at resizing images)
2 it takes much time to load on slower connection..(the client browser downloads the entire image and then resizes it) i mean if you have a page with 50 images(let's say 1024x768) resized to thumbnail size of 160x120 it would take a lot to load that page
so you need to create a thumbnail version of the original image.. and when the visitor clicks the thumbnail you can display the original full-size image(you can use onclick() event to do that) in a div or whatever you feel suitable, you just use a bit of DHTML coding to do it(this if you need it to load within the same page, if you want it to load in another page you just make a link)
i hope it helpled

[airforcemook]

The above option is not that great of an idea, but it does work:

Reason, if I have a 1000x1000 image and I choose to display it at 200x200, the browser is STILL loading that 1000x1000 image and simply resizing it. Imagine a photogallery of 10-20 photos and you can imagine how slow that would load and how much bandwidth it would consume for photos that probably won't even be looked at.

[purefan]

in fact for making things easier, Coffecup's HTML EDITOR can add an image as a thumbnail, creating such image file, it automatically resizes it and creates the new image file.

[i11uminati]

I don't want to step on anyone's toes, but the same image can be resized without distortion to many different resolutions. You just need to know some php. I have a short script that I use for doing this. You can edit the size to your own liking and add different size types:

<?php

$image=$_GET['image'];
$type=$_GET['type'];

if($type=='small')
{
$max_width=160;
$max_height=128;
}

elseif($type=='medium')
{
$max_width=300;
$max_height=270;
}

else
{
$max_width=500;
$max_height=375;
}
$size=getimagesize($image);
$width=$size[0];
$height=$size[1];
$x_ratio=$max_width/$width;
$y_ratio=$max_height/$height;

if(($width<=$max_width)&&($height<=$max_height))
{
$tn_width=$width;
$tn_height=$height;
}
elseif(($x_ratio*$height)<$max_height)
{
$tn_height=ceil($x_ratio*$height);
$tn_width=$max_width;
}
else
{
$tn_width=ceil($y_ratio*$width);
$tn_height=$max_height;
}
$src=imagecreatefromjpeg($image);
$dst=imagecreatetruecolor($tn_width,$tn_height);
imagecopyresized($dst,$src,0,0,0,0,$tn_width,$tn_height,$width,$height);
header("Content-type: image/jpeg");
ImageJpeg($dst,null,-1);
imagedestroy($src);
imagedestroy($dst);
?>

Here is an example of displaying the pic on a page:
echo'<img src="image_manip.php?image=images/'.$child.'.jpg&type=large"/>';

Just change the image and type url variable to what you need.