@wakenbyWork

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

Написал тестовый пример с 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?
  • Вопрос задан
  • 808 просмотров
Решения вопроса 1
oink
@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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы