Способы работы с адаптивными изображениями
Элад Шехтер в статье "Complete Guide to Responsive Images!" рассказал про все подходы, которые можно использовать при создании адаптивных изображений.
В статье разбирается использование тега <picture> и тега <img> c атрибутами srcset и sizes для разных изображений в зависимости от плотности пикселей и ширины вьюпорта. Разбирается использование CSS-свойства image-set и CSS-функции image(). С помощью функции image() (её поддержки пока нет в браузерах) можно будет обрезать изображение и использовать в background-image изображение того типа, которое может быть отображено браузером.
Мне статья показалась чересчур справочной — не хватило живых практических примеров. Тем не менее она может послужить отличной стартовой точкой для изучения темы адаптивных изображений.
На Девшахте есть хороший перевод статьи.
https://medium.com/@elad/a-complete-guide-for-responsive-images-b13db359c6c7