Before you say this is an existing question, or that all I need to use is ms-interpolation-mode, or that I just need to have a pre-scaled version of the image on the server and serve that up, read the question. Please. None of those are appropriate.
I have an app that draws a very large image using the HTML5 canvas in the browser on all modern browsers. I pull an image out of that canvas and display it (shrunk down considerably in size on-screen). The scaled down image looks fine on Chrome, Firefox, Safari, or Opera whether Windows or Mac. IE however looks very terrible, even though I'm not testing this on old versions of IE (like IE 7 where the ms-interpolation-mode works), but only on IE 9, 10, and 11.
Why are they not smoothly scaling down the image? I thought later versions of IE could do this?
Here's a screenshot of my image saved off as a PNG file and loaded up in IE 11. Note that it's broken even if all I'm doing is looking at the PNG. My software and my web page are completely out of the picture here. This is just IE 11 showing a PNG file.
Am I going to have to do some kind of resizing in the canvas just to make a reduced size version for IE because they can't handle image scaling that every other browser on the market handles with ease? Is there nothing I can turn on via CSS to make this look better?
Here's a direct link to one of the generated images: http://i.imgur.com/T9wgHSo.png. Show me how to make this look good in a significantly smaller (say 0.25x) size in a page for IE 9, 10, and 11.
Why are they not smoothly scaling down the image? Well because Internet Explorer simply does not support a smooth form of interpolation any more. It was indeed supported in earlier versions of Internet Explorer (version 7) by using ms-interpolation-mode.
Newer versions of IE do not support this. It is a very frustrating IE issue and cannot be solved by CSS.
The only options you have is to divert to alternatives (downscale it on the server or obey Microsoft and use Silverlight... ;-) ).
Hate to say it but the only true solution is to just live with it.
There seems to be two questions.
The first is about downscaled <img> and the second is about downscaling image in canvas.
The first happens only on IE but the later happens to other browsers too.
You are doing well, but you can clarify your question more next time; both has been answered on SO and each has different solutions.
For <img>, as discussed in other answers there is nothing you can do, except to provide a properly downscaled image.
For canvas, the question boils down to downscale quality with drawImage, and has already been answered:
HTML5 Canvas Resize (Downscale) Image High Quality?
Here is a sample, using the algorithm in that answer, that produce a nicely scaled image on IE 11:
<!DOCTYPE html><meta charset="utf-8"/>
<img width='2550' height='3300' src='T9wgHSo.png' />
<script> 'use strict';
var img = document.getElementsByTagName('img')[0];
document.body.appendChild( downScaleImage( img, 0.1 ) );
img.parentNode.removeChild( img );
function downScaleImage(img, scale) { /* Please copy code from the other answer */ }
function downScaleCanvas(cv, scale) { /* Please copy code from the other answer */ }
After encountering the same problem myself, I found this Crossbrowser-Bicubic-Image-Interpolation script. I tested it on my Win7 virtual machine in IE11 and it works.
After downloading the .zip you can open the demo.html file to see how to apply the script. Notice on line 26 of that HTML file there is jQuery code that targets only images with the class "first":
$('img.first').bicubicImgInterpolation({
But you can remove ".first" to make it target all images:
$('img').bicubicImgInterpolation({
So that's all you need. jquery.js, bicubicInterpolation.js, and the <script> that calls the function.
These items in the <head> tag are probably a good idea to include too:
<!-- enable canvas for old versions of IE -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="edit-Type" edit="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Related
Google Chrome and Mozilla Firefox doesn't seem to be yielding the same result when it comes to the rendered output with their emulators.
For example, Google Chrome seems to show rendering of iPhone X (375x812 in portrait mode, and with a device pixel ratio of 3) fonts very small.
According to my calculations, h1--which I set to 72px, seems to end up with font size 24px (that is 72 / 3, where 3 is the device pixel ratio). This doesn't happen with tablet (for example, iPad Pro, where the device pixel ratio is 2).
I expected the font size to be 72px / 2 = 36px on tablet, but it wasn't. It was rendered properly, as a device with a pixel ratio of 1 (desktop, for example).
Why is this happening with mobile or a device with a pixel ratio of 3 or above only? And, of course, this doesn't seem to be happening with Mozilla Firefox, where font size is rendered the same across all of these devices.
Which browser's rendering is correct in this case? Google Chrome or Mozilla Firefox?
The screenshots are given below.
Google Chrome Screenshot
Mozilla Firefox Screenshot
include the meta tag like this.
<meta name=viewport content="width=device-width, initial-scale=1">
most people here downrate questions without knowing anything. they don't just go to the basics, these are the people who can't build a site without depending on a framework like bootstrap. there this won't be a problem coz it's already taken care of by experts.
for more details, refer this excellent w3schools article
I am trying to solve a problem with internet explorer 10. I made a gif animation in photoshop (its only 1mb) and it works in all browsers well, except, Well take a guess... internet explorer. It looks like there is a pixel delay or rendering problem.
Gif animations of other websites doesn't have the problem. I also tried all kinds off different gif formats. Anyone any ideas?
I used the html img element to display
<img src="database.gif" id="myVideo">
here is printscreen of my pc screen in IE10
This is the gif file (Open this page in IE)
I have a background image which is responsive. It adapts to the container with the background-size: 100% method which keeps the aspect ratio. However, for older browsers like Firefox 18 and below and all versions of internet explorer I get a bad image when scaled (jagged or blurry). I tried the css bicubic interpolation (internet explorer) and "image-rendering" (firefox) fix yet no effect what can be observed.
My question is: is there a jquery or javascript way that does the same job while preserving the quality? Like a browser independent scaling method. Googled but found nothing.
I know this is not ideal in terms of speed and I should instead do the resizing in my image editing software but this is not an option in my scenario.
Would be happy to hear about your answers,
Sincerely,
Michael
The only good solution I found to provide the best possible quality is by using a css responsive method.
For latest chrome & safari you have the new HTML attribute SRCSET.
For olders browsers, you can use your images as a div background and change it dynamically with CSS only.
For very old browsers, the only way is to grab images with different sizes using JS...
Hi I'm having some trouble with IE7 when doing a map.
I've made an xml and ajaxed it to grab points based on where the user is on the map.
It works well, and in FF, IE8 no problems when they click the points. On IE7 it firstly misses the cross at the top right, has some problems with the border (fixed that with some margin) and more importantly cuts out an portion of the image which I can't figure out.
I've attatched an image and what you see there is basically an a tag with a background image.
I've taken the title out as I thought that might cause it. Basically I'm stumpped any ideas.
Thanks
Richard
There seems to be a bug in Internet Explorer which has to do with how transparent PNGs are scaled when using the Zooming feature of the browser. It's difficult to reproduce because it's a local browser setting.
It happens even in maps.google.com. See the example below at 125% zoom, using Internet Explorer 8:
Is your zoom set to anything other than 100%?
On a site of mine, my client is reporting that images that are reduced in size by code (i.e. specified a width/height) are appearing jagged and pixellated. I have asked her what browser she uses and inevitably it's Internet Explorer.
Is there a way to optimise images in IE or do I need to manually resize the images on photoshop before I put them on the site?
The images in question are resized from 220x220 to 80x80 and I have javascript that expands them to 220x220 upon clicking.
Resizing down or up in a browser can look terrible. It varies from browser to browser, but apparently IE is the worst.
It's best to either write a server side script to create thumbnails, or to manually do it yourself if quality of the image is important. It also saves bandwidth as you don't need to load the big image and only display 1/10th of the pixels.
You should avoid using width and height for resizing. It'll cause a longer loading time (on slow connections and big images).
A better idea is making thumbnails (with Photoshop for example) and use the "Web save" option to reduce the size even more.
http://acidmartin.wordpress.com/2009/01/05/better-image-scaling-and-resampling-in-internet-explorer/
Bicubic image resampling is turned off by default in IE. You can use this to turn it on in your reset stylesheet:
img
{
-ms-interpolation-mode: bicubic;
}
use timthumb, it will create thumbnails for you, you just need to link to the script, and specify the size of the thumbnail and that's it. http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
i'm using it on one of my sites -> http://iv-designs.org/
you can see the images are clean and not pixelated.
Assuming your images are JPEGs, the easiest option is to use IE7's bicubic image resizing feature, which you can turn on using CSS:
img { -ms-interpolation-mode: bicubic; }
Be aware that it's got performance implications (using it a lot will slow the browser down). It also has no effect in IE6, and is no longer needed in IE8.
Another way (which does work in IE6) is to use Ethan Marcotte's wonderful Fluid Images script, which uses some damn clever CSS filters to fix the problem in IE6 and 7. My own variation on the theme fixes the right click problem, but requires jQuery.