Добавлять на изображения в статьях loading=lazy

[vitalybaev]

Недавно свойство завезли в Firefox, уже есть в Chrome и на подходе в мобильном Safari. Желательно это автоматизировать.

[pepelsbey]

Есть два варианта:

1. Расставить вручную или автоматически эти атрибуты в маркдауне
2. Расставлять их автоматически при сборке

Какой бы вариант мы ни выбрали, нужно решить с какой картинки начать. То есть прикинуть после какого объёма текста начинаются картинки, которые можно отложить.

Плюс кажется для этого важно иметь картинки с размерами. Нужно ещё проверить, есть ли размеры в атрибутах на нашей графики.

[MeFoDy]

Нет двух вариантов. У нас статический сайт, поэтому весь HTML и его CSS придут до запроса за картинкой. Картинка начнёт грузиться сразу же, как попадёт во вьюпорт, пусть и с приоритетом Low (баг чинится в https://bugs.chromium.org/p/chromium/issues/detail?id=992526). Так что можно смело ставить атрибут вообще на всех картинках в статьях.

Размеры можно получать на этапе сборки. Или взять лучшие техники из https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ и использовать не размеры, а пропорции.

Могу сделать в рамках #25.

[pepelsbey]

Можешь подробнее объяснить про баг с loading=lazy?

[MeFoDy]

Источник: https://web.dev/native-lazy-loading/#is-there-a-downside-to-lazy-loading-images-or-iframes-that-are-within-the-device-viewport

Если я правильно всё понял, то загрузка изображений с loading=lazy начинается только после события window.onload. Для нас это не проблема, так как на страницах нет ничего тяжёлого и опасного, кроме самих картинок. (Да, укол в сторону фреймворков)

[firefoxic]

Мне кажется, или задача потеряла актуальность? Вроде же дефолт уже сменился на lazy. Или не во всех браузерах пока?

[pepelsbey]

Дефолт, насколько я знаю, не сменился на lazy, откуда информация?

[firefoxic]

Чтение новостей по диагоняли за несколько месяцев в купе с вечным стремлением мозга выдавать желаемое за действительное привело к такому заблуждению. Поискал в новостях и в поисковиках, нашёл подобное только про мобильный хром. А жаль, было бы хорошо. Прошу прощения.

[higimo]

@MeFoDy продолжишь работу над задачей?=)

[MeFoDy]

Если кто-нибудь перехватит — сопротивляться не буду :) Сейчас завал, не смогу в опенсорс.

[kmisha]

Привет!

Если никто не против я могу попробовать.

Я предлагаю использовать addTransform для поиска тега img в статье и добавления loading="lazy"

[MeFoDy]

Я бы добавлял ленивую загрузку только картинкам/видео/айфреймам, которые ниже первого экрана. Тут либо как-то определять количество текста до картинки, либо топорно первую грузить всегда, а остальные — лениво.

[vitalybaev]

Как по мне, здесь топорный вариант предпочтительнее - вряд ли мы реализуем хорошую эвристику определения высоты текста и с учетом вариативности вьюпортов куда-то не попадем. А всегда грузить первую картинку, а остальные - лениво - максимально простой способ, который покроет подавляющее большинство статей

[kmisha]

Хорошо тогда первая катинка это всегда изображение из заголовка. А на все изображения в статье тогда добавляем loading аттрибут. Работает примерно так:

[monochromer]

Актуальна ли данная задача? Думаю, можно закрыть, так как нужная функциональность была реализована в данном PR. Хотя я вижу, что эту фичу удаляли.