Какие способы сделать изображение на сайте адаптивным под разные размеры экранов существуют?

Несколько способов сделать изображение на сайте адаптивным под разные размеры экранов:

• Метод на основе пикселей устройства. 1 Позволяет использовать несколько версий одного и того же изображения с разным разрешением и выбирать наиболее подходящее для рендеринга в зависимости от разрешения экрана пользователя. 1
• Метод гибкого изображения. 12 Изображение вставляется в адаптивный макет, и его можно растягивать или сжимать по мере необходимости. 1 Для этого используют, например, свойство max-width: 100% в CSS. 24
• Метод художественного направления. 1 Содержимое изображения меняется, оно обрезается или используется другое изображение в зависимости от размера экрана пользователя. 1 Для этого используют тег picture, который позволяет предоставлять изображения в нескольких соотношениях или точках фокусировки при просмотре на разных устройствах. 1
• Метод переключения типов. 1 Позволяет переключать между типами изображений, что даёт возможность предоставлять пользователю лучший контент в зависимости от совместимости устройства и браузера. 1

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