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.

you could simply remove the 2x2 pixelated pattern overlay from your images :) — Roko C. Buljan, Aug 14 '15 at 00:46
This was just an obvious artifact of the scaling, it happens to all images as far as i can tell. I will add another example image. — Chris Seufert, Aug 14 '15 at 01:05
Cannot find any valid official Docs. Could it be that it has not yet landed in Edge? https://developer.mozilla.org/en/docs/Web/CSS/image-rendering — Roko C. Buljan, Aug 14 '15 at 01:16
I cant find anything about it either, and it would seem that googling "Edge" is not particularly usefull. — Chris Seufert, Aug 14 '15 at 01:38
Yes, since it's a brand-new browser (*"browser", is it finally?*) - we still need to figure out how to return relevant search queries... Time will tell :( — Roko C. Buljan, Aug 14 '15 at 01:40
The non-standard CSS property for this was removed in Edge. One of the reasons for this (beyond it being non-standard) is developers abuse the feature to target IE. When the bugs they’re targeting are fixed in Edge, the site breaks as we still get the hack. We’re working in general on improving our image scaling quality in Edge. In the mean time you can vote on the following if you’d like to see the CSS image-rendering property in Edge https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/7902426-image-rendering-pixelated — David Storey, Aug 14 '15 at 07:29
I would just like to see a better default scaling method. I was hoping to find a workaround for the short term. — Chris Seufert, Aug 14 '15 at 07:33

score 2 · Answer 1 · edited May 23 '17 at 12:24

2

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 :)

edited May 23 '17 at 12:24

Community

1
1

answered Jun 10 '16 at 11:49

x0 z1

1,704
1
9
12

This is an interesting solution, I'm not sure how well it would perform with fluid layout when resizing the browser window. – Chris Seufert Jun 10 '16 at 11:51
@ChrisSeufert, Thank you. Well, yep. Image will only resize, when you refresh browser window. Try my comments (`oc.width = oc.width = $(".me-wrap-image").width();`). If you won't resize browser window after page loaded, everything, I believe, will be OK. – x0 z1 Jun 10 '16 at 12:19
@ChrisSeufert, but, as I can search, even big companies don't do it. For example, JivoSite module. He just generates ONCE his position and that's all, he won't resize, if you resize browser window. But, OFC, you can use `window.setInterval(function(){ // recall function }, 5000);` But, really? :) – x0 z1 Jun 10 '16 at 12:58
@Stanislav Talanov, it this still true that Microsoft Edge does not suport image rendering options? I have enlarged an icon using css `transform: scale(2)` and `-ms-interpolation-mode: nearest-neighbor` etc and in all browsers the icon is nicely edgy and aliased however in MS Edge its ugly anti-aliased. Any suggestions how to pixelate the resized images in MS Edge? – Sam Jun 30 '17 at 13:11

xb1itz · Answer 2 · 2015-11-20T15:32:52.797

1

Obsolete

This is obsolete solution and does not work on recent versions of MS Edge.

===========

This little css tweak fixed problem for me:

img {
    -ms-interpolation-mode: bicubic;
}

edited Nov 20 '15 at 15:32

answered Sep 10 '15 at 12:43

xb1itz

1,022
10
17

2

This does nothing in Edge build 12.10240 – Chris Seufert Sep 11 '15 at 03:00
2

Now it also does nothing in IE11(at least in Win10) ---- the geniuses REMOVED this hack, WITHOUT fixing the default-engine ---- as a demo, browse to microsoft.com on your desktop, scale down the browser-window and see how broken both MS browsers are compared to Chrome and Firefox ---- unbelievable in this responsive era... – Rop Nov 17 '15 at 22:58
@Rop: In a perfect world, prefixed properties should *never* be used in production. Actually, if someone is trying to make a good responsive site, I'd think the srcset feature would be a much better option to give a smoother load time on different devices. – Katana314 Nov 20 '15 at 15:44

Microsoft Edge Image Scaling

2 Answers2