Відкладене Завантаження Зображень На Рівні Веб-Переглядача Для Інтернету

Підтримка на рівні браузера для відкладеного завантаження зображень тепер підтримується в Інтернеті! У цьому відео показано демонстрацію функції:

У Chrome 76 і далі ви можете використовувати атрибут для зображень, які не завантажують lazy, без необхідності писати власний лінивий код завантаження або використовувати loading окрему бібліотеку JavaScript. Давайте зануримося в деталі.

Сумісність з браузерами #

Браузери, які не підтримують loading атрибут, просто ігнорують його без побічних ефектів.

Чому відкладене завантаження на рівні браузера? #

Відповідно до HTTPArchive, зображення є найбільш затребуваним типом активів для більшості веб-сайтів і зазвичай займають більшу пропускну здатність, ніж будь-який інший ресурс. При 90-му процентилі сайти надсилають близько 4,7 МБ зображень на комп'ютери та мобільні пристрої. Це багато фотографій котів.

Раніше існувало два способи відкласти завантаження позаекранних зображень:

• Використання API спостерігача перетинів
• Використання scrollобробників , або orientationchange обробників resizeподій

Будь-який варіант може дозволити розробникам включити функцію відкладеного завантаження, і багато розробників створили сторонні бібліотеки, щоб надати абстракції, які ще простіші у використанні. Однак, оскільки відкладене завантаження підтримується безпосередньо браузером, немає необхідності в зовнішній бібліотеці. Відкладене завантаження зображень на рівні браузера також гарантує, що відкладене завантаження зображень все ще працює, навіть якщо JavaScript вимкнено на клієнті.

Атрибут loading #

Chrome завантажує зображення з різними пріоритетами залежно від того, де вони розташовані, залежно від вікна перегляду пристрою. Зображення під вікном перегляду завантажуються з нижчим пріоритетом, але вони все одно завантажуються якомога швидше.

Ви можете використовувати loading атрибут, щоб повністю відкласти завантаження закадрових зображень, які можна досягти прокруткою:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Here are the supported values for the loading attribute:

• lazy: відкладіть завантаження ресурсу, доки він не досягне обчисленої відстані від вікна перегляду.
• eager: поведінка завантаження браузера за умовчанням, яка збігається з невключенням атрибута та означає, що зображення завантажується якомога швидше, незалежно від того, де воно розташоване на сторінці. Хоча це за замовчуванням, може бути корисно явно встановити це, якщо ваш інструмент автоматично додає loading="lazy" , якщо явного значення немає, або якщо ваш лінтер скаржиться, якщо він явно не встановлений.

Зв'язок між атрибутом і пріоритетом вибірки #

Значення eager - це просто інструкція завантажувати зображення як зазвичай, не затримуючи навантаження далі, якщо воно знаходиться поза екраномloading. Це не означає, що зображення завантажується швидше, ніж інше зображення без атрибутаloading="eager".

Браузери визначають пріоритетність ресурсів на основі різних евристик, і loading атрибут просто вказує, коли ресурс зображення знаходиться в черзі, а не те, як він пріоритетний у цій черзі. Просто мається на увазі звичайне бажання черги браузерів використовувати за замовчуванням. eager

Якщо ви хочете збільшити пріоритет вибірки важливого зображення (наприклад, зображення LCP), тоді слід використовувати підказки щодо пріоритету з fetchpriority="high".

Зауважте, що зображення з і fetchpriority="high" буде все одно затримуватися, поки воно знаходиться поза екраном, а потім отримуватиметься з loading="lazy" високим пріоритетом, коли воно знаходиться майже в межах вікна перегляду. У цьому випадку, швидше за все, це все одно буде з високим пріоритетом, тому ця комбінація насправді не повинна бути потрібна або використовуватися.

Порогові значення відстані від вікна перегляду #

Усі зображення, розташовані над згином, тобто доступні для негайного перегляду без прокручування, завантажуються нормально. Ті, що знаходяться набагато нижче вікна перегляду пристрою, завантажуються лише тоді, коли користувач прокручує біля них.

Реалізація Chromium лінивого завантаження намагається гарантувати, що зображення за кадром завантажуються досить рано, щоб вони закінчили завантажуватися, як тільки користувач прокрутить до них. Отримуючи зображення поблизу, перш ніж вони стануть видимими у вікні перегляду, ми максимізуємо ймовірність того, що вони вже завантажаться до того часу, коли вони стануть видимими.

Порівняно з бібліотеками завантаження JavaScript, порогові значення для отримання зображень, які прокручуються в полі зору, можна вважати консервативними. Chromium прагне краще узгодити ці порогові значення з очікуваннями розробників.

