Как совместить в picture media и webp?

Question

[wakenbyWork]

Написал тестовый пример с media в picture:

<picture>
      <source srcset="/assets/images/preview-tablet.jpg, /assets/images/preview-tablet-retina.jpg 2x" media="(max-width: 768px)">
      <source srcset="/assets/images/preview-desktop.jpg, /assets/images/preview-desktop-retina.jpg 2x" media="(min-width: 769px)">
      <img alt="preview">
    </picture>

И все работает как надо. А как добавить сюда еще проверку на поддержку webp? Грузить по двум условиям: По поддержки webp и по media?

Comments

[Dima Polos]

Ставишь в сорсы вебп, указываешь тайп обязательно, а браузер сам догонит, что скачать

Answer 1

[oink]

<picture>
      <source type="image/webp" srcset="/assets/images/preview-tablet.webp, /assets/images/preview-tablet-retina.webp 2x" media="(max-width: 768px)">
      <source type="image/webp" srcset="/assets/images/preview-desktop.webp, /assets/images/preview-desktop-retina.webp 2x" media="(min-width: 769px)">
      <source type="image/webp" srcset="xxx.webp 1x, xxx.webp 2x">
      <source srcset="/assets/images/preview-tablet.jpg, /assets/images/preview-tablet-retina.jpg 2x" media="(max-width: 768px)">
      <source srcset="/assets/images/preview-desktop.jpg, /assets/images/preview-desktop-retina.jpg 2x" media="(min-width: 769px)">
      <img alt="preview">
</picture>

То же самое, только про webp написать в начале и не забыть добавить атрибут type="image/webp". Браузеры, которые ничего не поймут, пойдут дальше и увидят jpg.

Comments

[wakenbyWork]

Спасибо!