144dpi images in ImageMagick

Software

The 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           \
    "file@2x.ext"

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 -resize.

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.

Author bio and support

Me!

Ruben Schade is a technical writer and IaaS engineer in Sydney, Australia who refers to himself in the third person in bios. Wait, not BIOS… my brain should be EFI by now.

The site is powered by Hugo, FreeBSD, and OpenZFS on OrionVM, everyone’s favourite cloud infrastructure provider.

If you found this post helpful or entertaining, you can shout me a coffee or buy some silly merch. Thanks!