Оптимизация веб-графики в 2021 году

[sojey80135]

loading=«lazy»
зачем еще какойто js и т.д. городить?
опять для поддержки IE 2009?

[alfixer]

Сафари же.
caniuse.com/loading-lazy-attr

[sinneren]

да, но метрики собираются с хрома, можно забить, макосеры-айосеры должны страдать в принципе, кмк

[alfixer]

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

[ainu]

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

[vinyardrip]

сафари у тех кто делает, у юзеров оно как бы…

[Metotron0]

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

[vovasik]

В двух словах атрибут loading сейчас в браузерах организован не лучшим образом, к сожалению

[orekh]

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

[vovasik]

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

[Chebaa]

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

[i360u]

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

[sojey80135]

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

[i360u]

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

[riky]

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

[dolfinus]

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

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

[riky]

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

[Metotron0]

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

[riky]

вот это и надо было в статье осветить

[riky]

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

[RomanWed]

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

[Rive]

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

[scorp13]

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

[Rive]

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

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

[SergeKh]

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

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

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

[Metotron0]

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

[orekh]

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