Earth Notes: On Website Technicals (2018-10)

I am attempting to allow the generation of AMP-compliant pages. I am not sure yet whether AMP is in fact a good idea for this site.

One big problem with this is that AMP does not allow use of normal HTML(5) img tags, and my pages are indeed full of them, hand-crafted. More than a decade's worth!

I have created a more 'portable' and restricted EOU 'IMG' tag with essentially only src and class attributes. (I can use case since all I have all normal HTML tags lower-case.) The src must be a local image under src/. The class must be a single class that is one of a subset of the site's responsive image types. If these tight conditions are not met then the image is not inserted and an error is generated, though the raw tag should in fact always be valid (if not optimal) HTML5.

If the EOU IMG tag passes muster then the hero image autogeneration mechanism is used to spit out a suitably scaled image. It inserts an img tag with auto-generated width height and alt. These are extracted from the actual image's size and filename. (For AMP, a amp-img is used instead.)

The IMG tag is quick and easy to write. It is also less error-prone than manually sizing a 'thumbnail' image and constructing the whole browser-friendly HTML5 img tag to use it...

See a "KODA House" simple example, floated left.

These autogenerated images are space-efficient (relatively light-weight). There is also the possibility in future to use picture to have the browser fetch (say) an even lighter-weight WebP image if that format is understood by the browser.

A feature already implemented has the img tag inserted for the mobile/lite/AMP version refer to an image pre-scaled down to the maximum size that could responsively be seen on the presumed 640px-or-narrower screen. And the Save-Data lower-fi image version is auto-created for miserly browsers that request it. Thus saving even more bandwidth!

One wrinkle is that these images are not purely decorative 'hero' images, but are intended to convey useful information, so the generation script has been tweaked to allow more bits per pixel for such images on mobile. Indeed potentially up to desktop image 'quality' settings. (The cap on image size remains for now lower than desktop even for these.)

This 'nicer' mobile image licence could be extended to the carousel images on the home page, for a better user experience there.

These informational image sizes should match the carousel images to try to allow (at least eg on desktop) the same images to end up being referenced in both cases, improving cache hits for visitors.

It is evident from the logs that plenty of browsers narrower than 640px are arriving at the www/desktop site, so it would be worth extending the IMG output HTML to use srcset to have those use the mobile version of each image in that case for further bandwidth savings.