Стендап Сьогодні 📢 Канал в Telegram @stendap_sogodni
🤖🚫 AI-free content. This post is 100% written by a human, as is everything on my blog. Enjoy!19.05.2023
Blurhash для статичного сайту (та чому це погана ідея)
Blurhash - то класний механізм швидкого відображення попереднього перегляду для світлин. Він кодує світлину у стислий (декілька десятків символів) рядок, з якого потім малює розмите наближення. Ось, як приклад, мій аватар: UrLq3Nxv?w%N?JogIoWBRkWCRjjboMayoMoM.
Мені захотілося впровадити його на своєму сайті. Але є нюанс: для відображення такого хешу потрібний JavaScript та елемент <canvas> - або ж взагалі повноцінний додаток. Бо Blurhash не є загально прийнятним форматом файлів — це просто вхідний рядок для алгоритму
А я хотів повністю статичне рішення. Якщо розібратись, що може з себе ставити таке рішення, то це має бути або інше зображення, або деякий CSS, який можна створити з даного blurhash. Навіть знайшов бібліотеку blurhash-to-css, яка нібито саме те й робить.
Навіть написав код, який генерує blurhash зі світлини, а потім перетворює його на CSS. До речі, знайшов непогану бібліотеку Sharp для перетворення зображень на Node.js. Мені вона знадобилась, щоб дістати з файлу JPEG “сирі пікселі” - а також додати до них альфа-канал. Сайт бібліотеки навіть обіцяє, що вона швидша за ImageMagick, тож варто мати на увазі.
От тільки все це марнування часу. Виявилось, що все, що фактично робить blurhash-to-css - це генерує піксельну версію зображення з низькою роздільною здатністю, а потім її розмиває. Причому ця піксельна версія збирається з CSS linear-gradient, тому, на перший погляд, може здатись, що робиться щось розумніше. Але ні. До того ж згенерований CSS займає цілих 2.5 КБ! В такий розмір тривіально влізе проста маленька версія зображення в data URL. Якщо її ще й розмити, то, мабуть, краще вийде.
Це, нарешті, підводить мене до висновку, що Blurhash в HTML/CSS не потрібен. Головна перевага Blurhash - що це ASCII рядок, який легко включити в документ JSON. Але натомість потрібний особливий рушій, щоб його показати. На вебі так само можна WEBP закодувати в data URL, буде компактний ASCII рядок. Проте, як я розумію, Blurhash в першу чергу потрібний саме поза межами HTML/CSS, в додатках — де, може, не так легко показати зображення з рядка?
Одним словом, наступним разом поекспериментую з data URL.
PS: підхід попереднього завантаження компактної версії світлин називається LQIP.