DISQUS

sesh · 6 months ago

Thanks for a good post. I would like to add a two points:
1. personally I always try for "images should be served at the size they are drawn". Image re-size is a costly operation.
2. check if a background image with just solid color can be replaced by a 'colored' background. drawing a solid fill is cheaper than rendering an image with solid color.

mishoo · 6 months ago

WOOT! Philly in the house made it to popurls!

dbugger · 6 months ago

According to MSDN http://msdn.microsoft.com/en-us/library/ms53082...
-ms-interpolation-mode is only available in IE 7 onward.

Gabriel Weinberg · 6 months ago

Thanks, I should have originally said IE7+. I just updated the post with that info and to say that if you want to support IE6 in this manner you need to use AlphaImageLoader (sizingMethod='scale'): http://msdn.microsoft.com/en-us/library/ms53296....

Rizky · 6 months ago

great tips. especially the first one.

thx

iesux · 6 months ago

Hi there, nice post :) I've linked to it at http://iesux.tumblr.com/ (my IE notes blog). Does the IE6 AlphaImageLoader resizing fix only work for background images? Can I add it to my stylesheet like so:

img {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');
}

I tried the above and it didn't work for me. Thanks in advance :)

iesux · 6 months ago

Oops.. is this fix only for pngs? How about jpgs?

Gabriel Weinberg · 6 months ago

Check out the comments on HN: http://news.ycombinator.com/item?id=660315, specifically this one: http://news.ycombinator.com/item?id=660469. Short answer it should work on JPEGs if they are saved in a certain way.

Gabriel Weinberg · 6 months ago

You need to do the filter per image and you need to add a src='' to the properties, e.g. style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filename.ext',sizingMethod='scale')"

iesux · 6 months ago

Oh, wow. So, there's no way for me to apply this to hundreds of images via my stylesheet without specifying every single filename?

Gabriel Weinberg · 6 months ago

That's how I understand it. The filter actually redraws the image in whatever div or img tag you set it to. Note that you can do it all with JavaScript, however.

Maneet Puri · 6 months ago

I have been resizing images dynamically and have never used this CSS class. And they have been working very fine. However, I'll try this technique if it could get me better results.

Curt · 6 months ago

PNG8 is much better than that, the problem is that Photoshop's PNG8 support is currently crippled. Adobe fireworks has much better support (as have many open source tools).

PNG 8 is indeed quantised into, up to, 255 colours just like gif, however unlike gif you can mark _multiple_ entries in the palette as have alpha information (not just 100% transpaent) E.G. it possible to have 16 entries in the palette that go from (RGBA) #FFFFFFFF to #FFFFFF00 and use those for a gradated fadeout. And under IE6 the default behaviour for PNG8 is to render #RRGGBBAA as #NNNNNN00 when AA<FF As such it can be engineered to look great in non-IE6 and "ok" in IE6

Gabriel Weinberg · 6 months ago

I just found out that there is really no way to get bicubic scaling on Firefox 2. Unlike IE6 vs 7/8, however, hardly any Firefox users use v2 anymore, so it is not much of an issue.