Tip: High quality CSS thumbnails in IE7
IE7 supports a custom bicubic resampling mode for images. Before, resizing a 500×500 image like this:
<img src="pic.jpg" alt="This image is really 500x500 big" class="thumb" width="50" height="50" />would produce a horrible result in IE, with noticeably lower quality in the resized version.
This is easily fixed in IE7 by applying the following property to the img tag:
img.thumb { -ms-interpolation-mode: bicubic; }
Go to this demo page for a Flickr picture example.
-
alex fischer 5 months ago
This is not working with a png image how can i fix it?
-
Oman 8 months ago
Ok, nevermind…Firefox 3.6+ uses this:
image-rendering: optimizeQuality;
-
Very helpful and cool. Is there anything similar for improving the quality of dynamically down-sized images in Firefox?
-
Thanks!
Work fine in IE7, but not in IE6? How fix it in this browser too?-
Ben Kondes 6 months ago
Since that browser’s going dead in the next few months, let’s not worry about that.
-
-
CentDev about 1 year ago
Interesting. I never knew this existed. Kudos for the little gem.
-
I modified the code to comment out the “img.thumb { -ms-interpolation-mode: bicubic; }” bit, and the page rendered exactly the same in Firefox…
-
Guillermo Rauch about 1 year ago
The point is to show that modern browsers are capable of producing GD or Photoshop-like quality thumbnails. Of course it won’t do anything in FF! It’s for IE7 resampling to look like Firefox’s or Safari’s.
-
-
Yeah, this may be a cool trick, and props for finding it out and sharing it, but we all know that this is a big no-no as far as web design is concerned. What about every other browser people will be viewing your site with? Those images are gonna look awful. Just make a smaller version in photoshop. Or better yet, dynamically create them with PHP.
-
I wouldn’t agree. Most modern browsers (Safari, Opera, Chrome, Firefox) resample your images while keeping high (almost GD2-like) quality.
This can be extremely useful for a wide range of scripts. For example, slideshows that display thumbnails at the bottom. If the images are going to be eventually displayed at full size, why would you produce 2x the number of images and HTTP requests ?
I’ll update the post with a link to an example
-
I would only suggest doing that if you’re only displaying a handful of thumbnails per page. Otherwise the user is going to have a long load time just to see thumbnails (not to mention how much bandwidth you’re wasting on a user who only clicks through to a couple full-sized images).
-
-
Event though I believe scaling images with html is a forbidden sin, this might come in handy one day. Thanks!
-
Cool tip! I was actually just working on this sort of thing yesterday.
Any idea why firefox is giving me a black border on the top and left when I do the same thing? I’ve got a white image on a white background, so this is obviously unacceptable. I’m guessing it’s a linux-specific bug, but I haven’t tested cross-platform yet.
-
Wow. Really great tip.
-
The HTML bit above doesn’t have the class of “thumb”, so the CSS would miss that image, but I think we get the drift =)
That absolutely works and is a great reminder!
-
Fixed =)
-
-
Wow, that’s really good! Didn’t know about this…
Thanks.
Thanks a lot!
I never knew about this feature (or is it a bug) of the IE.