Gabriel Weinberg's Blog - Latest Comments in Things about Web Images I Just Learned

Re: Things about Web Images I Just Learned

Gabriel Weinberg — Sat, 20 Jun 2009 09:02:03 -0000

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.

Re: Things about Web Images I Just Learned

Gabriel Weinberg — Fri, 19 Jun 2009 19:54:35 -0000

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.

Re: Things about Web Images I Just Learned

iesux — Fri, 19 Jun 2009 14:28:13 -0000

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

Re: Things about Web Images I Just Learned

Gabriel Weinberg — Fri, 19 Jun 2009 12:15:22 -0000

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')"

Re: Things about Web Images I Just Learned

Curt — Thu, 18 Jun 2009 05:28:36 -0000

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="">

Re: Things about Web Images I Just Learned

Maneet Puri — Thu, 18 Jun 2009 01:58:34 -0000

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.

Re: Things about Web Images I Just Learned

Gabriel Weinberg — Tue, 16 Jun 2009 21:50:40 -0000

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

Re: Things about Web Images I Just Learned

iesux — Tue, 16 Jun 2009 21:47:03 -0000

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

Re: Things about Web Images I Just Learned

iesux — Tue, 16 Jun 2009 21:45:34 -0000

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 :)

Re: Things about Web Images I Just Learned

Rizky Syazuli — Tue, 16 Jun 2009 21:43:53 -0000

great tips. especially the first one.

thx

Re: Things about Web Images I Just Learned

Gabriel Weinberg — Tue, 16 Jun 2009 20:41:58 -0000

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/e....

Re: Things about Web Images I Just Learned

dbugger — Tue, 16 Jun 2009 20:24:30 -0000

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

Re: Things about Web Images I Just Learned

mishoo — Tue, 16 Jun 2009 16:32:21 -0000

WOOT! Philly in the house made it to popurls!

Re: Things about Web Images I Just Learned

sesh — Tue, 16 Jun 2009 14:18:49 -0000

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.