As part of my job (and my nit-picky nature around quality), I choose to tackle fun problems like this. It'd be nice not to have to do this, but sometimes you have to get creative.
This image shows blown-up (8x normal size) screenshots of how a 75x75 JPEG thumbnail is rendered at native size, and at browser-resized 48x48 sizes in IE 6, Firefox 3 and Safari 3. When shown at non-native sizes, the browser must resize the image itself - and depending on the implementation, the resized image can look really bad.
IE 6 does the worst job of resampling, presumably the drawing method is not bicubic but something closer to linear; thus, the resized image looks pretty crappy.
An interesting workaround is to use IE's AlphaImageLoader activeX filter (assign a transparent .gif to the in question, and then apply the filter with the real URL.) This does appear to use a better resampling method, as illustrated between the first and second small thumbnails.
Firefox 3 and Safari 3 both display the scaled-down image quite nicely.
Also see Opera 9.52, Chrome and IE 8.
ninavizz added this photo to her favorites. (54 months ago)
View 6 more comments
aplatti 57 months ago | reply
IE7 has a css extension you can use to specify that an image be resampled using bicubic interpolation.
<img src="whatever.jpg" style="-ms-interpolation-mode:bicubic"/>
msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx
Schill 57 months ago | reply
^ Ah-ha, nice! Even better, a cleaner fix.
Rab's Da 54 months ago | reply
why not use the 75px one and hide overflow, in effect cropping it.
no resizing?
Schill 54 months ago | reply
Cropping would be another option. On Flickr, we use resized images to retain the full image detail rather than show a native-size (but incomplete) slice of the larger image. The trade-off is the "full" image vs. a small piece which may be less-recognizable.