Create placeholder images with dominant color using `$image.Colors` method

[jwflory]

Summary

Use a Hugo filter to create a placeholder for an image using the dominant color of the image

Background

Is the new feature related to a problem? Describe the problem: Someone browsing the site from a poor connection will not see images immediately when viewing a page. The page may load in an unexpected way if the image is not yet downloaded.

What does the new feature look like to you?: If an image is not yet downloaded and rendered on-screen, show a placeholder with the dominant color of the image until it loads. This is a new feature in Hugo v.0.104.0.

Describe any alternatives considered: We could create a placeholder in another way. But using the dominant color of the image seems to be a clever way of doing that without disrupting the user experience.

Details

This issue needs additional research to better understand how to implement the placeholder image. Ideally the impact is in any page which features images. If the feature only works well on a page with several images, we may need to close this as out of scope.

Outcome

Better user experience for visitors with poor network connections