Лучшая практика 2021 года для адаптивных изображений? Предложение кода с AVIF, HDPI, lazyload [закрыто]

Question

Я ищу лучшее практическое решение для внедрения адаптивных изображений в 2021 году.

Мое предложение

• использует AVIF и как резервный WEBP и JPG (для старого Safari)
• имеет родную ленивую загрузку
• определяет ширину / высоту (для SEO, чтобы избежать кумулятивного сдвига макета )
• использует только кавычкитам, где это необходимо (для меньшего размера страницы)

Код

      <picture class=main-img-wrapper>
    <source srcset=/img.avif sizes="(max-width: 600px) 100vw, 600px" srcset="img-500px.avif 300w, img-600px.avif 600w, img-1200px.avif 1200w" type=image/avif>
    <source srcset=/img.webp sizes="(max-width: 600px) 100vw, 600px" srcset="img-500px.webp 300w, img-600px.webp 600w, img-1200px.webp 1200w" type=image/webp>
    <img class=main-img loading=lazy src=/img-600px.jpg loading=lazy alt=Image width=600 height=400>
</picture>

Заметки

• Пример макета в 1 столбец
• Моя целевая группа использует современный браузер, поэтому нет необходимости поддерживать IE.
• CSS: img {height: auto; max-width: 100%;}
• Максимальный размер изображения должен составлять 600 пикселей, даже на больших экранах.
• Настольные компьютеры, поддерживающие изображения 2x HDPI, должны автоматически принимать изображение img-1200px.webp.
• Мобильные устройства (ширина 300 пикселей) принимают изображение img-500px.avif. Те, кто поддерживает 2x HDPI, должны взять изображение img-600px.avif, те, у кого экраны 3x HDPI - img-1200px.avif

Есть комментарии по этому поводу?