A long long time ago, I followed Derek Powazek’s ”Savvy Approach to Copyright Messaging” because, of all of the possible ways to reduce the chances of my images getting borrowed by other folks on the Internet, it seemed to be the best. I see DRM as a fairly dangerous technical equivalent of fighting windmills… It only works if you create a set of laws to enforce compliance which only serves to create new and more annoying problems for the world. And obtrusive watermarks are just lame and ruin the enjoyment of the image. By comparison, Derek’s method adds a little nubbin on the bottom of the image, but then hides it. Which means that the second you view the image outside of the context of the hosting site, you see a reference to where it came from. However, as I’m moving all of the sites I host over to the new rm3 engine, I wanted to figure out how to make that trick work with responsive images, which I haven’t seen anyone document how to do yet.
The last version I saw Derek talking about looked like this:
<div style="height:123px; width:234px; overflow:hidden">
<img src="image-url" title="Title goes here." alt="Alt goes here." />
</div>Well, in the intervening time, the srcset and sizes attributes came out, which now means that you can use responsive images with art direction so that you can have a set of resolutions for different screens and the browser will pick out the right image to use depending on the native screen resolution and shape. There’s even a decent polyfill for older browsers.
Does this technique still work? Yep. Mostly. What I did this time around was add a constant-sized footer in my image posting pipeline and then figured out how to crop out a constant 16 pixels off of the bottom using almost the same technique, which required some screwing around to figure out how to make it work. It looks like this:
<div style="overflow: hidden; line-height: 0px;">
<img sizes="(min-width: 40em) 60vw, 100vw"
srcset="/blobs/wh.qet-14968361-f2f0-11e6-bf51-935992345aa9-file-s.jpg 240w, /blobs/wh.qet-14968361-f2f0-11e6-bf51-935992345aa9-file-m.jpg 500w, /blobs/wh.qet-14968361-f2f0-11e6-bf51-935992345aa9-file-l.jpg 1024w, /blobs/wh.qet-14968361-f2f0-11e6-bf51-935992345aa9-file-k.jpg 2048w"
alt="" style="position: relative; bottom: -16px;" />
</div>Pretty much, you can look at the style attribute for the div and img tags to see what I did.
The only part that’s mildly weird there is the line-height: 0px; bit, which prevents the child div from trying to add a partial-row of text and thus sometimes (but not always) letting some of the footer past the crop. But, this way, it preserves the browser’s ability to select the correct size for the given display size.
You can look at the whole patch for more details. It’s actually a lot of plumbing to make sure that when you load an image from the backup that it does the right thing, a reasonable amount of code to make Sharp render text so as to do compositing, and then a tiny bit of code that actually displays the correct image.