Как стать автором
Обновить

Комментарии 27

loading=«lazy»
зачем еще какойто js и т.д. городить?
опять для поддержки IE 2009?
да, но метрики собираются с хрома, можно забить, макосеры-айосеры должны страдать в принципе, кмк

Менеджеру или клиенту с ios этого не докажешь.

Уточню, страдания должны быть публичными, чтобы Apple увидела (вернее, акционеры Apple увидели), что пользователи продукции Apple страдают. Пока никто не видит, никакого резона просто так что-то исправлять нет.
сафари у тех кто делает, у юзеров оно как бы…

Есть и у юзеров. Недавно узнал, что оно не умеет element.scrollTo(0, x), пришлось делать element.scrollTop = x. Заказчик в админку из сафари ходит.

В двух словах атрибут loading сейчас в браузерах организован не лучшим образом, к сожалению
А с js обязательно лучше? То как сейчас сделана ленивая загрузка изображений на хабре — совсем ужас.

С js можно сделать хуже что угодно. Но если нужен пример то, картинки на медиуме вроде как хороший пример ленивой загадки.

Затем, что, еще недавно, loading=«lazy» не работал в хроме на мобильных устройствах с медленным 3g. Сейчас, может пофиксили, не проверял.

А еще можно воспользоваться специализированными CDN, например https://uploadcare.com/, и не городить огород с чем-то вроде ImageMagic. Там из коробки вы получите WebP для тех браузеров, которые этот формат поддерживают и еще кучу всякой полезной магии, которой самостоятельно наколхозить будет непросто.

за такие цены даже задаром не нужен

Мне хватает бесплатного плана. Если ваш проект не вписывается в бесплатные рамки, расходы на инфраструктуру все равно будут для вас довольно заметными.

а полностью на webp переходить пока не рекомендуется?

В Can I Use указан поддержка 91.3% всех браузеров. Малину портит все тот же Safari, где нет поддержки альфа-канала и анимации, но если они не существенны, то уровень поддержки возрастает до 95%. Да и в случае если они нужны, можно делать fallback на стандартные форматы в случае отсутствия полной поддержки со стороны браузера, вопрос лишь занимаемом картинками дисковом пространстве на сервере.

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

Тоже заходя сюда ожидал про webp почитать, т.к. речь в заголовке про 2021 год.
Похоже да, нужно будет все фото и в jpg и webp хранить и выдавать в з-ти от заголовка Accept.
Не хочется чтобы по скорости сайт уступал конкурентам.

По заголовкам — это чтобы экономить на нескольких source в теге picture? Чувствую в этом подходе подводные камни в применении с SSR, чтгбы одинаковый код выходил.

вот это и надо было в статье осветить
у меня в основном просто фото. альфа и анимация не нужны.

А что по поводу seo при выводе изображений посредством JavaScript? Кажется поисковые роботы ещё не научились выполнять js скрипты. А изображения вроде как играют роль в продвижении

Для решения этой проблемы придумали технологию Server Side Rendering.

Основные ПС уже довольно давно умеют выполнять js.

Data URL может быть хорош для некоторого спектра задач, но


  1. С ним не сработает кэширование картинки/иконки, если она используется на нескольких страницах.
  2. Сокращение количества запросов актуально для протоколов ниже HTTP 2.0
  3. Альтернативой может выступить векторное изображение в SVG.
Создание нескольких экземпляров изображения разного разрешения это не очень хорошая идея. Во-первых они занимают место на сервере. Во-вторых они тратят краулинговый бюджет сайта при индексировании поисковыми системами.

Но главное в том, что на мобильные устройства (а именно у них формально разрешение обычно меньше) нужно как раз выгружать изображения минимум в полтора раза большие чем то место которое они будут занимать, потому что изображения пиксел-в-пиксел будут выглядеть на мобильных устройствах нечеткими из-за технологий изменения разрешения наэкранах современных устройств. Причем для современных устройств коэффициента 1.5 недостаточно, многим уже надо 2.

Особенно сказанное касается аватаров и фотографий товара, их обязательно надо на мобильные устройства выгружать в 1.5-2 раза больше, чем формальное разрешение в HTML. Иначе воспринимаются размытыми.

На 4k-мониторах тоже эта проблема, поэтому есть смысл чуть ли не везде двойной размер иметь. А регулировать показ можно через srcset. Поэтому всё равно получится по две копии картинки.

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