
How web browsers resize images - nsfmc
http://entropymine.com/resamplescope/notes/browsers/
======
mbrubeck
Firefox 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)

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

~~~
johnchristopher
> 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
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.

~~~
kalleboo
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.

~~~
johnchristopher
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.

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

[http://filmicgames.com/archives/354](http://filmicgames.com/archives/354)

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

~~~
corysama
Another 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.

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

~~~
Amadou
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.

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

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

~~~
Wenbo_Yang
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](http://www.4p8.com/eric.brasseur/gamma.htm)

~~~
DougBTX
Fixed url, needs the html extension:
[http://www.4p8.com/eric.brasseur/gamma.html](http://www.4p8.com/eric.brasseur/gamma.html)

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

~~~
shdon
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.

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

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

~~~
DougBTX
Try this:
[http://stackoverflow.com/questions/14366672/](http://stackoverflow.com/questions/14366672/)

------
diziet
Bit more along the same lines:
[http://entropymine.com/imageworsener/resample/](http://entropymine.com/imageworsener/resample/)

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

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

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

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

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

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

