My page contains an image like in example below. Width of the image depends on browsers width and height is being changed authomaticly (something like ).
This image looks nice after resizing in all browsers except IE (I’ve tested in IE7 and IE6). In IE image looks ugly. Some parts are thicker than should be and some parts are thinner.
alt text http://img39.imageshack.us/img39/7202/88017917.png
I’m almost sure that it is due to IE doesn’t use smoothing. But I wonder how to solve this unpleasent problem?
I dont have ie7 but this code should work fine there. But how to fix it for ie6?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
img { -ms-interpolation-mode:bicubic; }
</style>
</head>
<body>
<div style="width: 50%;">
<img src="pp.jpg" width="100%">
</div>
</body>
</html>
IE 6 is a riskier proposition, but can
show improved image resizing when the
AlphaImageLoader CSS filter is
applied, the same filter commonly used
for properly displaying PNGs with
alpha transparency. For example,
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=’/path/to/image.jpg’,
sizingMethod=’scale’);. While there is
no transparency to apply here, the
resizing method applied gives a
higher-quality result.
I cant make it work yet, actually I haven’t ever used filters. Maybe anyone can give me working code?
Unstoppable Robot Ninja has an article with more information and some code to make it work on IE6 and IE7.
The problem is not IE specific, but platform specific. Firefox, Safari etc. all use their own rendering engine that scales much smoother than native Windows scaling does.
I’d advise to add the CSS declarations or JavaScript code in Conditional Comments, so non IE browsers don’t have to download the extra code or issue another request. This also keeps your CSS clean and valid.