181 words - 1 minutes to read
An easily overlooked set of images on my wife’s web site
that were significantly impacting network
performance were the header background images.
These should be responsive to
web site visitor’s device characteristics too.
The header ‘cover’ images - such as on the top of this page - presented a
different challenge than the in-line images described in the previous post
Here the page’s featured_image, used for the page summary is also used as the background for
the page title and description.
For that I needed to learn the CSS equivalent of HTML5’s
img srcset. The
easiest solution ended being to create a Hugo
partial that generates an inline
style definition using CSS media queries. That
code is invoked in the
layouts/partials/page-header.html like this
While the partial code ended up looking like:
Still some tweaking to do:
- Lazy loading images
- … Several other ideas percolating.