Internet Explorer 11 image pixelated

Question

the logo of my website is on the internet explorer (my test was made with the Internet Explorer 11) very pixelated. The logo looks nice in other browsers (Safari, Chrome, Mozilla Firefox). You you please help me, we the image is so ugly.

I used the Internet Explorer 11 (Version: 11.407.17134.0)

Further more I followed the guide under: IE Fix
But i didn't had any success with this guide...

Image (Logo) Properties: Image size: 5549 x 1101
File size: 56KB
Screenshot of the Problem.

Edit:
In the current screenshot you can find only a text logo. In the future i will replace it with a logo (image). My designer hasn't finished it, thus it isn't in the screenshot. !Sorry for that!

CSS Code:

@media all and (min-width:768px)
body[data-subdomain='customer'] .navbar-brand, body[data-subdomain='school'] .navbar-brand, body[data-subdomain='parents'] .navbar-brand, body[data-subdomain='admincenter'] .navbar-brand {
    background: url(../img/logo.png) no-repeat left center;
    background-size: contain;
    width: 210px;
    margin-left: 15px;
    -ms-interpolation-mode: bicubic;
}

Edit:
JSFiddle: https://jsfiddle.net/hxaeuyp0/11/

Is your logo in your screenshot just the bit that says 'School Manager'? — Bryan, Dec 03 '18 at 11:19
You can also replace the image logo with the text "School Manager" — J.vee, Dec 03 '18 at 11:26
@J.vee thank you very much to post the same idea again :). We are going to replace the logo with an "image logo" — XM37, Dec 03 '18 at 11:27
@XM37 I'm not sure if you want serious comments with the way you're responding but I'm failing to see why you need a 56KB 5549 x 1101 file to render the text 'School Manager'. Maybe there is more that you have not told us. I would recommend just text, or if you need something that scales in a responsive way then a simple SVG file, or just use different CSS classes. — Bryan, Dec 03 '18 at 11:34
@Bryan sorry but how would you response if i ask for a resolving and someone else response only "Just use text" — XM37, Dec 03 '18 at 11:38
@XM37 ... your logo looks like it is 'just text' so J.vee's suggestion is genuine but your responses ('thank you for this gorgeous idea') sounds sarcastic. Also, perhaps you could also explain why you cannot use just text and why you need a 56K image file. We're just trying to help. — Bryan, Dec 03 '18 at 11:42
@Bryan thanks for your support. And i need help! As i previously described above my designer is going to make an "image logo". But i have generally the big problem with pixelated images on Internet Explorer — XM37, Dec 03 '18 at 13:21
What type of image file are we talking about, jpg, svg? Can you put an example online somewhere like jsfiddle? — Bryan, Dec 03 '18 at 13:36

score 1 · Accepted Answer · answered Dec 04 '18 at 07:14

The -ms-interpolation-mode is setting worked only in IE6-IE8, but was removed in IE9. So it will not affect the result.

You could fix the issue by using a plugin which is called "Crossbrowser-Bicubic-Image-Interpolation".

I've just modified some parts of the code from the similar issue thread(IE thumbnail pixelation when high resolution image is set to small size) which works well.

Here is the testing code.

<script src="https://rawgit.com/sukhoi1/Crossbrowser-Bicubic-Image-Interpolation/master/bicubicInterpolation.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('img.first').bicubicImgInterpolation({
            crossOrigin: 'anonymous' 
        });
    });
</script>

<img id="someId" class="first" width="200" src="https://i.imgur.com/pJtQtzR.png">

For more about the pixelation issue, you could refer to this link:https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki

Internet Explorer 11 image pixelated

1 Answers1