Итак, перед тобой задача: поставить заглушку, пока грузится основное изображение.
Нет проблем, говоришь ты, и шлёпаешь серый прямоугольник.
И все такие: «Ну чот...»
Наверное, есть же что-то получше?
Да, есть. LQIP-техники вида, собственно, LQIP, SQIP и BlurHash. Вот, писал тут: https://t.me/htmlshit/2565
Ну или генерация всенаправленного градиента по фото: https://t.me/htmlshit/3517
Но это всё как-то муторно... вот бы что попроще.
И таки есть! Лин Рада — разработчик из Canva — придумал новую технику LQIP, основанную на CSS. Заключается она в кодировании цветных тёмных/светлых участков короткой последовательностью символов.
Ну, типа:
<img src="…" style="--lqip:192900">
И пример того, что получается, можно посмотреть на иллюстрации.
А сама статья шикарный пример умного использования различного рода координат: https://leanrada.com/notes/css-only-lqip/
Изображение бьётся на 6 частей и фон, уровень светлости этих частей задаётся простым кодом. А дальше в дело вступают простые радиальные градиенты и размытие, которые и дают нужный эффект.
Конечно, математики там сильно больше, чем я сейчас описал, потому очень рекомендую хотя бы пролистать её.
Кстати, там же есть и скрипт для обработки картинок, чтобы не гадать координаты самому.
#css #lqip #math