Blurhash component is the recommended way to render blurhashes in your React projects. It uses BlurhashCanvas and a wrapping div to scale the decoded image to your desired size. You may control the quality of the decoded image with resolutionX and resolutionY props.
This message by Elaina Natario writing over at Thoughtbot cannot be repeated enough:
While both the alt attribute and the figcaption element provide a way to describe images, the way we write for them is different. alt descriptions should be functional; figcaption descriptions should be editorial or illustrative.
Examples of both functional and editorial descriptions in the full post!
To compress and compare images with different codecs right in your browser there’s squoosh.app that you can use.
Announced at the still ongoing Chrome Dev Summit 2020 is Squoosh v2 with new codecs support (AVIF!), an updated design, and the release of CLI version!
Squoosh CLI is an experimental way to run all the codecs you know from the Squoosh web app on your command line using WebAssembly. The Squoosh CLI uses a worker pool to parallelize processing images. This way you can apply the same codec to many images at once.
Squoosh CLI is currently not the fastest image compression tool in town and doesn’t aim to be. It is, however, fast enough to compress many images sufficiently quick at once.
If you’re dealing with images it’s quite common to show a small placeholder while the image is loading. You could go with grey placeholders, but a low-res blurred version of the original is preferred. That way you can, in the example use case of a website, use the Blur Up technique once the image is loaded. BlurHash is something that can help you with exactly that:
In short, BlurHash takes an image, and gives you a short string (only 20-30 characters!) that represents the placeholder for this image. The string is short enough that it comfortably fits into whatever data format you use. For instance, it can easily be added as a field in a JSON object.
An example of a BlurHash would be LEHV6nWB2yk8pyo0adR*.7kCMdnj
Implementations that can encode and decode exist for TypeScript, PHP, Python, Swift, Kotlin, etc.
While this is most likely a classic case of #damnyouautocorrect(instead of jokingly being a LOTR/Scrubs reference), that didn’t keep Jay Phelps from creating loading-attribute-eagle-polyfill to cater for those small mishaps:
A polyfill for <img loading="eagle" />. Displays an America Eagle as the placeholder of the image while the your real images are still loading.
LOL 😁 — I love the internet.
Here’s a code example on how to use, if you ever were to use it in the first place:
<!-- Here's an example URL that artificially delays the src so you can see the proud Eagle -->