Надо ли делать отложенную загрузку для изображений формата webp и avif в теге picture?

Рейтинг: 1Ответов: 1Опубликовано: 04.03.2025

У меня есть js код, который отвечает за отложенную загрузку изображений. Но если img еще обернуть тегом picture и добавить теги source для изображений с форматом webp и avif, то надо ли еще для тегов source делать отложенную загрузку? Или если использовать отложенную загрузку изображений, можно вообще обойтись без тега picture и форматов webp, avif?

<picture>
    <source srcset="human-back.avif" type="image/avif">
    <img class="lazy first" data-src="human-back.avif" src="pixel.png" alt="">
</picture>

const Images = document.querySelectorAll('img[data-src]');

function loadImages(entries) {
    if (entries[0].isIntersecting) {
        entries[0].target.src = entries[0].target.dataset.src
        observer.unobserve(entries[0].target) 
    }
}

const options = {
    threshold: 0,
    rootMargin: '50px'
}
const observer = new IntersectionObserver(loadImages, options)

Images.forEach(img => {
    observer.observe(img)
})
javascript img lazyloading intersection-observer
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Не сильно понимаю ваш вопрос. Отвечу так как я его понял:

  • У вас были проблемы со скоростью загрузки страниц содержащих изображения.
  • Вы начали использовать одну из вариаций lazyloading на JS.
  • Сейчас стали использовать тег picture, и вас интересует нужна ли параллельная реализация lazyloading на JS.

Использовать вместе JS lazyloading и picture, не имеет особого смысла. Это лишнее усложнение. Тем более что у тега img есть атрибут loading.

Сейчас разумнее отказаться от lazyloading на JS, в пользу HTML5.

Это уже обсуждалось в англоязычной ветке. И как там отвечал Dai лучше использовать конструкцию:

<picture>
    <source media="(min-width: 45em)" srcset="large.jpg" />
    <source media="(min-width: 18em)" srcset="med.jpg" />
    <source src="small.jpg" />
    <img src="small.jpg" alt="Photo of a turboencabulator" loading="lazy" />
</picture>

Очень советую прочесть ответы в англоязычной ветке. Там есть все нужные примеры и ссылки.

Учитывая выше изложенное, однозначного ответа на ваш вопрос - НЕТ.

По мнению многих (в том числе и моему мнению) - Используйте тег picture и атрибут loading для тега img.