CODEWITHSUNDEEP
cssimageinternet-explorer
XM37
XM37

Reputation: 39

Internet Explorer 11 image pixelated

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/

Upvotes: 2

Views: 3622

Answers (1)

Jenifer Jiang
Jenifer Jiang

Reputation: 381

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">

the result image

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

Upvotes: 1

Related Questions