Styling More Pixels, with Beards

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.

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.

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

---