<img>. Доклад Яндекса

[bolk]

Когда-то я делал страницу, где можно проверить какие форматы графики поддерживает ваш браузер: bolknote.github.io/detect-browser-graphics-formats

[BlackStar1991]

Спасибо за доклад, познавательно. У меня тут парочка вопросов, может что посоветуешь если не сложно —
1) Как в зависимости от устройства пользователя отдавать нужную картинку

<link rel="preload" as="image" href="important-image-desctop.jpg">

этот код полезен ели пользователь пришёл с компа, но если он пришел с мобилы, то насильно этим тегом в head отдам картинку которая ему не нужна… (Google Lighthouse при тесте покажет что разработчик сделал очень жёсткую глупость, проверено )

2) Как правильно работать с атрибутом loading=«lazy» в gulp? Если откладывать загрузку для очень широких изображений например:

<picture>
   <source media="(min-width: 30px)" srcset="mooshroom-320.webp" type="image/webp">
   <source media="(min-width: 1200px)" srcset="mooshroom.webp" type="image/webp">
   <img src="mooshroom.png" width="1920" height="400" loading="lazy" alt="mooshroom">
</picture>

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

[DarkMeFoDy]

1) Как в зависимости от устройства пользователя отдавать нужную картинку

Спека говорит, что можно комбинировать media и imagesrcset:

<link rel="preload" as="image"
      imagesrcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
      media="(max-width: 800px)">

Но с таким подходом важно понимать, что без picture браузер не знает про ограничивающий контейнер, в рамках которого достаточно выбрать что-то одно первое подходящее. Поэтому media-выражения надо писать так, чтобы они однозначно указывали на один ресурс, избыточно.
С Chrome 73 можно использовать imagesrcset: www.chromestatus.com/feature/5164259990306816
addyosmani.com/blog/preload-hero-images — вот ещё статья на похожую тему от Эдди Османи.

2) Как правильно работать с атрибутом loading=«lazy» в gulp?

Проблема не в gulp. По вашему коду, если я правильно понял, вы говорите браузеру: зарезервируй мне пространство 1920x400, а потом в него загрузи картинку, когда пользователю нужно будет. Браузер так и делает, на мелких экранах появляется скролл. Если у всех картинок одинаковые пропорции, достаточно будет при помощи CSS задать картинке max-width: 100%; height: auto;, например, чтобы растянуть картинку по ширине. По идее, скролл уйдёт. Атрибут loading не про размеры, он про отложенную загрузку, но браузеру до загрузки хорошо бы понимать, сколько места оставить под заглушку.

[BlackStar1991]

С первой задачей, всё стало хорошо, спасибо. Правда до конца не ясно как написать правильно, но вариант по типу

<link rel="preload" as="image" imagesrcset="img-400x400.jpg" media="(max-width: 450px)">
<link rel="preload" as="image" imagesrcset="img-1900x1188.jpg" media="(min-width: 451px)">

заработал и теперь ошибка в консоль не падает.
А вот со вторым вопросом проблемка не решилась, но всё равно спасибо.