0

Каким образом можно сделать так, чтобы по дефолту у меня использовалась картинка в формате webp, а для safari подставлялась jpeg2000, хотел сделать через тег picture и srcset, но не знаю, как сделать так, чтобы код понимал, какой браузер используется. Есть способ, чтобы html понимал в каком браузере запускается и как указать это?

<picture>
  <source srcset="img/about-img.webp">
  <img src="img/about-img.jpg" alt="photo">
</picture>

1 ответ 1

1

Браузер рассмотрит каждый <source> и выберет совместимое и наиболее подходящее изображение. Если браузер не поддерживает MIME-тип, указанный в атрибуте type, то <source> пропускается. Подробнее...

<picture>
  <source srcset="img/about-img.webp" type="image/webp">
  <source srcset="img/about-img.jpg" type="image/jp2">
  <img src="img/about-img.jpg" alt="photo">
</picture>
5
  • Сделал все так, все равно подставляет img, пропуская source, в яндексе и в хроме одинаково
    – Илья
    4 сен 2021 в 22:23
  • А нет, все работает, пришлось галп перезапустить)
    – Илья
    4 сен 2021 в 22:26
  • А каким образом можно реализовать такой же функционал, но для бэкграундов в css?
    – Илья
    4 сен 2021 в 22:58
  • @Илья Нативно никак, сперва можно протестировать возможности браузера и добавить css-классы — см., например, Modernizr, или на стороне сервера определять по user agent, в каком формате отдавать картинку 5 сен 2021 в 0:10
  • @Илья в css есть функция image-set для background-image, но поддержка форматов изображений пока работает только в firefox. Синтаксис аналогичен picture srcset. 5 сен 2021 в 6:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.