none
The awful Internet Explorer Image renderengine RRS feed

  • Question

  • The image rendering engine of IE 8,9, 10, 11 is always awful since years of in compare to ALL other browsers.

    Example: If you have responsive Design you upload images at the highest resolution (1024x768) and the Browser scale this image as needed.

    ALL browsers deliver scaled and sharp images except the IE 8,9, 10, 11 (IE 7 use -ms-interpolation-mode:bicubic) which no longer work.

    Compare it with the frontpage of   www.microsoft.com - scale it to Smartphone Size and see the images: IE 8,9, 10, 11 always has NO anti-aliasing.

    PLEASE FIX THIS - or people using IE must accept this...?!


    Monday, March 3, 2014 12:43 PM

All replies

  • Sending giant images to the client and then scaling them down is exactly the opposite of what you should be doing for performance.
    Monday, March 3, 2014 4:31 PM
  • This Image scale Problem and non aliasing only exists with IE, all other Browser can handle this. And this aren't gigant images, it is the way of responsive Design.

    It's an IE Problem which you can watch on www.microsoft.com page and that's funny that ALL other browser show sharp images....

    Tuesday, March 4, 2014 12:20 PM
  • This forum don't show the original file size of the Image above (1088  x 422  scaled to 604 x 209) and the IE don't have an Option to view the original size or open the image in an new Tab or Window (right mouse over the image: View original image is greyd out - another great IE Feature....)

    Here is the original image with artifact on the hair and the Laptop ONLY in IE.

    http://social.msdn.microsoft.com/Forums/getfile/426523

    Ps.: Sorry, I forgot: to mark the URL above and Right click: open URL, also doesn't work in IE. You have to copy the URL add a new Tab and Paste it in a new Tab manual ....
    • Edited by Eagle34 Wednesday, March 5, 2014 4:04 PM
    Wednesday, March 5, 2014 3:53 PM
  • You might paste the url of the webpage here,

    I personally can not reproduce the poor image display your showing in the picture you posted via hyperlink either,

    I would suggest as a option to check with the computer manufacture for graphics card driver updates or switch to software rendering in Internet options,

    http://www.sevenforums.com/tutorials/149063-internet-explorer-gpu-hardware-acceleration-turn-off.html

    Wednesday, March 5, 2014 4:49 PM
  • Sorry, it has nothing to do with GPU or computer manufacture for graphics card driver. It is a scale issue of all InternetExplorer Versions on sites with responsive design! The Problem exists also on IE 11.

    And yes, you need to resize the Browser Window to simulate different Desktop size.

    Thursday, March 6, 2014 10:18 AM
  • Why would I do that ?

    I like full screen viewing why would I waste when I use duel screens :)

    The other screen shot was over sized but that OneDrive not knowing what to do with Zoom settings,

    Anyway this is 1600-1050 +- still looks pretty good = Use Software rendering.

    https://upkmkq.dm2301.livefilestore.com/y2p4rDuDnhj2LOe4e2l_7jOJBwgtDp-w-OorKJ_QIjFxXGEsT46knukDcmD6F8RXBahmQf5W5oS0k1if9dfrtteqk6-SZsu2vK2TIpnxdfLY3g/looks%20fine%20to%20me-2.jpg?psid=1

    Good luck,

    Without knowing what hardware your using this thread is useless,

    If you want to fill out your system spec's and look for issues try this forum,

    http://www.sevenforums.com/graphic-cards/

    Fill in your system spec's,

    http://www.sevenforums.com/tutorials/180324-system-info-see-your-system-specs.html

    http://www.sevenforums.com/tutorials/9733-screenshots-files-upload-post-seven-forums.html

    If your on win-8-8.1

    http://www.eightforums.com/

    Cheers.



    • Edited by ThrashZone Thursday, March 6, 2014 3:14 PM
    Thursday, March 6, 2014 2:34 PM
  • Why would I do that ?

    I like full screen viewing why would I waste when I use duel screens :)

    Sorry, you don't understand Responsive web design.

    http://en.wikipedia.org/wiki/Responsive_web_design

    You upload 2 or 3 Sizes and the other resizing is done by the Web browser. It works well in ALL Browsers on PC, Tablet and Smartphone accept Internet Explorer.

    So this Thread is a hint for MS-Dev to fix this, otherwise all the IE users have this jaggies, artifact, awful images and Photos on some Responsive web design Pages and  www.microsoft.com  is one of this pages.


    Friday, March 7, 2014 12:14 PM
  • May be this is a issye related to SVG…

    Post questions about html, css and scripting to the MSDN IE Web Development forum: http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads 

    If you really think it is a IE issuse, a link for you to report a feedback to Microsoft: https://connect.microsoft.com/

    Tuesday, March 11, 2014 1:45 AM
  • Try reducing the window size.   That's the issue.

    FWIW I was only able to see the difference by using the Developer Tools, Emulation tab.  Browser profile: Windows Phone.  That was a much too small frame to see anything with but by then choosing the highest possible resolution I could finally see that there was a difference in the rendering of the hair.  The "jaggies" on the Surface Pro edges were also much more evident then.  

    But what about a difference in aspect ratio?  E.g. I think that I get the most disappointing rendering differences, especially with text, when I switch from my Tablet to my wide-screen monitor.  This example shows the same difference and to me that is IE's most irritating deficiency.  Trying to read non-crisp text is tiring.

    I had another ironic example of that only yesterday when I was trying to read some of the source text in this video (at about the 25:00 minute mark--Max, you may be interested in the example given there for another reason <w>)

    http://channel9.msdn.com/Events/Build/2013/2-066

    In fact, I don't even need to look at the text in the video, just comparing the text rendered from the containing page is enough.  And that's with Zoom 125%, so it's not just a lack of interpolation that's the problem.

    Does Firefox do a better job of that too?  FWIW I can no longer test that case.  I only have Surface 2 RT for at least the next 6 weeks.   <eg>

     



    Robert Aldwinckle
    ---

    Tuesday, March 11, 2014 7:19 PM
    Answerer
  • Sending giant images to the client and then scaling them down is exactly the opposite of what you should be doing for performance.

    This is the classic response where YOU fail to recognize that the Internet Explorer should not dictate a policy that is different from everything else on the market.

    There is no doubt that IE handles image scaling worse than every other browsers. Instead of supporting that the issue is fixed YOU are trying to advocate that people should avoid having the need for scaling images.

    Friday, April 25, 2014 8:53 AM
  • Im facing the same problem and wonder if this point will be handled by Microsoft. Comparing to Firefox i could say in french that IE rendering is "Degueulasse".
    • Edited by Predalpha Tuesday, April 29, 2014 1:46 PM
    Tuesday, April 29, 2014 1:45 PM
  • I believe Microsoft should learn more from photo shop,

    Poor quality images resize poorly,

    Starting out with a high resolution image helps quite a bit,

    Most images I've seen only use 72 dpi when 300 to 599 would be better,

    But dpi and resolution is a fairly convoluted subject,

    Most web designers believe 72 dpi is fine and it really doesn't matter for web stuff,

    I would of course disagree/ dpi/ resolution for images isn't just a printing preference when scaling down or up,

    It dictates Quality of the image start high and you'll have better results,

    Microsoft what can you say lol Funny video :D 

    Tuesday, April 29, 2014 9:00 PM
  • The majority of people replying here have no clue about Responsive Web Design and how you rescale images based on the browser window size so you can support phones and tablets with a single web page design.  We use media queries and we change the layout based on some window size standards and this kind of design REQUIRES resizing (down-sampling) larger images.

    We're using Microsoft's own web site to demonstrate the problem!  The designers of the site know exactly what they're doing. They aren't using low-resolution original images. They are using proper resolution images as is clearly displayed when using the website at normal size.

    As soon as you start shrinking your browser window you start to see the issue. It's a BROWSER issue with IE. Plain and simple. You can argue your viewpoints all you want but it is still going to be a IE BROWSER image resizing issue.

    Every other browser gets it right. IE does not. Not even on MS's own website.

    Here is another newer example. You're looking at IE11 on the left and the latest Chrome on the right. In the PHONE IMAGE, Cortana circles are jagged and you can't even read the text on the phone image in the IE browser scaled down. On the chrome side, proper resizing.  Proof Positive!

    Example of IE Image Resampling Issue

    Microsoft, please fix this. Thank you.


    -- Bob


    • Edited by blindabury Thursday, July 31, 2014 4:05 PM Minor clarification and typo fixes.
    • Proposed as answer by Eugene Kuzmin Monday, September 29, 2014 3:10 PM
    Thursday, July 31, 2014 4:01 PM
  • There is a jQuery plugin which fixes the issue for IE9-IE11 and Edge of all versions.

    Wiki and Demo



    • Edited by ItSurfer Saturday, January 23, 2016 1:42 PM
    Saturday, January 23, 2016 1:40 PM
  • Not only is the image rendering awful.
    But when cleaning it up, look how inferior IE performance is, compared to Firefox or Chrome.

     

    https://googledrive.com/host/0B8BLd2qPPV7XclhDOGRZVWhQckk/shrink-and-smooth.html

    https://prunemaster.github.io/shrink-and-smooth/

     

     


    So, why bother trying to support ms-browsers.
    btw.  You can drag-n-drop other images into this demo.
    Scale down the window to see the effects.

    Sunday, April 17, 2016 7:23 AM
  • Wow that is one of the dumbest comments I have seen from a supposed professional.

    To account for retinal screens ( like mobile, high end laptops etc... ) or for responsive designs you do not use the image sized for the browser you are looking at it in, at the resolution you are running your screen in.

    What you should do is provide an image that maintain's its clarity across devices. If you use @2x images for retina / mobile then the browser still scales the image to fit the assigned div. But if you make a responsive website the browser at say 800px wide would have already started adapting the layout, columns will be shrinking and so will the contents inside.

    This happens because of advanced CSS ( not really ) that lets you assign background-size: cover / contain.

    What every other browser has done is implement a decent image scaling routine so that when images are resized the outcome doesn't look like it was created on an Amiga, in the early 1990's.

    You can see this in action on https://www.microsoft.com where the advertisement panels for the new surface laptops scale the background image.

    What people are noticing, apart from every other bug in IE 11 & Edge ( seriously it didn't even work well with drop down selects on launch ) is that it scales the images very poorly.

    I know for Microsoft this isnt much on an issue, their clients are used to putting up with poorly coded and awfully optimised software, but for other developers having to explain to clients that their website / email / presentation will look much worse on Windows than any other OS / Browser is annoying in the least and can cost more development time trying to find work arounds for what should not be issues.

    I see Eric is working at Google now and their policies are getting much the same. Some of the bugs in Android & Chrome remind me of having to support IE6 / 7 / 8 and how Microsoft did their best to ruin the web experience.

    In the end though, you see how Microsoft has lost the browser / search / mobile markets.

    It is because of the arrogance like Eric's and how they continued to put out rubbish until something else came along and then essentially EVERYBODY jumped platform.

    So is image scaling an issue - Yes

    Is it going to be an issue going forward - Probably not given no more Microsoft phones and no one really uses their browser.

    In short stop trying, give up on Edge and start distributing Chrome.

    Tuesday, November 7, 2017 1:40 PM
  • Except when you are unsure of the pixel density of the device requesting the page.... or if you'd like the user to be able to pinch zoom without revealing crusty graphics.... Or if you'd like to support fluid layouts...

    Also, IE's SVG rendering is, as always, appalling. My workflow is as follows:

    Step 1:

    Create a nice looking web application using modern standards

    Step 2:

    Put it in the bin because google's retarded cousin cannot do things properly.

    Monday, January 22, 2018 6:58 PM