Resize images client-side to thumbnails results in jaggy and ugly pictures

760 views Asked by At

Im trying to use thumbnails on the fly so I won't have to have both thumbs and actual images. I had em done with PHP (with the excellent imagecopyresampled function) which worked great.

Now I'm looking to do something similar without PHP and I'm curious about the alternatives. Having the browsers do the rendering doesn't seem to be a good idea. I get good results with Explorer, Safari and Chrome whereas both Firefox and Opera produce jaggy thumbs. I have understood that this have to do with the browsers ability to scale using bicubic interpolation or not.

I'm now wondering if there's a way to let Javascript do it, like PHP did earlier with bicubic interpolation, which results in better-looking thumbs or if there is a fix for the browser issues here (I know about the CSS property -ms-interpolation-mode)? In general, what's the opinion on client-side generated thumbs? Maybe it's better to keep going with PHP instead if there's not a reasonable alternative?

PS Does it matter if I rescale the images using Javascript or CSS?

1

There are 1 answers

2
Mark Ransom On

There are two different reasons to prefer server-side thumbnail generation. The first as you've discovered is the inconsistency of results from browser to browser. The second is that client-side resizing requires the entire full-size image to be downloaded to the client - this results in a significant page slowdown.

Your issue with browser scaling may not have anything to do with their using bicubic interpolation or not. There are different implementations of bicubic, some of which do a great job of shrinking an image and some that don't.