The change to linear resampling in IE9 makes me wonder if that wasn't simply a bit of benchmark manipulation. If so, it goes to show the danger of relying to heavily on simple benchmarks.
It might also have something to do with their focus on hardware acceleration. Switching to D3D using bilinear scaling. Possibly also switching their software fallback implementation to match.
If you've already got the tool to check it out empirically that's going to be a lot easier than digging through hundreds of thousands of lines of code that you aren't familiar with.
Since it seems he wrote his resampleScope tool back in 2011, it makes sense he went this way.
Can someone shed a little light on what these graphs represent? I'm assuming it's some sort of weighting function, but the article has zero explanation of what we're looking at - the axes aren't even labelled.
Basically the testing suite uses an image of known brightness profile (if you scroll down to the IE7 section you can see an example of a test image). It looks like what its doing is grabbing the interpolated image from the browser and plotting the brightness against x-axis, which it can then compare to the actual brightness function.
Basically: The X axis is distance in pixels and Y is the weight for the weighted average of the surrounding pixels according to their distance from the point being sampled.
For some reason resampling artifacts are highly visible to me. Like minor distortion and color inaccuracy, some people see it, some people don't, some people care, some people don't.
I used to tell all the authors at techcrunch to resize before uploading, because our theme just loaded the original image and let the browser resize it. Of course this occasionally led to 2-megabyte, 1000px PNGs being rendered at 215px wide, with awful resampling errors making text look awful and taking ages to load besides. No one listened, the fools!
These days it seems like there are few situations that demand a "cheaper" resampling method than bilinear. The calculation cost and time are so minor and assets so malleable that it can't possibly end up the bottleneck - not when you have ten or twenty widgets, scripts, and trackers loading as well.
It always seemed strange to me, however, that the resampling of images is browser dependent. I guess callouts to the GPU are a bit much when all you need to do is recalculate a bitmap.
> The calculation cost and time are so minor and assets so malleable that it can't possibly end up the bottleneck - not when you have ten or twenty widgets, scripts, and trackers loading as well.
No, it can be the bottleneck.
http://mobile.lesoir.be with its 3000x3000 pixels images for a mobile website can make my firefox really sluggish on my notebook.
As far as I can remember there always have been rendering problems with displaying downsized large images on an html page (notwithstanding the bandwidth waste).
Firefox uses the same high-quality scaler for upscaling now too, starting in Firefox 22: http://bugzil.la/795376 (The results on this page were from Firefox 7 and Firefox 20.)
The problem with scaling multiple copies of the same image on a single page is http://bugzil.la/795072
Some time ago I did a test for mobile screens. I used 64 color images at 2 times the size they had to be (for high-res displays).
High-res devices don't scale those images, but because the pixels are so small 64 color images are still looking good.
Related to this post: small displays will downscale the image to 50%. I noticed that most modern browsers use a nice reduction algorithm so the interpolation of 64 colors is also looking good.
I have found no mobile browser (except the native Android one on my older device) that will "easily" show one pixel of an image at one pixel of display. You pinch through this state but but not arrive at it unless you go to great trouble.
If you're going to put so many charts on the page, you might want to start with basic things like marking the axes. I have no idea what I'm looking at.
32 comments
[ 4.8 ms ] story [ 76.7 ms ] threadSince it seems he wrote his resampleScope tool back in 2011, it makes sense he went this way.
Basically: The X axis is distance in pixels and Y is the weight for the weighted average of the surrounding pixels according to their distance from the point being sampled.
I used to tell all the authors at techcrunch to resize before uploading, because our theme just loaded the original image and let the browser resize it. Of course this occasionally led to 2-megabyte, 1000px PNGs being rendered at 215px wide, with awful resampling errors making text look awful and taking ages to load besides. No one listened, the fools!
These days it seems like there are few situations that demand a "cheaper" resampling method than bilinear. The calculation cost and time are so minor and assets so malleable that it can't possibly end up the bottleneck - not when you have ten or twenty widgets, scripts, and trackers loading as well.
It always seemed strange to me, however, that the resampling of images is browser dependent. I guess callouts to the GPU are a bit much when all you need to do is recalculate a bitmap.
No, it can be the bottleneck.
http://mobile.lesoir.be with its 3000x3000 pixels images for a mobile website can make my firefox really sluggish on my notebook.
As far as I can remember there always have been rendering problems with displaying downsized large images on an html page (notwithstanding the bandwidth waste).
it's not as much a problem of displaying large images than displaying large images in <img> with smaller width and height.
Interestingly the aforementioned website works like a charm with opera mini running on my feature phone.
* I know it's an old computer now but it should be able to display pictures on website whatever the scenario.
The problem with scaling multiple copies of the same image on a single page is http://bugzil.la/795072
High-res devices don't scale those images, but because the pixels are so small 64 color images are still looking good.
Related to this post: small displays will downscale the image to 50%. I noticed that most modern browsers use a nice reduction algorithm so the interpolation of 64 colors is also looking good.
http://filmicgames.com/archives/354
I'm not sure what filter that might be, but it sure looks good.