Наткнулся на интересный инструмент для создания плейсхолдеров для изображений. Часто на сайтах, где много картинок, используют подход, когда сначала грузится какое-то цветное пятно, отдалённо напоминающее оригинальную картинку, а потом это пятно заменяется на оригинал, когда браузер его уже докачал. Так пользователь видит что-то и понимает, что идёт загрузка.
BlurHash интересен тем, что по сути строка
L6PZfSi_.AyE_3t7t7R**0o#DgR4 — это полноценная картинка. На сервере при сборке или загрузке картинки в ваше файлохранилище нужно запустить ecnode, который эту строку выдаст. А на клиенте нужно вызвать функцию decode, которая эту строку превратит в то самое цветное пятно, похожее на картинку.Из минусов — это
canvas. Подменять canvas на картинку тяжелее, чем просто внутри img подменить src. И для отрисовки этого canvas на клиент надо затащить тот самый скрипт, который превратит набор символов в картинку-пятно. То есть для статических сайтов и отрисовки LCP я бы это точно не использовал. И ещё нужно точно знать размеры картинок, что не всегда возможно.Но если у вас SPA, которое пользователь крайне редко закрывает, при этом перемещается по страницам с картинками постоянно, то один раз в начале загрузить библиотеку (и закэшировать при помощи service worker) — и вот уже приятная экономия на скорости загрузки данных.
Как сайд-эффект — такие пятна можно использовать, чтобы прятать нежелательный контент за клик. Для интриги или для соблюдения законодательства.
В GitHub проекта написано, что ими пользуются Mastodon, Signal. Конечно, для нативных приложений библиотека точно лучше подходит, но хочу попробовать как-нибудь воспользоваться для веб-проекта.
https://blurha.sh/
