Об этом инструменте
Плейсхолдер — это то, что страница показывает за мгновение до того, как настоящее изображение полностью загрузится: размытое пятно будущей фотографии или просто прямоугольник сплошного цвета — чтобы макет не «прыгал», а страница ощущалась живой, пока реальный файл ещё в пути. Стиль «размытого фото» часто называют LQIP (Low-Quality Image Placeholder, плейсхолдер низкого качества): исходную фотографию уменьшают до горстки пикселей — 20–40px по длинной стороне вполне достаточно, — при желании слегка размывают и заново кодируют этот крошечный результат. Пикселей так мало, что кодировать почти нечего, поэтому результат обычно весит от нескольких сотен байт до пары килобайт — достаточно мало, чтобы встроить его прямо как base64 data URI вместо отдельного запроса файла.
Встраивание плейсхолдера как data URI означает, что он едет прямо внутри HTML или CSS самой страницы — не нужен лишний сетевой запрос только ради того, чтобы показать что-то до прихода настоящей фотографии. Растяните этот крошечный, слегка размытый результат с помощью CSS до реального размера отображения изображения — и он будет выглядеть как мягкое превью будущей фотографии; именно этот приём лежит в основе эффекта плавного проявления на сайтах вроде Medium и во многих галереях товарных фото. Если исходной фотографии пока нет — например, вы делаете skeleton-экран, черновой макет или резервируете место под контент, который пользователь ещё не загрузил, — переключитесь на второй режим, чтобы вместо этого сгенерировать плейсхолдер сплошного цвета, градиента или полос любого пиксельного размера — с тем же мгновенным скачиванием и копируемым data URI. Всё выполняется локально в браузере; ничего никогда никуда не загружается.
Частые вопросы
Насколько "маленький" data URI для LQIP?
Типичный вывод при стандартных крошечных размерах (значительно менее 50 пикселей по большей стороне) составляет примерно от нескольких сотен байт до 1-2 КБ в виде строки base64 — достаточно мало, чтобы встроить напрямую в ваш HTML/CSS/JS, не добавляя заметного веса странице, что и есть весь смысл техники LQIP: показать ЧТО-ТО немедленно, пока настоящее полноразмерное изображение загружается в фоне.
Стоит ли использовать режим "Из фото" или режим "Сплошной/градиент"?
Используйте «Из фото», когда у вас уже есть реальное изображение и вы хотите заполнитель, визуально намекающий на то, что появится (размытый предпросмотр реального содержимого) — это даёт пользователям более плавный, информативный опыт загрузки. Используйте «Сплошной/градиент», когда вам нужен универсальный заполнитель ДО того, как реальное изображение станет известно или будет готово (например, состояние скелетной загрузки для галереи, фото для которой ещё не выбраны), или просто хотите что-то более простое и ещё меньшее, чем LQIP.