You aren't signed in     Sign In    Help

The lengths I go to for you IE 6 users.. (or, browser image resampling/rendering differences)

The lengths I go to for you IE 6 users.. (or, browser image resampling/rendering differences) by .schill.
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

Comments

view profile

Dee Adams  Pro User  says:

This offends my delicate visual sensibilities. So glad you are just as anal about what we're putting out there in the world. Go forth and rocketh on. The minions should be grateful.
Posted 14 months ago. ( permalink )

view profile

ninavizz  Pro User  says:

You rock my world. :)
Posted 14 months ago. ( permalink )

view profile

.schill  Pro User  says:

IE 7 also renders resized images poorly, but IE 8 looks to be on par with Safari and Firefox.
Posted 14 months ago. ( permalink )

view profile

drewm  Pro User  says:

I went through an almost identical process for the avatars on the (now canned) Yocal project in the London office. In the end we avoiding browser resizing all together.

Interesting about AlphaImageLoader, but you'll want to take care using it for repeating items on a page (like avatars or a grid of image thumbs). IE6 gets appears to become progressively less stable with every instance of the filter.

Thanks for sweating the details.
Posted 14 months ago. ( permalink )

view profile

.schill  Pro User  says:

Browser resizing is not ideal, but the newer ones (with the exception Opera, oddly) do a pretty good job of natively resampling the image smoothly.

I've played with the fire that is activeX filters before and have been burned, so I'll be keeping an eye out on performance. I also expect a RAM hit. I'm applying them to IE 6 and 7 after DOMReady on the new Flickr home page, under the recent activity section.
Posted 14 months ago. ( permalink )

view profile

'ju:femaiz  Pro User  says:

hey look - it's my avatar (or part thereof) in the top pic ;)
Posted 14 months ago. ( permalink )

view profile

aplatti  Pro User  says:

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
Posted 14 months ago. ( permalink )

view profile

.schill  Pro User  says:

^ Ah-ha, nice! Even better, a cleaner fix.
Posted 14 months ago. ( permalink )

view profile

Rab's Da  Pro User  says:

why not use the 75px one and hide overflow, in effect cropping it.
no resizing?
Posted 11 months ago. ( permalink )

view profile

.schill  Pro User  says:

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.
Posted 11 months ago. ( permalink )

Would you like to comment?

Sign up for a free account, or sign in (if you're already a member).

[?]
view photos Uploaded on September 25, 2008
by .schill

.schill's photostream

2,908
uploads

Tags

Click this icon to see all public photos and videos tagged with ui ui

Additional Information

All rights reserved Anyone can see this photo

Add to your map