Great explanation on how to generate and use as a background the smallest possible legitimate LCP image placeholder while waiting for our full-resolution image to arrive. While I admire the thoroughness of the article, I'm overcome by a feeling of sadness: I absolutely believe that this should be the role of a progressive image format, and not the shenanigans of front-end developers.
Blurhash strings are short enough to be added as a field in a JSON object and to be stored in a database. The implementations are small and easy to port to new languages, and the end result is a smooth and interesting experience for your users.
… ~50% savings compared to JPEG, and ~20% savings compared to WebP.
… can be lossy or lossless, has the ability to use an alpha channel (transparency for UI and design elements), and even has the ability to store a series of animated frames (think lightweight high-quality animated GIFs).
… one of the first image formats to support HDR color support; offering higher brightness, color bit depth, and color gamuts.
I'm pretty happy to have cut the size of images on my blog by ~50%. In addition to the benefits to user experience at a critical time, I'm also expecting that this'll save me some money in terms of bandwidth.