Image scaling in IE 11, 10, and 9 is terrible

javascript css image internet-explorer canvas

31,266

Solution 1

There seems to be two questions. The first is about downscaled <img> and the second is about downscaling image in canvas. The first happens only on IE but the later happens to other browsers too.

You are doing well, but you can clarify your question more next time; both has been answered on SO and each has different solutions.

For <img>, as discussed in other answers there is nothing you can do, except to provide a properly downscaled image.

For canvas, the question boils down to downscale quality with drawImage, and has already been answered: HTML5 Canvas Resize (Downscale) Image High Quality?

Here is a sample, using the algorithm in that answer, that produce a nicely scaled image on IE 11:

<!DOCTYPE html><meta charset="utf-8"/>
<img width='2550' height='3300' src='T9wgHSo.png' />
<script> 'use strict';
var img = document.getElementsByTagName('img')[0];
document.body.appendChild( downScaleImage( img, 0.1 ) );
img.parentNode.removeChild( img );

function downScaleImage(img, scale) { /* Please copy code from the other answer */ }
function downScaleCanvas(cv, scale) { /* Please copy code from the other answer */ }

Solution 2

Why are they not smoothly scaling down the image? Well because Internet Explorer simply does not support a smooth form of interpolation any more. It was indeed supported in earlier versions of Internet Explorer (version 7) by using ms-interpolation-mode.

Newer versions of IE do not support this. It is a very frustrating IE issue and cannot be solved by CSS.

The only options you have is to divert to alternatives (downscale it on the server or obey Microsoft and use Silverlight... ;-) ).

Hate to say it but the only true solution is to just live with it.

Solution 3

After encountering the same problem myself, I found this Crossbrowser-Bicubic-Image-Interpolation script. I tested it on my Win7 virtual machine in IE11 and it works.

After downloading the .zip you can open the demo.html file to see how to apply the script. Notice on line 26 of that HTML file there is jQuery code that targets only images with the class "first":

$('img.first').bicubicImgInterpolation({

But you can remove ".first" to make it target all images:

$('img').bicubicImgInterpolation({

So that's all you need. jquery.js, bicubicInterpolation.js, and the <script> that calls the function.

These items in the <head> tag are probably a good idea to include too:

<!-- enable canvas for old versions of IE -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="edit-Type" edit="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

31,266

Author by

John Munsch

John Munsch is a professional software developer with over 35 years of experience. These days he's leading a team building modern web app front ends with Angular. He's definitely enjoying a life filled with JavaScript after more than 20 years spent in the Java, C++, and C world.

Updated on September 04, 2020

Comments

John Munsch over 3 years

Before you say this is an existing question, or that all I need to use is ms-interpolation-mode, or that I just need to have a pre-scaled version of the image on the server and serve that up, read the question. Please. None of those are appropriate.

I have an app that draws a very large image using the HTML5 canvas in the browser on all modern browsers. I pull an image out of that canvas and display it (shrunk down considerably in size on-screen). The scaled down image looks fine on Chrome, Firefox, Safari, or Opera whether Windows or Mac. IE however looks very terrible, even though I'm not testing this on old versions of IE (like IE 7 where the ms-interpolation-mode works), but only on IE 9, 10, and 11.

Why are they not smoothly scaling down the image? I thought later versions of IE could do this?

Here's a screenshot of my image saved off as a PNG file and loaded up in IE 11. Note that it's broken even if all I'm doing is looking at the PNG. My software and my web page are completely out of the picture here. This is just IE 11 showing a PNG file.

Am I going to have to do some kind of resizing in the canvas just to make a reduced size version for IE because they can't handle image scaling that every other browser on the market handles with ease? Is there nothing I can turn on via CSS to make this look better?

Here's a direct link to one of the generated images: http://i.imgur.com/T9wgHSo.png. Show me how to make this look good in a significantly smaller (say 0.25x) size in a page for IE 9, 10, and 11.