Here is my current situation:
I am working on a web page with a responsive design. The layout of the page consists of two vertical halves, and I intend to display an image (specifically a PDF page converted to PNG or JPG) on the right side. The challenge is that I need the size of the image to adjust dynamically as the window size changes.
I believed I had found a solution by rendering the image on the server at a large enough size to accommodate the largest possible window size based on our company's requirements. Chrome and Firefox handle the scaling down of the image perfectly well through interpolation.
However, Internet Explorer 10 presents an issue: When the image is scaled below 100%, it appears distorted with what seems like numerous random artifacts covering the image. I have not been able to find a workaround for this problem.
I have discovered that in older versions such as IE7, there was a CSS rule called -ms-interpolation-mode which could be set to bicubic. Unfortunately, this rule has been deprecated and is no longer available in IE9 and later versions.
Must I simply accept this limitation? How can a setting be declared obsolete when there is still no proper interpolation for scaled images in IE9+? Are there any alternatives or solutions to this dilemma?
I understand that typically allowing the browser to scale images is not recommended. However, do you have any suggestions for handling this particular use case more effectively?
UPDATE: It should be noted that the images being used contain black text on a white background. The issue becomes more pronounced when using thin fonts in these images.
UPDATE2: Before making a final decision, please revisit the provided fiddle (http://jsfiddle.net/7grxut1t/16/). Resize the window to a very small size in both Chrome and IE to observe the difference!
The relevant portion of my code:
<div>
<img src="http://websocket.bplaced.net/test.png"/>
</div>
CSS:
div {
position: relative;
width: 50%;
height: 100%;
}
img {
width: 100%;
}