На mdn web docs представлена замечательная статья по адаптивным изображениям, где были рассмотрены два средства работы с адаптивными изображениями - аттрибуты srcset и sizes а также тэги picture и source:
<img srcset="elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
Вот только чего я не понял, так это в каком случае какое средство использовать. В первом случае (с img) у нас разница только в разрешениях, при этом изображено одно и то же (во всяком случае, мы это знаем, а браузрер, выполняющий рендеринг, это проверять не собирается). А что если мы сделаем разные изображения? Скажем, для широких экранов - альбомную ориентацию, а для узких - портретную. Можно сказать: "srcset и sizes для этого не предназначены". Хорошо, а что технически пойдёт не так, если изображения отличаются не только расширением?
ТОже самое и с picture/source. В каждом тэге source у нас разные изоображения, но что технически пойдёт не так, как эти изображения будут отличаться только разрешением?
В статье было сказано:
Примечание: вам следует использовать атрибут
media
только при художественном оформлении; когда вы используетеmedia
, не применяйте медиа-условия с атрибутомsizes
.
Это примечание лишь порождает новые вопросы:
- Почему следует использовать атрибут
media
только при художественном оформлении? Причина-то какая? - Сказано использовать атрибут
media
, но не тэгsource
. То есть как бы если у нас не случай с художественным оформлением, то тэгsource
использовать можно, только без аттрибутаmedia
?