Как использовать формат WebP в других браузерах?

Question

Я использую ревизии Google для ускорения работы моего приложения. Итак, аудит Google говорит: "пришло время использовать изображения.webp!". Хорошо, давайте сделаем это. Но... Mozilla Firefox не поддерживает его. Итак, я включаю WebPJS, и это помогло. Но...

У меня есть DOM-элемент:

<img src="image.webp" srcset="image-480.webp 480w, image-768.webp 768w, image-1024.webp 1024w" alt="alt" titile="title"/>

WebPJS заменяет атрибут src, но не трогает атрибут srcset. Как решить эту проблему?

Answer 1

Элемент изображения - это то, что вам нужно:

<picture>
  <source srcset='image-480.webp' type="image/webp" media="(max-width: 480px)">
  <source srcset='image-768.webp' type="image/webp" media="(max-width: 768px)">
  <source srcset='image-1024.webp' type="image/webp" media="(min-width: 769px)">
  <source srcset='image-480.jpg' type="image/jpg" media="(max-width: 480px)">
  <source srcset='image-768.jpg' type="image/jpg" media="(max-width: 768px)">
  <source srcset='image-1024.jpg' type="image/jpg" media="(min-width: 769px)">
  <img src="image-1024.jpg"  />
</picture>

Выше код должен:

• загрузить изображение webp для браузера, где поддерживается атрибут изображения и изображение webp
• загрузить jpg для браузера, где поддерживается атрибут изображения, но не webp
• загрузить image-1024.jpg для браузера, где атрибут картинки не поддерживается

Могу ли я использовать: изображение webp

Answer 2

Может быть с onError как запасной вариант? Что-то вроде

<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">

Вы видели этот вид веб-порции? Возможно использование <picture> будет делать работу?