Our cameras put more pixels in each picture than our computers’ screens can display. But the screens are catching up, doing smart things with pixels so small you can’t see ’em; Apple says “Retina”, but everyone who ships things with screens is going that way. Publishing pictures on the Web so they look as good as they possibly on whatever whoever’s looking is carrying… well, it’s hard. But I’m working on it.

Here’s my latest attempt — if you’re in a feed-reader, drop by the tbray.org version to see what I’m talking about — a picture of my friend Peter, who has one of the best beards ever.

Peter

What happened was, I took a picture in a forest on Keats Island — it’s the first one here — and I really liked it. But size mattered: full-screen on my MacBook Pro it was pretty good, and on the big Sammy 4K it made me lean back and smile. I think I’m gonna have it printed as big as possible and put it on a wall I look at often.

But on the blog, compressed into the 600-or-so pixels in the river-of-text you’re now looking at, that picture just looked like some trees. So I had to find more space for it.

I remembered reading how Duncan Davidson had found a technique, on his blog, for enlarging pictures into the left margin; but I couldn’t find his post. His pictures, unlike mine, look wonderful at any size, so it encouraged me that he also thought size still mattered.

I was thinking it was time to get out of the raw-CSS game and migrate to Sass and Zen Grids but then I thought “why not try quick-&-dirty? So I exported my pix 720-wide, reached into my CSS, and said:

float: right;

And, it worked! Well, OK, I had to fiddle a few classes and selectors because my stylesheet’s initial design wasn’t very good, but it kept working. One of the cases where CSS seems determined to Do The Right Thing.

Go check out those tree pix to see the effect when the photos aren’t all the same size; I like it!.

Responsive design! · This isn’t one of those. When I visit image-rich blog pages on my high-density-screen Androids, the pix now bleed off to the left. Which ought to be a big problem, but I dunno; the image’s crucial center is preserved and if you really need to see all of it, well this is the Web after all, just click or tap.

I still think the right answer is probably one of those frameworks that works around CSS’s deplorable-in-the-rearview failure to be grid-based; but I have to tip my hat to existing technology’s pretty-graceful efforts to construct pleasing presentations using inadequate instruction.

Here’s another one of those, my friend Katanashi, whose beard is also pretty well up there.

FXT11606

Beards are a fine subject for the engaged photographer.

Sideways or not · Here’s a problem: computer screens are naturally wider than they are high, so it should be able to make your pictures look good when their aspect ratio is landscape rather than portrait. Well, except for, blog layouts are naturally higher than they are wide. And so are mobile-device screens. Did I mention that responsive design is hard?

Resizing · I’d also noticed that some of the pictures, which I’ve been downsizing for the blog using ImageMagick, were looking kind of grainy and dull. So I also rejiggered the software here so I can export both the full and inline sizes from Lightroom; an extra step in the workflow, but the blog pages look noticeably better.

The Best Answer · It’s the HTML5 <picture> element, which offers a pic in multiple sizes and lets the client software choose whatever’s going to work best. Support is coming. But for now, we do what we can.



Contributions

Comment feed for ongoing:Comments feed

From: David Magda (Sep 14 2014, at 10:19)

More than pixels/resolution (which is nice too), I wish monitors would really start having larger colour gamuts as a basic feature. At the bare minimum Adobe RGB (1998) would be a good start, as it covers a good chunk of Pointer's Gamut ((an approximation of) the gamut of real surface colors as can be seen by the human eye):

http://www.tftcentral.co.uk/articles/pointers_gamut.htm

There are certainly wider gamuts (ProPhoto, Rec. 2020 (part of the upcoming UHD standard)), but I don't think the tech is there yet (or is very expensive), and most people wouldn't get much out of them. Optionally sending 10-bit colour data down the wire to monitors that support it would also be a good second step.

There are plenty of monitors from Dell, LG, and Samsung (not to mention the high-end Eizos), that support Adobe RGB, but they're all niche-ish: you have to generally purchase specific model lines.

None of Apple's monitors or displays on any device reach Adobe RGB levels.

I'm somewhat wary of feature checkboxes, but I think adding this would be a qualitative (and not just quantitative) improvement that could be made to many products. Especially (in Apple's case) since many browsers can handle ICC profiles.

[link]

author · Dad · software · colophon · rights

September 13, 2014
· Arts (11 fragments)
· · Photos (900 more)
· Technology (77 fragments)
· · Publishing (154 more)

By .

I am an employee
of Amazon.com, but
the opinions expressed here
are my own, and no other party
necessarily agrees with them.

A full disclosure of my
professional interests is
on the author page.