picutre srcset с резервным вариантом webp и разными размерами экрана

Когда я хочу использовать изображения 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 разных размеров.

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

Тестировал вот так:

<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>

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


image html css webp
person Ashkan Mobayen Khiabani    schedule 09.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

person Mileta Dulovic    schedule 09.11.2019
comment
Я хочу иметь возможность определять разные изображения webp с разными размерами, а также разные изображения jpg с разными размерами. - person Ashkan Mobayen Khiabani; 09.11.2019
comment
Я думаю, что вы найдете свой ответ здесь Это подробное объяснение о том, как это работает. Если у вас есть что-то неясное, возвращайтесь сюда, чтобы мы могли это решить :) - person Mileta Dulovic; 09.11.2019