Images Preview
На некоторых сайтах, где надо показывать изображения в высоком качестве, для UX применяются изображения-заполнители низкого качества. Они дают представление о некоторых деталях и цветах оригинала, пока тот загружается.
Эта техника также известна как LQIP (Low Quality Image Placeholder) и есть разные способы реализации, даже с помощью CSS. Но чаще это специально подготовленное изображение, встроенное как фон в виде data URL в Base64.
— замещаемый элемент, во время загрузки изображения из src это обычный контейнер, которому можно задать фон в CSS. Небольшое размытое изображение встроено как Base64 в HTML, чтобы не тратить время на загрузку.
Пользователь сразу видит размытое изображение, которое даёт представление об оригинальном изображении, которое тем временем загружается в фоне. Когда оно будет загружено, содержимое замещается и фон перестаёт работать.
Патрик Броссет предлагает реализовать этот шаблон на уровне веб-платформы. Он подготовил эксплейнер и описал в статье как это решается сегодня и предлагаемое им решение. Обратную связь можно оставить в репозитории предложения.
К предлагается добавить атрибут previewsrc для изображения-заполнителя, которое будет отображаться до загрузки основного изображения из src. Атрибут никак не меняет работу src, srcset, sizes и loading.
Алгоритм у браузера следующий:
- Загрузить оригинал и заполнитель, отдавая более высокий приоритет оригиналу;
- Отобразить заполнитель;
- Заменить заполнитель на оригинал, когда тот загрузится и будет готов.
Если оригинал по каким-то причинам будет загружен раньше заполнителя, то он будет показан. Заполнитель можно встроить как Base64. Если браузер не поддерживает атрибут, то всё будет работать как обычно, а фон можно использовать как фоллбэк.
Атрибут previewsrc лишь удобный способ указать заполнитель. Браузер не делает никаких трансформаций и не создаёт сам заполнитель, это отдельная задача, всё ещё лежащая на плечах разработчиков. С атрибутом будет меньше хаков.
Кроме того, так как это атрибут в HTML, его можно тесно интегрировать с парсером и сканером предварительной загрузки. Тогда сетевой процесс браузера сможет менять приоритеты в зависимости от ситуации и применять прочие оптимизации загрузки.
Интересно, что в Netscape, IE4 и ранних Firefox был нестандартный атрибут lowsrc, который делал то же самое. Это устаревший атрибут, ни один современный браузер его не поддерживает. Однако в DOM API все ещё можно читать и записывать свойство lowsrc, хотя это ни к чему не приводит.
#html
На некоторых сайтах, где надо показывать изображения в высоком качестве, для UX применяются изображения-заполнители низкого качества. Они дают представление о некоторых деталях и цветах оригинала, пока тот загружается.
Эта техника также известна как LQIP (Low Quality Image Placeholder) и есть разные способы реализации, даже с помощью CSS. Но чаще это специально подготовленное изображение, встроенное как фон в виде data URL в Base64.
— замещаемый элемент, во время загрузки изображения из src это обычный контейнер, которому можно задать фон в CSS. Небольшое размытое изображение встроено как Base64 в HTML, чтобы не тратить время на загрузку.
Пользователь сразу видит размытое изображение, которое даёт представление об оригинальном изображении, которое тем временем загружается в фоне. Когда оно будет загружено, содержимое замещается и фон перестаёт работать.
Патрик Броссет предлагает реализовать этот шаблон на уровне веб-платформы. Он подготовил эксплейнер и описал в статье как это решается сегодня и предлагаемое им решение. Обратную связь можно оставить в репозитории предложения.
Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказаться
К предлагается добавить атрибут previewsrc для изображения-заполнителя, которое будет отображаться до загрузки основного изображения из src. Атрибут никак не меняет работу src, srcset, sizes и loading.
Алгоритм у браузера следующий:
- Загрузить оригинал и заполнитель, отдавая более высокий приоритет оригиналу;
- Отобразить заполнитель;
- Заменить заполнитель на оригинал, когда тот загрузится и будет готов.
Если оригинал по каким-то причинам будет загружен раньше заполнителя, то он будет показан. Заполнитель можно встроить как Base64. Если браузер не поддерживает атрибут, то всё будет работать как обычно, а фон можно использовать как фоллбэк.
Атрибут previewsrc лишь удобный способ указать заполнитель. Браузер не делает никаких трансформаций и не создаёт сам заполнитель, это отдельная задача, всё ещё лежащая на плечах разработчиков. С атрибутом будет меньше хаков.
Кроме того, так как это атрибут в HTML, его можно тесно интегрировать с парсером и сканером предварительной загрузки. Тогда сетевой процесс браузера сможет менять приоритеты в зависимости от ситуации и применять прочие оптимизации загрузки.
Интересно, что в Netscape, IE4 и ранних Firefox был нестандартный атрибут lowsrc, который делал то же самое. Это устаревший атрибут, ни один современный браузер его не поддерживает. Однако в DOM API все ещё можно читать и записывать свойство lowsrc, хотя это ни к чему не приводит.
#html