How web browsers resize images | Hacker News Reader

How web browsers resize images

entropymine.com

142 pointsnsfmc31 comments

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

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).

I 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.

Opera Mini does the downscaling on Opera's server farm, so your feature phone only gets pictures the exact size of your phone's screen.

I know. I wanted to point out that an inexpensive device experience is better than my full-blown computer* experience.

* I know it's an old computer now but it should be able to display pictures on website whatever the scenario.

Too bad incorrect gamma is still a problem when resizing in browsers.

http://filmicgames.com/archives/354

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.

Another article on the site (linked elsewhere in this discussion) does a pretty good job of explaining the graphs: 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.

Given that most of these browsers are open-source, isn't this a somewhat circuitous way of going about the investigation?

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.

Also it would have been much harder to see the firefox bug with a code inspection.

Any information on whether the different browsers use gamma-correct resizing?

I think that's highly unlikely. Easy to test for though with the right test image.

That's a shame, considering how cheaply GPUs can do it these days.

I 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

Fixed url, needs the html extension: http://www.4p8.com/eric.brasseur/gamma.html

http://filmicgames.com/archives/354

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.

But you can do hardware accelerated lanczos pretty trivially with a shader consisting of maybe 10 lines.

I know nothing about graphics or hardware acceleration, could you link me to an example? Sounds interesting.

Try this: http://stackoverflow.com/questions/14366672/

Bit more along the same lines: http://entropymine.com/imageworsener/resample/

Chrome 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.

I'd be interesting in knowing what it is, because it does look way better than whatever Safari does.

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.

correction — Opera Mobile Classic does — if the image is smaller than the display.

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.

Reply on news.ycombinator.com