javascript - better quality thumbnails from larger image files - Stack Overflow

admin管理员组

文章数量:1292702

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.

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.

• javascript
• internet-explorer
• firefox
• image
• resize

Share Improve this question Follow asked Apr 21, 2009 at 13:59 NirNir 25.4k2626 gold badges8484 silver badges120120 bronze badges 3

• 1 I'm sorry, are you saying you DO NOT want to save 2 versions of the image? The original and the thumb? You just want a way to "show" the image as a thumbnail from the original file? – Gene R Commented Apr 21, 2009 at 14:07
• Dup: stackoverflow./questions/681684/… – JPot Commented Apr 21, 2009 at 16:27
• New jQuery plugin: stackoverflow./questions/34965904/… – Anton Lyhin Commented Jan 23, 2016 at 16:50

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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./blog/2009/03/17/internet-explorer-image-resizing-tip/

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

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.

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.

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.

本文标签： javascriptbetter quality thumbnails from larger image filesStack Overflow