Как отобразить изображение определенного размера с помощью SRCSET независимо от того, какое отношение пикселя устройства?

Question

Я использую srcset, чтобы отобразить анимированный GIF для пользователей на больших устройствах, но для отображения на старом графическом изображении для пользователей на малых и средних устройствах необходимо отобразить статический JPG.

Следующий код отлично работает при изменении размера окна браузера на экране 1x. Проблема, с которой я сталкиваюсь, - это просмотр страницы на iPad в портретном режиме (768 пикселей), анимированный GIF. Я получаю, что браузер пытается отображать изображение более высокого качества, так как он имеет разрешение 2x, но в моем случае это должно быть совершенно другое изображение.

Как это можно изменить, чтобы показывать только GIF, если экран пользователя шире 940px?

<img src="static.jpg" sizes="(max-width: 940px)" srcset="static.jpg 940w, animated.gif 1400w" alt=""> 

Answer 1

Это не работа для srcset на всех - srcset обрабатывает несколько источников, которые все точно идентичны, за исключением разрешения. Если вы предоставляете разные изображения, используйте <picture> и несколько <source> элементов.

Например, чтобы ответить на ваш вопрос точно, как спросил:

<picture> 
    <source media="(min-width: 940px)" srcset="animated.gif"> 
    <img src="static.jpg"> 
</picture> 

Но мета-вопрос остается: почему вы только отправку GIF для устройств с большими экранами? Представляете ли вы, что устройства с большим экраном имеют большую пропускную способность или что-то еще?