Improve hero image web performance

[chrimesdev]

Description

The Homepage hero image uses the CSS background-image property, which is a late discovered resource, as they aren’t discovered until the render tree has been built. This means that their requests aren’t even dispatched until we’re ready to put them on screen.

Potentially use a hidden img element means the browser’s preload scanner will find this image early when loading the DOM and it will get downloaded much sooner (but will not be shown through the img element) when loaded in by the background-image property.

{% image page.hero_image width-1000 as himage %}
<img src="{{ himage.url }}" style="display: none;" alt="" />

Further reading: https://csswizardry.com/2018/06/image-inconsistencies-how-and-when-browsers-download-images/