0

Don't know how to make browser use the right image at certain breakpoints.

GitHub repo

<!-- <picture>
        <source sizes="(max-width: 640px) 100vw, 640px" srcset="./images/profile1000.avif 1280w, ./images/profile.avif 640w, ./images/profile120.avif 320w" type="image/avif" />

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

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

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

      <picture>
        <source media="(min-width: 2560px)" srcset="./images/profile1000.png, ./images/profile1000.webp, ./images/profile1000.avif" type="image/avif" />
        <source media="(min-width: 1080px)" srcset="./images/profile.png, ./images/profile.webp, ./images/profile.avif" type="image/avif" />
        <source media="(min-width: 1024px)" srcset="./images/profile120.png, ./images/profile120.webp, ./images/profile120.avif" type="image/avif" />
        <img src="./images/profile1000.webp" alt="profile image" decoding="async" loading="lazy" class="bg-clip-padding bg-opacity-50 shadow rounded-full bg-white dark:bg-gray-900 backdrop-blur-2xl" />
      </picture>
lambsbaaacode
  • 70
  • 7

1 Answers1

0

You should use separate source declarations for each format and specify the type for each. Please see the official guide at: https://avif.io/blog/tutorials/use-avif-in-html/

Bobby3003
  • 1