Feature Request: Blurhash or similar image placeholder implementation

[ted-too]

First of all I would just like to say what a job guys bravo! I recently discovered payload and my goodness what a product.

Anyway as the title states I think adding a native blurhash implementation to upload collections would be amazing and not too difficult. I am currently using my own half-baked implementation with cloudinary but I have only gone as far as to generate and store the blurhashes for images.

Right now all images on the admin panel do not have placeholders therefore layouts with images are not optimal.

My Implementation:
Used in a beforeChangeHook on a media(upload) collection after an image is uploaded to cloudinary #220

import sharp from "sharp";     
import { UploadedFile } from "express-fileupload";
import { encode } from "blurhash";

const encodeImageToBlurhash = async (file: UploadedFile) => {
  const { data: buffer, info: metadata } = await sharp(file.data)
    .raw()
    .ensureAlpha()
    .resize(32, 32)
    .toBuffer({ resolveWithObject: true });
  const pixels = new Uint8ClampedArray(buffer);
  const blurHash = encode(pixels, metadata.width, metadata.height, 4, 4);
  return blurHash;
};

[jmikrut]

Thank you for the kind words @ted-too!

This is a good call. This honestly may be best solved via hooks, or even a plugin, but if you were to wrap up your code in a nice plugin that could be re-used, that would be amazing. In the future it could be worked into the core but I am not sure when the Payload team could commit to building this internally.

Does your implementation work currently?

[ted-too]

Yea it does. Although I have just stumbled across this plugin https://github.com/invakid404/payload-blurhash-plugin that implements blurhashes to all upload collections as well if I'm not wrong.
Anyways problem half-solved!

[Arctomachine]

Thumbhash is better algorithm than blurhash. It gives better image (subjective, but in most cases it looks more appealing) and comparable or smaller sizes (except for transparent images).
https://evanw.github.io/thumbhash/