Адаптивные изображения для тегов изображений

Question

Как сделать изображения отзывчивыми, используя пример с avif.io , это так запутанно.

Также по какой-то причине мои изображения .avif не отображаются в Chrome, хотя он поддерживается.

Репозиторий GitHub

      <picture>
        <source sizes="(max-width: 640px) 640px, 1280px" srcset="./images/profile-120.avif 120w, ./images/profile.avif 1280w" type="image/avif" />

        <source sizes="(max-width: 640px) 100vw, 640px" srcset="./images/profile-120.webp 320w, ./images/profile.webp 640w" type="image/webp" />

        <source sizes="(max-width: 640px) 100vw, 640px" srcset="./images/profile-120.png 320w, ./images/profile.png 640w" type="image/png" />

        <img src="./images/profile.png" alt="profile image" decoding="async" loading="lazy" width="421" height="237" class="bg-clip-padding bg-opacity-50 shadow rounded-full bg-white dark:bg-gray-900 backdrop-blur-2xl" />
      </picture>

Answer 1

Вы должны использовать отдельные исходные объявления для каждого формата и указывать тип для каждого. См. Официальное руководство по адресу: https://avif.io/blog/tutorials/use-avif-in-html/