6 ms·
How web browsers resize images
- mistercow 13y agoThe 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.
- shdon 13y agoIt 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.
- mistercow 13y agoBut you can do hardware accelerated lanczos pretty trivially with a shader consisting of maybe 10 lines.
- KnightHawk3 13y agoI know nothing about graphics or hardware acceleration, could you link me to an example? Sounds interesting.
- DougBTX 13y agoTry this: http://stackoverflow.com/questions/14366672/ http://stackoverflow.com/questions/14366672/
- cachvico 13y agoGiven that most of these browsers are open-source, isn't this a somewhat circuitous way of going about the investigation?
- Amadou 13y agoIf 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.
- eru 13y agoAlso it would have been much harder to see the firefox bug with a code inspection.
- vinkelhake 13y agoAny information on whether the different browsers use gamma-correct resizing?
- mark-r 13y agoI think that's highly unlikely. Easy to test for though with the right test image.
- capisce 13y agoThat's a shame, considering how cheaply GPUs can do it these days.
- Wenbo_Yang 13y agoI read this Eric's article "Gamma error in picture scaling" 6 years ago. Sadly, FireFox still sucks... http://www.4p8.com/eric.brasseur/gamma.htm http://www.4p8.com/eric.brasseur/gamma.htm
- DougBTX 13y agoFixed url, needs the html extension: http://www.4p8.com/eric.brasseur/gamma.html http://www.4p8.com/eric.brasseur/gamma.html
- corysama 13y agohttp://filmicgames.com/archives/354 http://filmicgames.com/archives/354
- diziet 13y agoBit more along the same lines: http://entropymine.com/imageworsener/resample/ http://entropymine.com/imageworsener/resample/
- abstrakraft 13y agoCan 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.
- corysama 13y agoAnother article on the site (linked elsewhere in this discussion) does a pretty good job of explaining the graphs: http://entropymine.com/imageworsener/resample/ http://entropymine.com/imageworsener/resample/ 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.
- icegreentea 13y agoBasically 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.
- devindotcom 13y agoFor 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.
- johnchristopher 13y ago> 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 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).
- johnchristopher 13y agoI can't edit. I would like to add: 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.
- kalleboo 13y agoOpera Mini does the downscaling on Opera's server farm, so your feature phone only gets pictures the exact size of your phone's screen.
- mbrubeck 13y agoFirefox uses the same high-quality scaler for upscaling now too, starting in Firefox 22: http://bugzil.la/795376 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 http://bugzil.la/795072
- ohwp 13y agoSome 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.
- deleted 13y ago[deleted]
- dsego 13y agoToo bad incorrect gamma is still a problem when resizing in browsers. http://filmicgames.com/archives/354 http://filmicgames.com/archives/354
- Filligree 13y agoChrome also uses some kind of sharpening filter for upscaling (on every image) if running on a HiDPI system, such as a Macbook Retina. I'm not sure what filter that might be, but it sure looks good.
- kalleboo 13y agoI'd be interesting in knowing what it is, because it does look way better than whatever Safari does.
- allard 13y agoI 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.
- allard 13y agocorrection — Opera Mobile Classic does — if the image is smaller than the display.
- ye 13y agoIf 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.