Рубрики
СЕО дайджест

#изображения #decoding #наковре @demimu…

#изображения #decoding
#наковре

@demimurych отвечает на вопрос @mihdan:
Стоит ли в 2020 году использовать атрибут decoding=async для изображений или с ним дела обстоят также как и с loading=lazy?

Краткий ответ: да, стоит.
Подробный ответ: https://www.youtube.com/watch?v=VqoOGQ3RkcI

Длительность видео: 1:32

********

Для любознательных

Раньше все браузеры работали в режиме sync.
Что означало: пока картинка не расшифрована, не загружена и не показана — ничего дальше не делать. Т.е. раньше, как только браузер сталкивался с тегом img при парсинге документа HTML, он замирал и ждал полной загрузки изображения и его декодирования.

Позже в стандарте появился атрибут decoding который дал на выбор три значения.
auto — когда браузер сам пытается решить, что применять sync или async
sync — старое поведение
и
async

async отличается от sync тем, что браузер идет дальше, не ожидая загрузки картинки. Весь процесс загрузки и декодирования происходит в параллельном потоке, не влияя на основной поток рендеринга страницы.

Плюсы очевидны.
Раньше браузер ждал картинку, потом рендерил, потом шел дальше.
Сейчас если указать async, эти процессы идут параллельно.

НО

Есть недостаток, который связан с кривыми руками верстальщиков.
С sync браузер, загрузив изображение, точно знал про него всё, в том числе его размер. Зная размер, можно точно построить текущее отображение.

Если не знаешь размер картинки и у тебя стоит async, то браузер идет дальше, что-то рисует, в этот момент подгружается картинка, и вдруг браузер узнает
что картинка 10000 на 10000.
И после ее отрисовки весь контент смещается черти куда.

Вот в этом и конфликт с дизайнером,
дизайнер хочет как раньше, чтобы ничего не скакало, а шло последовательно.

Решение задачи, конечно, очень простое:
верстальщик должен так сверстать область под изображение, чтобы она заранее выделяла нужное под него место.

В результате когда изображение загрузится, оно спокойно впишется в нужную область и ничего скакать не будет.

Ну и второе конечно то, что при sync идет всё последовательно.

При async нередки ситуации когда вся страница сформирована, и тут начали появляться картинки, потому что только сейчас они загрузились.