0

I am using the following CSS to resize a larger image: 

img { 
  max-height: 100px;
}

This image displays with the appropriate aliasing within Chrome and Firefox but the edges look very aliased (choppy) within Internet Explorer 11. I have tried the approach here but that does not have any impact within IE11.

The image cannot be resized, and reuploaded, as this is a content management system that is trying to being responsive for our visitors. We also cannot rely on server side scripting.

what is the best option here?

Community
  • 1
  • 1
rlsaj
  • 735
  • 1
  • 12
  • 37

1 Answers1

2

It looks as though the best option is to use the 

-ms-interpolation-mode: bicubic;

to help you out with IE <9 but after that it's just how the image is rendered. As of IE9 they no longer use this command but the problem still persists.

In most of the discussion the argument is that you shouldn't scale down a larger image, it's bad for performance. It's a good argument, but not a solution for your problem.

You could trial something like ReSrc.it. This could allow you to get past the restrictions of your current CMS. To get this working (it is a paid for service) you would need to follow a similar pattern

<img data-src="http://www.your-site.co/image.jpg" class="resrc"/>
<script src="//use.resrc.it/0.9"></script>
<script>
  resrc.ready(function () {
    resrc.run();
  });
</script>
justinavery
  • 2,596
  • 2
  • 19
  • 21