Consider the following scenario:
Image1: logo.png (2000px x 200px) ~ 30kb
Image2: logo.png (500px x 50px) ~ 20kb
I display Image1 on my website and scale it down to a width / max-width of 500px.
Results when I look at the image on different browsers:
Chome: Crisp and nice.
Safari: Crisp and nice.
Internet explorer: Blurry and bad quality.
When i zoom in (200%) on different browsers i get:
Chrome: Crisp and nice.
Safari: Crisp and nice.
Internet explorer: Much better almost as crisp and nice as the two above.
So the problem is that IE cannot handle images that are scaled down without messing them up.
So you could instead use Image2, a lower resolution version that is 500px - but then the logo looks bad when zooming in.
Considering that an many handheld devices with pinch to zoom functionality have very high display resolutions I want to have higher resolution images to allow for some zooming without losing fidelity. For me an okay tradeoff as the image size difference in this case is minor ~10kb.
So It seems that even with the newest Internet explorer it is required to make all kinds non-value-adding scripting/coding/work to make sure that an image looks good on Internet explorer too.
That is very unsatisfactory and it seems to have been left unfixed for many IE generations. I imagine that the number of man-hours spent on coding for IE compatibility is 100x larger than the time it took to write the entire Internet explorer codebase from version 0.1 to the current IE11.