Images in ie are pixelated
The old IE method is:
-ms-interpolation-mode: bicubic;
This is poorly documented.
Image is displaying pixelated in IE
I was able to fix it by removing width:770px;height:auto; from image and sizing the image to 770px in photoshop and uploading it to the images folder.
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
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-edgesNote: Regarding MDN the
optimizeQuality
setting is a synonym forauto
(butauto
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!
Wordpress images load crisply on IE but are blurry on chrome?
The screenshot you’ve provided has different zoom: the image has the width of 294px on IE and 323px on Chrome (i.e. the zoom is 110%). Try using Ctrl+minus to change the zoom of Chrome.
Your image is smaller, and the user wants to display it on a bigger size.
Just use the bigger photos (a common practice is to use photos twice as big, and scale them down — this will also look good on Retina screens).
(And please remove the CSS you’ve added,
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
it will not make the rendering crisp. Instead, it will make it pixelated on bigger zooms. For photos, this is even worse.)
Related Topics
Make Div 100% of Grandparent Container
Sass Mixin Error for Ie Specific Filters Like -Ms-Filter
Fixed Menu on Left and Content Scrollable
How to Change the CSS of Color of Select2 Tags
How to Use Webfont with @Font-Face
How to Add Tooltip to Image on Hover with CSS
Z-Index Behaviour on Pseudo Elements
How to Properly Mix Bootstrap and Bem
:Hover Is Not Working Properly in IE9
Sass Loop to Output Classes with Unique Number and Background-Image
Locally Installed Ttf Overrides Google Fonts
CSS Wild Card for Complex Id'S
Website Layout "Breaks Apart" When Zooming in or Out in Browsers + a Few Other Basic CSS Questions
CSS - Vertically Center an Image Within a Floated Div