i've got a logo header image on my website that is 900px wide, which fits in a container that scales it down to fit within the title bar; the reason being an image created to fit in the title bar looked awful on high resolution mobile devices.
I've found that my image looks absolutely fine in chrome, but in IE10 it just looks shocking. See for yourself; www.cmvisual.com
I have tried the using the -ms-interpolation-mode:bicubic code to try to remedy the issue, but it doesn't seem to work (a quick look on the ms website says it's obsolete?).
Here is my code:
<html>
<head>
<title>Chris MacDonald Visualisation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/styles.css" rel = "stylesheet">
<style>
img.highqual { -ms-interpolation-mode:bicubic; }
img.nearestn { -ms-interpolation-mode:nearest-neighbour; }
</style>
</head>
<body>
<div class = "navbar navbar-inverse navbar-static-top" Role = "Navigation">
<div class = "container">
<div class = "navbar-inside pull-left">
<a href = "index.html">
<img class = "logo1" src = "img/motif.png" class = "highqual">
</a>
</div>
Am I missing something, and does anybody have any suggestions as to what to do to remedy this? I have considered perhaps including tags to display different versions of the image on different devices, but this seems time consuming and something of a cheap workaround?
Many thanks in advance to anyone that takes their time to help.
I'm having some issues with IE10 downsampling of images too, and as you pointed out, that proprietary css style is not supported anymore in IE10 (moreover since IE9). There are some js related fixes like this, but, for your specific case, I would recommend the use of a svg logo (if you don't need to support IE8), instead of png. You can find good information on this here.