srcset HTML5 attribute that delivers images based on display DPI is so brilliant and elegant, it finally convinced me to move off the otherwise-superior XHTML+RDFa a few years ago. Here’s the syntax with two resolutions:
<img src="$NORMAL" srcset="$NORMAL 1x, $RETINA 2x" alt="Caption" style="width:$NORMAL-WIDTH" />
(I’ve moved to Markdown for most of my editing, but I generate this code myself. Markdown deliberately has no provision to specify image widths or alternative versions, so the output will always look awful now, unless you use site-wide CSS that doesn’t carry through to RSS).
To feed into this, I convert each image bound for this blog into a Retina/HiDPI; version, and a regular version. Presumably I’ll eventually have to do 3x as well.
This is how I create the Retina images in ImageMagick with 144dpi. This should work with GraphicsMagick as well, but I haven’t tested:
$ magick convert "file.ext" \ -units PixelsPerInch \ -resample 144 \ -resize 1000x \ "email@example.com"
Note the option order; ImageMagick chains these so changing the order will result in different output. Most images also start at 72dpi by default, so the smaller size can usually be accomplished with just a
The irony isn’t lost on me that a post about images doesn’t include one. Pretend I’ve inserted a work of visual brilliance here to demonstrate.