Supersonic Man

March 12, 2015

devicePixelRatio

Filed under: Hobbyism and Nerdry — Supersonic Man @ 8:16 pm

Well I guess there’s one category of post I can still put here: nerd notes that none of my friends care about.  These may end up being little more than notes to myself.

I’ve been looking at the Javascript property window.devicePixelRatio.  It’s a way to compensate for the way that browsers more and more often separate the definition of a CSS “px” from a physical device pixel.  It started with Apple’s “retina” iPhones, which had twice the pixel density but didn’t want to display web pages half as big because of it.  So they set up the browser so that one “px” would be two physical pixels.  As phone displays got denser, a bunch of other manufacturers followed suit: on my HTC One, for instance, it’s three physical pixels per “px”.  And this value is reflected in the Javascript API with the property window.devicePixelRatio.

So far, no problem — everybody gets a display that works pretty well on their mobile device regardless of its density.  Where things get awkward is when this comes back to the desktop browser.  Chrome and Firefox now support devicePixelRatio in Javascript.  But unlike the mobile browsers, the value is changeable: it varies depending on the zoom selected by the user, whereas on a phone, zooming means just changing your area of view over a layout that mostly remains fixed.  In Chrome, it starts as 1.0, but if you hit ctrl-plus, it becomes 1.1, then 1.25, then 1.5, then 1.75, and so on.  In Firefox, it goes from 1.0 to 1.25 to 1.5 to 1.76470589 (don’t ask me to explain that last one).

What bugs me is that Firefox does not start out at 1.0.  Since a year or two ago, they take the initial ratio from the host operating system’s monitor pixel density setting, which in Windows is controlled by the desktop text size setting.  When you pick “smaller”, the ratio is 1.0, for “medium” it’s 1.25, and for “larger” it’s 1.5… and like a lot of people, I use “medium”.  So Firefox starts out at 125% zoom on every website, unless you install an add-on to change that behavior.

And mostly, this larger zoom is a good thing.  It makes the website look about the size it was intended to look.  But there’s one situation where this zoom ratio is bad, and that’s when viewing images at full size.  See, the browser has to resize the image in much the same way that you’d do in a program like Photoshop, and if you’ve messed around with resizing in such programs, you’ve likely noticed that the results are worst when the amount of change in size is small.  Cut a picture to half size or blow it up triple, and the results are no worse than you’d expect, but magnify or shrink it just a little and you get a ton of extra blurriness.  (Or pixelated graininess, depending on the type of size-changing you select.)  This is because changing sizes by a small ratio, such as 1.25, combines the imprecision of both formats.  Each image’s pixelization process involves a roundoff error in where a given picture detail is located, and resizing adds together the roundoff error of both scales.  When you change by a large ratio, the amount of detail in the picture is nearly identical to what you could see in the smaller of the two sizes, but with a small fractional ratio, the result is not much better than half as sharp as it would be if it were created originally in either of the two sizes.

So, when my website hosts large images and I don’t want them fuzzified, I’d like to find a way to fool browsers into showing the image at exactly a 1.0 pixel ratio, if it’s attempting to use an awkward ratio like 1.25.  If the ratio gets to 1.5 or higher, fine, resize it, but if you’re trying to resize it a little bit, I’d much rather have 1.0.  That’s why I’m investigating window.devicePixelRatio: so I can make a Javascript hack that will change the sizing of images so that, should I so desire, they look their best and sharpest rather than looking correctly proportioned to the text and stuff around them.  Sometimes the proportion doesn’t matter.

Unfortunately, IE 10 also looks at the Windows desktop size setting, and starts out with an initial zoom of 125%… but it does not support the devicePixelRatio property.  So for now, if I make such a fix, it’ll basically be for Firefox only.

…Unless, that is, I make a separate CSS media query for each individual pixel ratio.  There probably aren’t that many to be found out in the wild: 1.1, 1.25, and 1.33 are probably about it for common cases.  But on the other hand, I don’t want these rules to snap in and out of action as the user zooms through the different ratios. JavaScript would be better because it could change the picture’s size once, and then any zooming done after that has no unexpected effect.

March 1, 2015

winding down

Filed under: life,the future!,thoughtful handwaving — Supersonic Man @ 7:26 pm

Nobody reads this blog. Even the index page of my personal website gets a lot more interest than this blog does. Even my secondary website for superhero movies does.  The only time I get a noticeable number of readers here is when I link a post from social media.

And yet, some of my most serious recent writing is here, because today’s social media sites — the ones with people you know on them, anyway — generally suck for long-form writing.  So what I’m doing is extracting the major posts from this blog, and putting them onto my main website as permanent pages.  This makes sense because some of them were already being subjected to repeated revisions.

Since many of these posts were about topics having to do with the future, or at least with science, the new website section where they’re being put is called The Future!.  Check it out.  Back here, meanwhile, a number of posts are now just one line pointers to the website.

There are still some longer posts that haven’t been moved, mainly political ones.  Maybe I’ll grab some of those in a second wave, or maybe not.  Also, lots of bird pictures — I have never updated the ancient photography section of my website to include my current bird photography.  That needs doing someday.

In any case, the point is that I’m no longer going to be investing effort in this blog.  The number of new posts will be significantly reduced and at some point will probably cease.

Create a free website or blog at WordPress.com.