Picutre Srcset с отступлением webp и различных размеров экрана - PullRequest
Новая
       44

Picutre Srcset с отступлением webp и различных размеров экрана

0 голосов
/ 09 ноября 2019

Когда я хочу использовать изображения webp, когда браузер поддерживает их, и в противном случае использовать jpg, я использую вот так: 

<picture>
    <source srcset="image.webp" type="image/webp" />
    <img src="image.jpg" alt="Something">
</picture>

также, чтобы выбрать подходящий размер изображения для размера экрана: 

<picture>
    <source media="(max-width: 799px)" srcset="small.jpg">
    <source media="(min-width: 800px)" srcset="big.jpg">
    <img src="big.jpg" alt="something">
</picture>

Поскольку у меня есть все изображения со всеми размерами и обоими форматами, я хочу использовать обе вышеупомянутые функции одновременно, поэтому у меня есть и веб-страницы малых и больших размеров, и обе jpgs больших и малых размеров. ,Поэтому, если браузер поддерживает webp, используйте только изображения webp разных размеров (в зависимости от размера экрана), а если нет, то используйте файлы jpg разных размеров.

Интересно, возможно ли это?

IПротестировал это так: 

<picture>
    <source media="(max-width: 799px)" srcset="small.webp">
    <source media="(min-width: 800px)" srcset="big.webp">
    <source media="(max-width: 799px)" srcset="small.jpg">
    <source media="(min-width: 800px)" srcset="big.jpg">
    <img src="big.jpg" alt="something">
</picture>

, но выбирает только первый, соответствующий размеру экрана

1 Ответ

2 голосов
/ 09 ноября 2019

Конечно, это возможно. И, честно говоря, довольно просто 

<img src="images/keyboard.webp" onerror="this.src='images/keyboard.jpg';"  alt="Image not found"/>

Этот код в значительной степени объясняет себя.

Он загружает webp изображение. onerror обрабатывает, если изображение не загружено. устанавливает src на jpg

...