Lazy load images

[gcushen]

An approach to speed up page load time.

See: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

Todo:

• [x] Load CDJS asset for https://github.com/aFarkas/lazysizes
• [x] Edit Figure shortcode so that all figures lazy load by default
• [x] Edit Gallery shortcode so that all gallery images lazy load by default

Notes:

• May not be appropriate for all media instances
• May conflict with in-page section (anchor) scrolling
• May conflict with Portfolio widget's logic to wait for all images to be loaded
• Somewhat dependent on Hugo supporting image processing on images in static/ in order to generate fast loading thumbnails for all images

Notes on videos:

Do not attempt to lazy load videos yet as there are a number of additional considerations and an issue still open to add video support:

• Lazy loading video docs: https://github.com/aFarkas/lazysizes/tree/master/plugins/unveilhooks
• Unresolved issue with lazy autoplay: https://github.com/aFarkas/lazysizes/issues/697

Solution if/when add video support: Edit Video shortcode so that all videos lazy load by default by adding params as per links above (inc. data-autoplay, data-poster).

[nebrelbug]

Any updates?