IE8 Fullscreen IMG (image scaling / stretching) -ms-interpolation-mode

Hi all,

this is my first post. I have to write this because i lost almost 1 day figuring out this problem. So I hope this helps a lot of you. I also decided to write this article in english so that everybody can understand it… at least i hope so 😉

Ok now let me explain the main issue:

You got a website which has large images on it. For example you got a Background Image Slide where the Images has to be full screen (width: 100%) or you have some other situation where you have to scale /stretch images. Means you don’t give the image the exact size it has, but you scale it down or up by giving a width/height in percentage or also in pixels. So it’s the browsers work to scale the image to the right size. everything is fine in the main browsers Chrome, Firefox, Opera, Safari, IE7, IE6 (with some hacks), but in IE8 the whole thing is really performance hungry. If you want to use fade / fadein/ fadeout on the images or you have some other animations on the site you will notice that the browser is really slow and also the animations are choppy / jumpy, the CPU Usage raises, etc…

First you always think its your fault, so i tried everything…I commented out different animations, all animations, exclude some JavaScript, tried other CSS, but nothing worked. Finlay i found a nice option for Microsoft Internet Explorer 8 and also Microsoft Internet Explorer 7. Its called msInterpolationMode, the CSS for it is -ms-interpolation-mode. You got to options nearest-neighbor (Always use nearest neighbor interpolation mode) and bicubic (Always use high-quality bicubic interpolation mode). It sais to  use bicubic for a smoother resizing, but this option is really performance hungry and IE8 has it as default. So i tried nearest-neighbor. And BOOOM it worked!

Here you can find the MSDN Article:
http://msdn.microsoft.com/en-us/library/ms530822%28VS.85%29.aspx

I also find the counterpart for Gecko Engine:

https://developer.mozilla.org/En/CSS/Image-rendering

I also found out that fancybox is using this option to ensure bicubic use… so it is really slow if you add some easing. Man I hate Internet Explorer!!!

Maybe you also use one of these two scripts, in wich case I recommend to use the low quality version for IE 😉

http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/

http://johnpatrickgiven.com/jquery/background-resize/

Have a nice weekend!

Advertisements

About this entry