HTML-изображение или srcset для чувствительных изображений

Выполнение обращений с изображениями всегда было сложным аспектом гибкого веб-дизайна для многих. Я просмотрел несколько статей о том же и наткнулся на "srcset" и "picture" в качестве решения для этого.

Пример SRCSET

  <img src="flower_500px.jpg"
     srcset="flower_750px.jpg 1.5x, flower_1000px.jpg 2x"
     width="500px" alt="flower">

Пример PICTURE

  <picture>
      <source media="(min-width: 45em)" srcset="flower_1000px.jpg">
      <source media="(min-width: 32em)" srcset="flower_750px.jpg">
      <img src="flower_500px.jpg" alt="flower">
  </picture>

Я пытаюсь решить, какой из этих двух методов выбрать, чтобы сделать изображения чувствительными. Каковы характеристики, которые я должен учитывать при выборе?

Ответ 1

Оба picture и srcset не на 100% совместимы со всеми браузерами, но оба они грамотно деградируют. Если браузер не понимает элемент <picture>, он будет изящно возвращаться к элементу <img> внутри него. Если браузер не понимает <img srcset...>, он вернется к использованию атрибута src изображения.

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

Поскольку у них обоих есть меры для обратной совместимости, я бы не стал слишком беспокоиться о том, какой из них вы используете - оба изящно отступят в старых браузерах. Если вы проектируете только плотность пикселей, я бы рекомендовал srcset, потому что он был более легким.