Ie Thumbnail Pixelation When High Resolution Image Is Set to Small Size

Internet Explorer 11 image pixelated

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

Images in ie are pixelated

The old IE method is:

-ms-interpolation-mode: bicubic;

This is poorly documented.

High Resolution Image IE Browser Rendering

Have you tried putting this in your CSS?

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

There's also this https://github.com/adamdbradley/foresight.js which looks very interesting

Make sure IE9 isn't in compatibility mode or IE7/8 mode...

Image scaling causes poor quality in firefox/internet explorer but not chrome

It seems that you are right. No option scales the image better:

http://www.maxrev.de/html/image-scaling.html

I've tested FF14, IE9, OP12 and GC21. Only GC has a better scaling that can be deactivated through image-rendering: -webkit-optimize-contrast. All other browsers have no/poor scaling.

Screenshot of the different output: http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png

Update 2017

Meanwhile some more browsers support smooth scaling:

• ME38 (Microsoft Edge) has good scaling. It can't be disabled and it works for JPEG and PNG, but not for GIF.

• FF51 (Regarding @karthik 's comment since FF21) has good scaling that can be disabled through the following settings:

  image-rendering: optimizeQuality
  image-rendering: optimizeSpeed
  image-rendering: -moz-crisp-edges
  

  Note: Regarding MDN the optimizeQuality setting is a synonym for auto (but auto does not disable smooth scaling):

  The values optimizeQuality and optimizeSpeed present in early draft
  (and coming from its SVG counterpart) are defined as synonyms for the
  auto value.

• OP43 behaves like GC (not suprising as it is based on Chromium since 2013) and its still this option that disables smooth scaling:

  image-rendering: -webkit-optimize-contrast
  

No support in IE9-IE11. The -ms-interpolation-mode setting worked only in IE6-IE8, but was removed in IE9.

P.S. Smooth scaling is done by default. This means no image-rendering option is needed!

better quality thumbnails from larger image files

IE's default image resizing algorithm is not that nice - it can be changed by tweaking a registry entry, but of course that is outside of your control.

However, apparently it can also be triggered to do a better image resize through css

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

source: http://edmondcho.com/blog/2009/03/17/internet-explorer-image-resizing-tip/

How can you make images resized with css look good in IE?

Fortunately there's a way to force IE7 to use the bicubic scaling algorithm (which looks very nice) with a simple css rule:

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

The results are great, and it can be done site-wide with this single rule.

For IE6 you're out of luck as far as I know.

Why does the thumbnail I create have a larger file size than the original image?

The thumbnail you create has 4 times the bit depth of the original. Reducing the bit depth will reduce the file size.

---

Edit:

To reduce the bit-depth is quite simple, but I can't see any way to do this via CodeIgniter:

$im = imagecreatefrompng('./original.png');
imagetruecolortopalette($im, false, 256);
imagepng($im, './output.png');

However, this file is still larger than the original (~17KiB vs. ~13KiB). Running it through TinyPNG gets it down to ~13KiB, close to the original.

---

Related Topics