Поріг відстані не фіксований і змінюється в залежності від декількох факторів:

• Тип ресурсу зображення, що завантажується
• Ефективний тип підключення

Значення за замовчуванням для різних ефективних типів з'єднання можна знайти у джерелі Chromium. Ці цифри і навіть підхід до вибірки лише при досягненні певної відстані від вікна перегляду можуть змінитися найближчим часом, оскільки команда Chrome вдосконалює евристику, щоб визначити, коли починати завантаження.

Покращена економія даних і порогові значення відстані від вікна перегляду #

Станом на липень 2020 року Chrome значно покращив порогові значення відстані завантаження зображення від вікна перегляду, щоб краще відповідати очікуванням розробників.

У разі швидкого з'єднання (4G) ми зменшили порогові значення відстані Chrome від вікна перегляду від 3000px до 1250px та на повільніших з'єднаннях (3G або нижче), змінили поріг із 4000px 2500pxна . Ця зміна досягає двох речей:

• <img loading=lazy> поводиться ближче до досвіду, який пропонує JavaScript lazy завантаження бібліотек.
• Нові порогові значення відстані від вікна перегляду все ще дозволяють нам гарантувати, що зображення, ймовірно, завантажаться до того часу, коли користувач прокрутить їх.

Ви можете знайти порівняння між старими та новими пороговими значеннями відстані від вікна перегляду для однієї з наших демонстрацій швидкого з'єднання (4G) нижче:Старі пороги. vs нові пороги:

і нові порогові значення проти LazySizes (популярна бібліотека JS лінивого завантаження): Ми прагнемо співпрацювати зі спільнотою веб-стандартів,

щоб дослідити краще узгодження порогових значень відстані від вікна перегляду в різних браузерах.

Зображення мають містити атрибути розмірності #

Поки браузер завантажує зображення, він не відразу знає розміри зображення, якщо вони явно не вказані. Щоб браузер міг резервувати достатній простір на сторінці для зображень, рекомендується, щоб всі <img> теги містили обидва width height атрибути. Без зазначення розмірів можуть відбуватися зміщення макета, які більш помітні на сторінках, завантаження яких займає деякий час.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Alternatively, specify their values directly in an inline style:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

The best practice of setting dimensions applies to <img> tags regardless of whether or not they are being loaded lazily. With lazy loading, this can become more relevant. Setting width and height on images in modern browsers also allows browsers to infer their intrinsic size.

У більшості сценаріїв зображення все ще ліниво завантажуються, якщо розміри не включені, але є кілька крайніх випадків, про які ви повинні знати. Без width і height з зазначенням розміри зображення спочатку становлять 0×0 пікселів. Якщо у вас є галерея таких зображень, браузер може зробити висновок, що всі вони поміщаються всередині вікна перегляду на початку, оскільки кожне не займає практично ніякого місця і жодне зображення не виштовхується за межі екрану. В цьому випадку браузер визначає, що всі вони видно користувачеві і вирішує завантажити все.

Крім того, зазначення розмірів зображення зменшує ймовірність зсуву макета. Якщо ви не можете включити розміри для своїх зображень, їх подальше завантаження може бути компромісом між економією мережевих ресурсів і потенційним ризиком зміни макета.

Хоча ліниве завантаження в Chromium реалізовано таким чином, що зображення, ймовірно, будуть завантажені після їх видимості, все ще існує невелика ймовірність того, що вони ще не завантажені. У цьому випадку відсутність width та height атрибути на таких зображеннях збільшують їх вплив на кумулятивний зсув макета.

Зображення, визначені за допомогою елемента<picture>, також можуть бути ліниво завантажені:Уникайте лінивого завантаження зображень, які знаходяться в першому видимому вікні перегляду #

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

Although a browser will decide which image to load from any of the <source> elements, the loading attribute only needs to be included to the fallback <img> element.

Слід уникати налаштування loading=lazy для будь-яких зображень,

які знаходяться в першому видимому вікні перегляду. Це особливо актуально для зображень LCP. Дивіться статтю Ефекти продуктивності занадто лінивого завантаження для отримання додаткової інформації.

Рекомендується додавати loading=lazy лише до зображень, розташованих нижче згину, якщо це можливо. Зображення, які легко завантажуються, можна отримати відразу, тоді як зображення, які завантажуються ліниво браузером, наразі потрібно почекати, поки він дізнається, де зображення розташоване на сторінці, що покладається на IntersectionObserver доступність.

Як правило, будь-які зображення у вікні перегляду слід завантажувати з нетерпінням за замовчуванням браузера. Не потрібно вказуватиloading=eager, щоб це стосувалося зображень у вікні перегляду.

