Browsers, css and image aliasing - css

Question

I try to scale down pictures (representing rendered text).
Something I noticed is that different browsers will give very different results in the way they are handling the scaling and the anti-aliasing after that (it seems that they almost all apply that by default).
Here is a jsfiddle (I can only rely on the results on my Mac and to see the problem, it has to be tested on different browsers too):
https://jsfiddle.net/ottmobk9/7/
<div class="test"></div>
<script>
/* I added an animation and a loop in order for you to see how Safari and */
/* Opera handle the scaling (after the scaling, it's sharp for one second */
/* then it becomes blurry) but no animation or loop is needed. If the */
/* picture is downscaled, it loses its sharpness. */
function testResize()
{
setTimeout(function()
{
x=$('.test>img').height();
if(x>55)
{
$('.test>img').css('height',(x-1)+'px');
testResize();
}
},5);
}
setInterval(function()
{
$(".test>img").remove();
$(".test").append("\
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/T.png'>\
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/E.png'>\
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/S.png'>\
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/T.png'>\
");
setTimeout(testResize,1000)
}, 3000);
</script>
Firefox (on Mac): The original size is a bit blurry (which is strange) but the scaled size seems very crisp.
Chrome (on Mac): The original size is crisp but the scaling automatically applies a filter of some sort which makes the resized text instantly blurry.
Safari and Opera (on Mac) are somewhere in between as, the original picture is crisp but after the scaling, they keep the picture crisp for about one second before they apply an anti-aliasing "filter" of some sort.
Those tests on different browsers prove that the blurry render is not a matter of a non integer ratio between the original and scaled picture.
Firefox starts bad but ends good.
Safari/Opera: start good but end bad after a second
Chrome: start good but instantly ends bad.
But it is not a fatality as Firefox shows a decent final scaled picture and Safari/Opera render the scaled picture alright for about one second. Chrome just can't handle it right.
So, these browsers apply something to the pictures and I want that "something" to just not be applied if not asked for, which is a fair request.
So, I tried to use the "image-rendering" property (uncomment it in the css part of the JSfiddle to see it in action).
And it works.
Kind of.
It depends on the picture...
So, it's not a problem solver.
To show that, here is another test where we can see it doesn't work that well in all situations after all:
https://jsfiddle.net/9f36rtza/34/
<style>
.non_scaled_non_filtered{
background:white;
}
.non_scaled_non_filtered img{
height:100%;
}
.scaled_nonfiltered{
margin-top:20px;
background:white;
}
.scaled_nonfiltered img{
height:34px;
}
.scaled_filtered
{
background:white;
margin-top:20px;
image-rendering: -moz-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
}
.scaled_filtered img
{
height:34px;
}
</style>
<div class="non_scaled_non_filtered">
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/84.png'>
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/101.png'>
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/115.png'>
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/116.png'>
</div>
<div class="scaled_nonfiltered">
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/84.png'>
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/101.png'>
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/115.png'>
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/116.png'>
</div>
<div class="scaled_filtered">
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/84.png'>
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/101.png'>
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/115.png'>
<img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/116.png'>
</div>
Firefox (on Mac): The non-scaled/non-filtered picture is a bit blurry once again, for whatever reason compared to the original (which is supposed to be the same size). But the "image-rendering" gives a scaled result very close to the original. Way more than the non-scaled picture, which is weird.
Chrome and Opera (on Mac):The unscaled picture is crisp as it should and the scaled picture
with "image-rendering is a bit blurry. Less than the scaled/unrendered one, though.
Safari (on Mac): This one is absolutely the worst. The non scaled picture is perfect.
The scaled but unfiltered version is a bit blurry. And the scaled and
"image-rendered" picture is just totally over-processed. It looks
like the picture has been sharpened several times in a row. This alone makes the "image-rendering" property unusable for production.
FYI: In the JSFiddle, I also added the "font-smoothing" and "text-rendering" properties (uncomment if you want to see them in action).
But as we don't deal with real text, of course, it doesn't change a thing.
All in all, it doesn't look like "image-rendering" is de-activating the "anti-aliasing" filter that the browsers apply by default.
It only seems to add a new layer of image rendering process that each browser handles more or less well.
So, it's not a problem solver. It only hides more or less well the problem, depending of the picture. And sometimes it's even worse (Safari).
All I want is to de-activate any unwanted anti-aliasing process for any size of picture and to have a consistent result among all the browsers.
So, I have a situation.
I need to have a faithful render as I'm doing a web app that renders divs containing pictures and texts that people can scale, and the final purpose is to print the results in Hi-res.
That filter applied won't just allow me that and I have found no solution or workaround that works in any situation.
Depending on the browser, people will get various results with none of them that is perfect.
If I don't apply "image-rendering", all aforementioned browsers but Firefox is giving me a blurry render. And firefox gives me a blurry render if the picture is not scaled.
If I do apply "image-rendering" however, none will handle the sharpness well. Firefox is the least worse but it is not perfect neither.
Each of them seems to apply another filter instead of just de-activating that anti-alias filter they just apply.
So, what can I do?
The ideal way would be to know how just not to apply that anti-alias filter in the first place.
Of course I can use other ways to scale down the picture (css scale/zoom) but it's just the same. I tried. The method of scaling doesn't seem to be the problem, it's the way the browsers render a scaled image in all cases.
Thank you for your help.