<picture>Тег HTML5 допоможе вирішити правильне джерело зображення залежно від ширини екрана
Мабуть, поведінка браузерів не сильно змінилася протягом останніх 5 років, і багато хто все одно завантажуватиме приховані зображення, навіть якщо display: noneна них встановлено властивість.
Незважаючи на те, що існує спосіб вирішення медіа-запитів , він може бути корисним лише тоді, коли зображення було встановлено як фон у CSS.
Поки я думав, що існує просто JS-рішення проблеми ( ледаче завантаження , заповнення зображень тощо), виявилося, що є гарне чисте рішення HTML, яке виходить із коробки з HTML5.
І це <picture>тег.
Ось як це описує MDN :
HTML <picture>елемент являє собою контейнер , який використовується для вказівки кількох <source>елементів для конкретного <img>містяться в ній. Веб-переглядач вибере найбільш підходяще джерело відповідно до поточного макета сторінки (обмеження поля, в якому відображатиметься зображення) та пристрою, на якому він буде відображатися (наприклад, звичайний пристрій або hiDPI.)
А ось як його використовувати:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
Логіка позаду
Веб-переглядач завантажує джерело imgтегу, лише якщо не застосовується жодне з медіа-правил. Якщо <picture>елемент не підтримується браузером, він знову відновлює показ imgтегу.
Зазвичай ви розміщуєте найменше зображення як джерело <img>і, таким чином, не завантажуєте важкі зображення на більші екрани. І навпаки, якщо застосовується правило медіа, джерело <img>заповіту не завантажуватиметься, натомість він завантажить вміст URL-адреси відповідного <source>тегу.
Єдиний підводний камінь тут полягає в тому, що якщо елемент не підтримується браузером, він завантажить лише невелике зображення. З іншого боку, у 2017 році нам слід було б продумати та кодувати в рамках мобільного першого підходу.
І перш ніж хтось надто вийшов, ось поточна підтримка браузера для <picture>:
Настільні браузери
Мобільні браузери
Детальніше про підтримку браузера, яку ви можете знайти на веб-сайті Чи можу я використовувати .
Хороша річ, що пропозиція html5please полягає в тому, щоб використовувати його з резервним запасом . І я особисто маю намір скористатися їх порадою.
Більше про тег ви можете знайти в специфікації W3C . Там є відмова від відповідальності, яку я вважаю важливим зазначити:
pictureЕлемент дещо відрізняється від аналогічних перспективних videoі audioелементів. Хоча всі вони містять sourceелементи, srcатрибут елемента-джерела не має значення, коли елемент вкладається в pictureелемент, а алгоритм вибору ресурсів інший. Крім того, сам pictureелемент нічого не відображає; він просто надає контекст для вміщеного imgелемента, який дозволяє йому вибирати з декількох URL-адрес.
Отже, це говорить лише про те, що це лише допомагає покращити продуктивність при завантаженні зображення, надаючи йому деякий контекст.
І ви все одно можете використовувати деякі CSS-магію, щоб приховати зображення на невеликих пристроях:
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
Таким чином, браузер не відображатиме фактичне зображення, а завантажує лише 1x1піксельне зображення (яке можна кешувати, якщо використовувати його не один раз). Однак майте на увазі, що якщо <picture>тег не підтримується веб-переглядачем, навіть на екранах стільниці фактичне зображення не відображатиметься (тому вам обов'язково потрібна резервна копія поліфауніту).
