Images Preview

На некоторых сайтах, где надо показывать изображения в высоком качестве, для UX применяются изображения-заполнители низкого качества. Они дают представление о некоторых деталях и цветах оригинала, пока тот загружается.

Эта техника также известна как LQIP (Low Quality Image Placeholder) и есть разные способы реализации, даже с помощью CSS. Но чаще это специально подготовленное изображение, встроенное как фон в виде data URL в Base64.

<img
  src="high-quality.webp"
  style="background-image: url(
    data:image/png;base64,...
  )"
  width="..."
  height="..."
  alt="..."
>

<img> — замещаемый элемент, во время загрузки изображения из src это обычный контейнер, которому можно задать фон в CSS. Небольшое размытое изображение встроено как Base64 в HTML, чтобы не тратить время на загрузку.

Пользователь сразу видит размытое изображение, которое даёт представление об оригинальном изображении, которое тем временем загружается в фоне. Когда оно будет загружено, содержимое <img> замещается и фон перестаёт работать.

Патрик Броссет предлагает реализовать этот шаблон на уровне веб-платформы. Он подготовил эксплейнер и описал в статье как это решается сегодня и предлагаемое им решение. Обратную связь можно оставить в репозитории предложения.

Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказаться

К <img> предлагается добавить атрибут previewsrc для изображения-заполнителя, которое будет отображаться до загрузки основного изображения из src. Атрибут никак не меняет работу src, srcset, sizes и loading.

<img
  previewsrc="low-quality.png"
  src="high-quality.webp"
  width="..."
  height="..."
  alt="..."
>

Алгоритм у браузера следующий:

- Загрузить оригинал и заполнитель, отдавая более высокий приоритет оригиналу;
- Отобразить заполнитель;
- Заменить заполнитель на оригинал, когда тот загрузится и будет готов.

Если оригинал по каким-то причинам будет загружен раньше заполнителя, то он будет показан. Заполнитель можно встроить как Base64. Если браузер не поддерживает атрибут, то всё будет работать как обычно, а фон можно использовать как фоллбэк.

Атрибут previewsrc лишь удобный способ указать заполнитель. Браузер не делает никаких трансформаций и не создаёт сам заполнитель, это отдельная задача, всё ещё лежащая на плечах разработчиков. С атрибутом будет меньше хаков.

Кроме того, так как это атрибут в HTML, его можно тесно интегрировать с парсером и сканером предварительной загрузки. Тогда сетевой процесс браузера сможет менять приоритеты в зависимости от ситуации и применять прочие оптимизации загрузки.

Интересно, что в Netscape, IE4 и ранних Firefox был нестандартный атрибут lowsrc, который делал то же самое. Это устаревший атрибут, ни один современный браузер его не поддерживает. Однако в DOM API все ещё можно читать и записывать свойство lowsrc, хотя это ни к чему не приводит.

#html