Introduce placeholder support in MediaLibrary using Blurhash

[jessedobbelaere]

💭 Why

Loading images often is very cumbersome on slower connections. The layout jumps a lot too while loading if you don't set the width/height. If the LiipImagineBundle thumbnail cache is not warmed up, the thumbnails also have to generated first, taking some extra response time in addition to loading the images... Your beautiful page can be full of empty boxes because all the images have not loaded yet.

❓ What is Blurhash

Blurhash is an algorithm written by Dag Ågren for Wolt (woltapp/blurhash) that encodes an image into a short (~20-30 byte) ASCII string. When you decode the string back into an image, you get a gradient of colors that represent the original image. This can be useful for scenarios where you want an image placeholder before loading, or even to censor the contents of an image.

Images can be huge, they leave your customers waiting and images loading in can move around the page layout. With a placeholder image this issue no longer exists and with a blurred image you give your users something engaging while they wait.

Before:

After:

✨ Fork CMS implementation

Blurhash has implementations for most languages. The way I currently see it implemented is:

1. Adding a composer dependency that does the encoding: https://github.com/kornrunner/php-blurhash is linked in the Blurhash docs. Currently, it uses a minimum version of PHP 7.3 so something to add in the Fork CMS 6 release rather than Fork CMS 5 (PHP 7.1)
2. Do the encoding when uploading an image in MediaLibrary. You get back a 20-30 byte string that represents the image.
3. Store the blurhash string, e.g. LEHV9uae2yk8pyo0adR*.7kCMdnj in the MediaItem table as metadata of the image.
4. Optional: add blurhash encoding as module setting, to make encoding to blurhash optional?

The frontend can then retrieve the blurhash string as part of the MediaItem object in Twig. There are tons of options to render it:

• There's an official JS/TS encoder (https://github.com/woltapp/blurhash/tree/master/TypeScript) that creates a Canvas object.
• React blurhash lib
• PHP can pre-decode the string to base64, which you can serve as background-image with a base64 Data URI (https://www.bram.us/2020/12/01/blurhash-low-res-blurred-placeholder-images-represented-as-text/)
• You can use a blurhash-to-css frontend lib that turns the blurhash string into a CSS background using gradients (https://www.bram.us/2021/03/07/convert-blurhash-to-a-css-background-with-blurhash-to-css/)
• ...

Other media libs that implemented blurhash:

• https://docs.filerobot.com/go/filerobot-documentation/en/store-manage/blurhash
• https://spatie.be/docs/laravel-medialibrary/v9/responsive-images/getting-started-with-responsive-images#progressive-image-loading (although not blurhash)
• Unsplash added blurhash support in their API: https://changelog.unsplash.com/update/2020/09/28/blur_hash.html

⚠️ Watch out for

• Needs PHP 7.3 as minimum = Breaking change
• Needs a new db column blur_hash on MediaItem = Breaking change
• Measure time to encode blurhash, if it impacts, set it as disabled by default in module_settings ?

[carakas]

I would do this as a PR to the restructure core branch (Fork 6), The minimum PHP version is already higher than 7.3 there anyway.