Некоторые способы адаптивной вёрстки изображений:

• Метод гибкого изображения. 1 Позволяет вставить изображение в адаптивный макет и давать возможность растягивать или сжимать его по мере необходимости. 1 Для этого нужно изменить ширину изображения с помощью CSS, используя относительные единицы (проценты), а не абсолютные (пиксели). 3
• Метод художественного направления (Art Direction). 1 Позволяет отображать разные изображения в зависимости от размеров экрана устройства. 1 Для этого нужно использовать тег picture вместо тега img, он даёт возможность предоставлять изображения в нескольких соотношениях или точках фокусировки при просмотре на разных устройствах. 1
• Метод переключения типов. 1 Позволяет переключать между типами изображений, что даёт возможность предоставлять пользователю лучший контент в зависимости от совместимости устройства и браузера. 1 Для этого нужно использовать атрибут srcset, который можно комбинировать с тегом HTML5 . 4

Также для генерации адаптивных изображений можно использовать специальные инструменты, например, Responsive Image Breakpoints Generator, lazySizes, WURFL.js. 2