Enhancing Image Quality in Microsoft Edge

Question

Enhancing Image Quality in Microsoft Edge

I'm trying to figure out how to make an image scale with bicubic in MS Edge. Is there a CSS solution or something similar that can change this behavior?

Check out this page:

On the right side of the page, there are two images with textured backgrounds, and you can clearly see some strange artifacts.

https://i.sstatic.net/hd8au.jpg

The image on the left is from Chrome, while the one on the right is from MS Edge. There seems to be a moire effect caused by the resizing method being nearest neighbor or linear, rather than bicubic.

Here's another example with a more typical scenario: https://i.sstatic.net/K02HH.jpg

Microsoft Edge is at the top, and Chrome is at the bottom. Notice the pixelation - it looks like something I would expect from browsers back in the last decade.

css microsoft-edge

Answer 1

Answer №1

Apologies for the simplicity of this answer, but it appears that Edge does not support image-rendering options. To resize an image, you may want to consider using jQuery.

One solution is to follow the guidance provided in this response: simply create a

<canvas id="canvas"></canvas>

element below your image and refer to:

the screenshot here

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 adjust the value of oc.width using mathematical calculations. For instance, you could use

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

It would be beneficial if you organize your structure like this

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

To set img.src, you can utilize

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

I'm uncertain about how to ensure its proper functioning. Hopefully, you are able to resolve any issues that arise :)

Answer 2

Apologies for the simplicity of this answer, but it appears that Edge does not support image-rendering options. To resize an image, you may want to consider using jQuery.

One solution is to follow the guidance provided in this response: simply create a

<canvas id="canvas"></canvas>

element below your image and refer to:

the screenshot here

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 adjust the value of oc.width using mathematical calculations. For instance, you could use

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

It would be beneficial if you organize your structure like this

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

To set img.src, you can utilize

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

I'm uncertain about how to ensure its proper functioning. Hopefully, you are able to resolve any issues that arise :)

Answer 3

Answer №2

Outdated

This solution is no longer effective and may not function properly on current versions of MS Edge.

===========

I found a simple CSS adjustment that resolved the issue for me:

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

Answer 4

Outdated

This solution is no longer effective and may not function properly on current versions of MS Edge.

===========

I found a simple CSS adjustment that resolved the issue for me:

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

Enhancing Image Quality in Microsoft Edge

Answer №1

Answer №2

Similar questions

What are some other options to using position: absolute when working within an inline position:relative?

Utilizing jQuery for seamless transitions between multiple background images

"Utilizing Bootstrap to create a visually appealing image and text combination in the

Using Selenium IDE to click on a checkbox within a table row

The Div elements are not displaying properly in the correct size on the responsive webpage

highcharts-ng expands in flexbox without contracting

Aligning object in middle of a responsive image using Bootstrap

Freshly updated, discover how to create an underlined navbar menu item

Is it possible to enlarge a div using "display: table-cell" property when clicked on?

Automatic playback of the next video in a video slider

Using the flexslider to override CSS styles in an <li> element

The background on my modal remains unchanged

Creating Transparent Rounded Backgrounds in Google Chrome Packaged Apps: Achieving the same look as Google Hangout app

Python Ordering menu items for the Pelican restaurant

Include previous input as a "phantom" thumbnail to the slider element of type "range"

Troubleshooting display glitches on Bootstrap modals in Internet Explorer 11 and Microsoft Edge

unable to properly display application.html.erb

Is it possible to reposition the vertical scrollbar to a location that is not on the left or right side?

Iterating through an SVG path multiple times

JavaScript for Verifying Phone Numbers