[Judge_Fire]

So I have weird interests.

As we know, images don't scale all that nicely in browsers. Resizing them up or down might well create nasty artifacts.

So exactly what interpolation algorithms are the various browsers using? Even after some serious Google sessions, I haven't found any good answers, so I figured I'd just ask around.

You see, some time ago I got interested in the various interpolation algorithms, when I found this site by Helmut Dersch. That led me to appreciate Spline 2 and PTMac when working with bitmaps/cubic panoramas.

Nice stuff, but not very applicable for browsers... yet?

So, as usual, any pointers appreciated,

TIA,

J

[Synotic]

I have a semi-related question... I was actually thinking about this earlier, I wondered if there was like PHP code or something that could scale an image and then write out the data? I wanted to make some 16x16 (preserving the ratio) thumbnails without just using the browser to resize a large image... Anyone know of anything?

[Millennium]

Originally posted by Synotic:
I have a semi-related question... I was actually thinking about this earlier, I wondered if there was like PHP code or something that could scale an image and then write out the data? I wanted to make some 16x16 (preserving the ratio) thumbnails without just using the browser to resize a large image... Anyone know of anything?

It sounds like you want to use the gd library; unfortunately I'm not familiar enough with it to write sample code, but I know it can do what you want.

As for scaling algorithms, I'm guessing that most browsers use some pretty basic, naive algorithms. I would suggest not leaving it to the browser to scale the image at all, actually; it still has to download the image at its original resolution, so you don't save any bandwidth. Pre-scale them with the programs you're using, and send those as thumbnails.

[Simon Mundy]

Originally posted by Synotic:
I have a semi-related question... I was actually thinking about this earlier, I wondered if there was like PHP code or something that could scale an image and then write out the data? I wanted to make some 16x16 (preserving the ratio) thumbnails without just using the browser to resize a large image... Anyone know of anything?

First thing first - install GD Library 2.0.3+ It has support for native bicubic interpolation for image resizes on JPEG and PNG (24 bit). It's fast, it's lovely.

Here's a PHP code snippet (4.1.0+) I use to resize an existing image and rescale if either it's height or width is > 300. It's more useful if you hook it up to work with temporary files that are uploaded from a form.

Code:
$src_img = "/path/to/image.jpeg";
$dst_img = "/path/to/newimage.jpeg";
$tmp_img = "/path/to/tmp.jpeg";

$filetype = 'image/jpeg';
$imageinfo = GetImageSize($src_img);

$src_width = $imageinfo[0]; 
$src_height = $imageinfo[1]; 
$dest_width = 300;
$dest_height = 300;
					
$ratio = ($src_width > $src_height) ? $dest_width/$src_width : $dest_height/$src_height;
					
switch($filetype) {
	case 'image/jpeg'	: $src_img = imagecreatefromjpeg($src_img); break;
	case 'image/png'	: $src_img = imagecreatefrompng($src_img); break;
	}
						
$tmp_img = imagecreatetruecolor((integer)$src_width * $ratio,(integer)$src_height * $ratio); 
imagecopyresampled($tmp_img, $src_img, 0, 0, 0, 0, (integer)$src_width * $ratio, (integer)$src_height * $ratio, $src_width, $src_height); 

switch($filetype) {
	case 'image/jpeg'	: imagejpeg($tmp_img, $dst_img); break;
	case 'image/png'	: imagepng($tmp_img, $dst_img); break;
	}

imagedestroy($tmp_img);

The wonderful people at http://www.php.net/ are responsible for most of this code - you can even find PHP interpolation algorithms if you like (although they are much slower).

Check out the searchable documentation for all sorts of image manipulation goodies.

There's also a CGI-scriptable app called 'ImageMagick" that can perform unsharp masks, blurs, etc. Look for it on versiontracker. You will have to install it server-side, and work out which language you want to talk to it through (PERL, PHP, etc.). I haven't had the time to use it myself but it looks pretty tasty.

[Judge_Fire]

Yeah, server- side image resizing is a real- world option that I might resort to as well.

Still, I took a moment to tempt the Safari developers to include a more advanced resizing algorithm. A lot of existing image search sites, for example, scale pics down using brute force. If those small previews looked better in Safari than other browsers... sweet, slight competetive advantage.

Of course, it reeks of featuritis, especially if you include processor sniffing for picking an appropriate algorithm for optimum performance, but hey, it's up to them, not me

J