<!-- visible in the viewport -->

<img src="product-1.jpg" alt="..." width="200" height="200">

<img src="product-2.jpg" alt="..." width="200" height="200">

<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->


<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">

<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">

<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

Graceful degradation #

Браузери, які ще не підтримують loading атрибут, будуть ігнорувати його присутність. Хоча ці браузери, звичайно, не отримають переваг від ледачого завантаження, в тому числі атрибут не має на них негативного впливу.

FAQ #

Чи планується автоматично ліниво завантажувати зображення в Chrome? #

Раніше Chromium автоматично ліниво завантажував будь-які зображення, які добре підходили для відкладення, якщо в Chrome для Android увімкнено спрощений режим, а loading атрибут або не надавався, або встановлювався як loading="auto". Однак спрощений режим застарів (як і нестандартнийloading="auto"), і наразі немає планів забезпечувати автоматичне ліниве завантаження зображень у Chrome.

Чи можна змінити наближення зображення до спрацьовування завантаження? #

Ці значення жорстко закодовані і не можуть бути змінені через API. Однак вони можуть змінитися в майбутньому, оскільки браузери експериментуватимуть з різними пороговими відстанями та змінними.

Чи можуть фонові зображення CSS скористатися перевагами loading атрибута? #

Ні, наразі його можна використовувати лише з <img> тегами.

Чи є недолік у лінивому завантаженні зображень, які знаходяться в вікні перегляду пристрою? #

Безпечніше уникати розміщення loading=lazy зображень зверху, оскільки Chrome не loading=lazy завантажуватиме зображення в сканер попереднього завантаження. Щоб отримати докладнішу інформацію, див. розділ Уникайте перевантаження зображень, які знаходяться в першому видимому вікні перегляду .

loading Як атрибут працює із зображеннями, які знаходяться у вікні перегляду, але не відразу видно (наприклад: за каруселлю або приховані CSS для певних розмірів екрана)? #

Використання loading="lazy" може запобігти їх завантаженню, коли їх не видно, але в межах розрахункової відстані. Наприклад, Chrome, Safari і Firefox не завантажують зображення за допомогою display: none; стилю - ні на елемент зображення, ні на батьківський елемент. Однак інші методи приховування зображень, такі як використання opacity:0 стилю, все одно призведуть до завантаження зображень. Завжди ретельно перевіряйте свою реалізацію, щоб переконатися, що вона діє за призначенням.

Що робити, якщо я вже використовую сторонню бібліотеку або скрипт для лінивого завантаження зображень? #

Завдяки повній підтримці нативного лінивого завантаження, тепер доступного в сучасних браузерах, ви можете переглянути, якщо вам все ще потрібна стороння бібліотека або скрипт для лінивого завантаження зображень.

Однією з причин продовжувати використовувати сторонню бібліотеку разом loading="lazy" із цим є надання поліфілла для браузерів, які не підтримують атрибут, або мати більше контролю над тим, коли спрацьовує відкладене завантаження.

Як працювати з браузерами, які не підтримують відкладене завантаження? #

Створіть поліфілл або використовуйте сторонню бібліотеку, щоб ліниво завантажувати зображення на свій сайт. За loading допомогою властивості можна визначити, чи підтримується ця функція у браузері:

if ('loading' in HTMLImageElement.prototype) {

  // supported in browser

} else {

  // fetch polyfill/third-party library

}

For example, lazysizes is a popular JavaScript lazy loading library. You can detect support for the loading attribute to load lazysizes as a fallback library only when loading isn't supported. This works as follows:

• Замініть <img src> на, <img data-src> щоб уникнути тривалого завантаження в непідтримуваних браузерах. loading Якщо атрибут підтримується, поміняйте місцями data-src символ src.
• Якщо loading не підтримується, завантажте резервний варіант (lazysizes) та ініціюйте його. Відповідно до lazysizes docs, ви використовуєте lazyload клас як спосіб вказати lazysizes, які зображення ліниво завантажити.

<!-- Let's load this in-viewport image normally -->

<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->

<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">

<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">

<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>

if ('loading' in HTMLImageElement.prototype) {

const images = document.querySelectorAll('img[loading="lazy"]');

images.forEach(img => {

img.src = img.dataset.src;

});

} else {

// Dynamically import the LazySizes library

const script = document.createElement('script');

script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';

document.body.appendChild(script);

}

</script>

Here's a demo of this pattern. Try it out in an older browser to see the fallback in action.

Чи підтримується в Chrome також відкладене завантаження для iframe? #