views:

520

answers:

5

I'm showing images from other websites as thumbnails. To do this I display them in a smaller img tag so the browser does the size decrease.

The problem is that the quality of these images (which I have no control of) is diminished. Also they look much better in FF and Safari than in IE.

Is there a way to make these images look better without caching them on my server? (e.g a javascript library that does the resize with better quality)? Any idea is highly appreciated.

+1  A: 

If you are working with a source image and simply re-sizing on the client, there isn't going to be a good way to do this.

Now, aside from the potential legal ramifications of using other sites images you could look at a simple caching process, and do a quick re-size on the image, and keep the aspect ratio, so that the display is good. This also helps reduce the bandwidth that you are using from the other sites.

Mitchel Sellers
The images are displayed with permission. Copyright and bandwidth from the images owners are not an issue here. I don't want to cache the images because of bandwidth and response time considerations. The system is expected to grow to large numbers.
Nir
That's sort of rude to say you want to save bandwidth... for yourself! but you're willing to make the user download the whole image from a third party? Eek.
Jared Updike
+4  A: 

A quick Google search shows that in IE7 you can fix the image quality problem: http://devthought.com/tumble/2009/03/tip-high-quality-css-thumbnails-in-ie7/

kbosak
also mentioned by our host!http://www.joelonsoftware.com/items/2008/12/22.html
Will
+2  A: 

The only way to have control is to do the resizing yourself. Various browsers will use different algorithms, some with unsharp masking, some without. The filters used after resizing control most of this. Specific CSS tagging can control this to some extent.

Javascript can't really handle this, but using Flash or similar would allow this. You would have better control of the image. However, you would lose the "imageness" as far as HTML.

Joe
+4  A: 

IE's default image resizing algorithm is not that nice - it can be changed by tweaking a registry entry, but of course that is outside of your control.

However, apparently it can also be triggered to do a better image resize through css

img { -ms-interpolation-mode: bicubic; }

source: http://edmondcho.com/blog/2009/03/17/internet-explorer-image-resizing-tip/

Simon Groenewolt
Excellent. Anyone know how I can use Javascript to set it?
Nir
use object.style.msInterpolationMode = "bicubic"; (source: http://www.tomwalsham.com/post.php?id=71)
Simon Groenewolt
+2  A: 

One thing I didn't see mentioned by the others - you aren't really resizing the image, you are just displaying it in a smaller space. Let's say you are pulling down an extremely large image file (5MB) and displaying it at 1 x 1 - it's still 5MB!

Writing a caching solution for these images wouldn't be very difficult at all - and will save you the legal ramifications and embarrassment. If I saw your site in my log files and realized you were pulling down my images, you would be Goatse'd - hard.

Michael Wales
The images are displayed with permission. Copyright is not an issue here. I don't want to cache the images because of bandwidth and reponse time considerations.
Nir