webp vs jpeg

часто видел  avif на очень известных американских сми и бизнес сайтах, просто когда нужно было скопировать картинку известной личности)

Webp можно использовать, но не все сервисы его понимают, поэтому если предполагается, что люди будут картинки скачивать и где-то ими делиться, то однозначно jpg.

Че тут думать:

<source srcset="img.avif" type="image/avif">
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" ...>

Ага... и хранить по 3 раза одну и ту же картинку, какая тогда эта экономия то и зачем всё это.

В идеале еще несколько вариантов файлов изображений добавить, в зависимости от разрешения и темы экрана. 

Вот так?

<picture>
  <source 
    type="image/avif"
    srcset="
      img-320w.avif 320w,
      img-480w.avif 480w,
      img-640w.avif 640w,
      img-768w.avif 768w,
      img-1024w.avif 1024w,
      img-1280w.avif 1280w,
      img-1536w.avif 1536w,
      img-1920w.avif 1920w,
      img-2560w.avif 2560w,
      img-3840w.avif 3840w"
    sizes="(max-width: 320px) 280px,
           (max-width: 480px) 440px,
           (max-width: 768px) 720px,
           (max-width: 1024px) 960px,
           (max-width: 1280px) 1200px,
           (max-width: 1920px) 1800px,
           1920px"
  >

  <source 
    type="image/webp"
    srcset="
      img-320w.webp 320w,
      img-480w.webp 480w,
      img-640w.webp 640w,
      img-768w.webp 768w,
      img-1024w.webp 1024w,
      img-1280w.webp 1280w,
      img-1536w.webp 1536w,
      img-1920w.webp 1920w,
      img-2560w.webp 2560w,
      img-3840w.webp 3840w"
    sizes="(max-width: 320px) 280px,
           (max-width: 480px) 440px,
           (max-width: 768px) 720px,
           (max-width: 1024px) 960px,
           (max-width: 1280px) 1200px,
           (max-width: 1920px) 1800px,
           1920px"
  >

  <img 
    src="img-1280w.jpg"
    srcset="
      img-320w.jpg 320w,
      img-480w.jpg 480w,
      img-640w.jpg 640w,
      img-768w.jpg 768w,
      img-1024w.jpg 1024w,
      img-1280w.jpg 1280w,
      img-1536w.jpg 1536w,
      img-1920w.jpg 1920w"
    sizes="(max-width: 320px) 280px,
           (max-width: 480px) 440px,
           (max-width: 768px) 720px,
           (max-width: 1024px) 960px,
           (max-width: 1280px) 1200px,
           (max-width: 1920px) 1800px,
           1920px"
    alt="Описание изображения"
    loading="lazy"
  >
</picture>

И че? какие плюшки за такой геморой можно получить? )

Респект на форуме Серчинджайнс :)

Внимание. У него его дефицит.

Есть один сайт, при загрузке изображений куда бы то ни было на сайте - все оно автоматически конвертируются в webp, все нормально работает, проблем не замечено.