Microsoft Edge Image Scaling

Question

How do i make an image scale with bicubic for MS Edge? Is there some CSS or similar that can change the behavour.

See this page: http://duttongarage.com/Race-Workshop~317

On the right there are two images that have textured background, you can see the weird artifacts quite clearly

Chrome on the Left, MS Edge on the Right. As you can see there is some weird moire effect from the resize being nearest neighbor or linear, not bicubic.

Another example that is more typical:

Microsoft Edge on Top, Chrome on the Bottom. Notice the pixelation, its like what i would expect from browsers from the last decade.

Answer 1

Sorry for stupidness of answer, but, as I can see, Edge doesn't support any image-rendering options, so, please, try to use jQuery to resize picture.

For example, you can use solution from this answer: just create <canvas id="canvas"></canvas> under your image and see:

screenshot

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

img = new Image();
img.onload = function () {

    canvas.height = canvas.width * (img.height / img.width);


    /// step 1
    var oc = document.createElement('canvas'),
        octx = oc.getContext('2d');

    oc.width = img.width * 0.5;
    oc.height = img.height * 0.5;
    octx.drawImage(img, 0, 0, oc.width, oc.height);

    /// step 2
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);
}
img.src = "http://duttongarage.com/img/2167/824";

You can easily adjust oc.width with math. For example, you can use

oc.width = $(".me-wrap-image").width();
oc.height = $(".me-wrap-image").height();

Better, if you adjust your structure by

| .me-wrap-image
| .some-class-to-get-width-and-height
-> img

for img.src you can use

$("div.some-class-to-get img").each(function(){
    img.src = $(this).attr('src');
});

But I'm not sure, how to make it work properly. Hope you fix it :)