Earth Notes: On Website Technicals (2018-01)

Updated 2022-10-17.
Tech updates: PSNR lo-fi PNG autogeneration, page media, secondary image, client hints.
This month is about trying to handle images better to improve reader experience. For example allowing more than one page image (partially in place a year later), and creating better lo-fi images automatically.

2018-01-21: Client Hints

Traffic volume to this site does not (yet) justify it, but beyond the current Save-Data support, conceivably other client hints could be used, such as Width or Viewport-Width, and possibly only when in conjunction with Save-Data, to return the 'lite'/mobile version of a page rather than the 'full' version when a client conveys that it has a very narrow screen. This would all happen at request content-negotiation time in the Apache server, and does not need any redirects, nor dynamic HTML changes nor JS magic.

(Although a meta header may be required to enable it, or maybe a Service Worker.)

(... Some years later!)

2018-01-20: Secondary Page Image?

I understand that in some circumstances there simply is no one-size-fits-all page image, eg for og:image, because some uses/consumers prefer large, high-resolution, landscape aspect-ratio photos and others squarish thumbnails.

This site's internal markup nominally allows both LIMG (large/landscape image) and SQTN (square thumbnail) declarations for a page, though the site itself will currently only use one of them if both are present. I started with all SQTN when initially populating the site's pages with images, and have progressed to nearly all LIMG since.

It seems as if (most?) users of both the Open Graph meta tags and the schema.org markup may simply tolerate having more than one, allowing the consumer to pick the best for its use. This is already happening on a handful of this site's pages for videos.

I'd prefer to keep any extra burden out of the head and critical rendering path (CRP) so as to continue to get useful content to the user ASAP, but adding a small amount of extra image markup later in the page, attached to the itemscope that is nearest the top of [the] page's source code seems like a reasonable thing to do.

2018-01-07: Page Media

For pages where a table of contents is being generated, I have added a final link in it to the "Page Media" in the page foot, to help visitors find it. I'm still debating whether to re-include (where available) video in lite pages, and even whether to flag video early in some way, since videos seem to be popular. I only have a few videos so far in any case.

I have also attempted to improve cacheing of auto-generated (hero) images by leaving them alone (ie not updating their timestamps) if they don't change on being re-generated, just like already happens for lo-fi versions.

2018-01-06: PSNR Lo-fi PNG Autogeneration

When auto-generating the lo-fi (.pngL) versions of hero PNG images, occasionally (and possibly only as a bug/feature of ImageMagick V6.x on the RPi) the result images are essentially blank (all one colour).

These information-free images tend to be tiny, ~100 bytes or smaller.

In ImageMagick V6 (on the RPi) there are various available image-similarity metrics. PSNR (Peak Signal-to-Noise Ratio) is widely regarded as probably the best of those. (Note that on the Mac I have V7 and thus also SSIM available.)

Using PSNR, I refuse to generate a lo-fi image that looks too different to the full-fat version, in this case setting an empirically-determined threshold of 15dB. It may be better to generate a near-lossless version of the image and compare against that instead, to avoid the effect of accumulating artefacts, but at least the current scheme does not need to generate any extra temporary images.

(Wikipedia claims that "Acceptable values for wireless transmission quality loss are considered to be about 20 dB to 25 dB".)

In future I could also use this as previously envisaged to force further compression when an autogenerated image is "too good", ie better and heavier than it need be, especially for JPEGs.