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

У меня есть JavaScript-код для отложенной загрузки изображений. Если я оберну тег `<img>` в тег `<picture>` и добавлю теги `<source>` для изображений в форматах webp и avif, нужно ли также реализовывать отложенную загрузку для этих тегов `<source>`? Или же, если я применяю отложенную загрузку для изображений, могу ли я обойтись без тега `<picture>` и форматов webp и avif? <br/> <br/> <pre><code class="html">&lt;picture&gt; 
   &lt;source srcset="human-back.avif" type="image/avif"&gt; 
   &lt;img data-src="human-back.avif" src="pixel.png" alt=""&gt; 
&lt;/picture&gt;</code></pre> <br/> <br/> <pre><code class="javascript">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 =&gt; { 
   observer.observe(img); 
});</code></pre>
  • 5 марта 2025 г. 12:44
Ответы на вопрос 1 
Отложенная загрузка изображений (lazy loading) — это отличная техника для повышения производительности веб-страниц, особенно если на странице много изображений. Давайте разберём ваши вопросы.

1. **Использование тегов `<picture>` с `<source>`**: Если вы используете тег `<picture>` для поддержки различных форматов изображений, вы можете реализовать отложенную загрузку как для тега `<img>`, так и для тегов `<source>`. Однако основной принцип заключается в том, что браузер будет загружать изображения, указанные в тегах `<source>`, в зависимости от поддержки форматов, и в этом случае вам нужно правильно организовать отложенную загрузку, чтобы избежать ненужной загрузки.

2. **Необходимость использования форматов webp и avif**: Эти форматы изображений предлагают хорошее сжатие и могут существенно уменьшить размер изображений по сравнению с традиционными форматами (например, JPEG или PNG). Если ваша аудитория использует современные браузеры, поддерживающие эти форматы, их использование может улучшить производительность.

3. **Отложенная загрузка для тегов `<source>`**: Чтобы добавить отложенную загрузку для тегов `<source>`, вам придётся использовать немного другой подход, поскольку браузеры могут предзагружать законченные изображения перед тем, как они будут видны. Вы можете динамически добавлять атрибут `srcset` для тегов `<source>` в момент, когда они становятся видимыми (например, менять атрибут на значение из data-атрибута).

Пример реализации отложенной загрузки для тегов `<source>` и `<img>` может выглядеть следующим образом:

```html
<picture>
    <source data-srcset="human-back.avif" type="image/avif">
    <img data-src="human-back.jpg" src="pixel.png" alt="">
</picture>
```

```javascript
const sources = document.querySelectorAll('source[data-srcset]');
const images = document.querySelectorAll('img[data-src]');

function loadImages(entries, observer) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // Отложенная загрузка для <source>
            const source = entry.target.querySelector('source[data-srcset]');
            if (source) {
                source.srcset = source.dataset.srcset;
            }
            // Отложенная загрузка для <img>
            const img = entry.target.querySelector('img[data-src]');
            if (img) {
                img.src = img.dataset.src;
            }
            observer.unobserve(entry.target);
        }
    });
}

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

sources.forEach(source => {
    observer.observe(source.parentNode);  // Оборачиваем в родительский элемент <picture>
});
images.forEach(img => {
    observer.observe(img.parentNode);  // То же самое
});
```

Таким образом, при отложенной загрузке вы можете использовать как формат `<picture>`, так и форматы webp и avif, но вам нужно будет убедиться, что загружаете их правильно и динамически. Если ваша аудитория не нуждается в более новых форматах или у вас есть ограничения на поддержку браузеров, можно обойтись и без них.
Похожие вопросы
    Показать ещё