Некоторые способы автоматической адаптации изображений под размеры документа:

• Использование атрибутов srcset и sizes. 1 Атрибут srcset позволяет указать несколько размеров изображения в одном значении. 1 Атрибут sizes работает вместе с srcset, чтобы сообщить браузеру, какое изображение выбрать. 1
• Метод гибкого изображения. 2 Позволяет вставить изображение в адаптивный макет и давать возможность растягивать или сжимать его по мере необходимости. 2
• Метод художественного направления. 2 Помогает решить проблему с художественным направлением при работе с экранами разных размеров. 2 Можно изменить содержимое изображения, обрезать его или использовать другое изображение в зависимости от размера экрана пользователя. 2
• Метод переключения типов. 2 Используется для переключения между типами изображений, что позволяет предоставлять пользователю лучший контент в зависимости от совместимости устройства и браузера. 2

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