Если визуализированное изображение имеет соотношение сторон , которое значительно отличается от соотношения сторон в исходном файле ( естественное соотношение сторон), визуализированное изображение может выглядеть искаженным, что может создать неприятные ощущения для пользователя.
Почему аудит соотношения сторон изображения Lighthouse терпит неудачу
Lighthouse помечает любое изображение, размер рендеринга которого отличается от ожидаемого размера более чем на несколько пикселей при рендеринге с его естественным соотношением:
Существует две распространенные причины неправильного соотношения сторон изображения:
- Для изображения заданы явные значения ширины и высоты, которые отличаются от размеров исходного изображения.
- Для изображения устанавливаются ширина и высота в процентах от контейнера переменного размера.
Убедитесь, что изображения отображаются с правильным соотношением сторон.
Используйте CDN изображения
CDN изображений может упростить автоматизацию процесса создания версий изображений разного размера. Ознакомьтесь с обзором «Использование CDN изображений для оптимизации изображений» и «Как установить CDN изображений Thumbor» для практической работы над кодом.
Проверьте CSS, который влияет на соотношение сторон изображения.
Если у вас возникли проблемы с поиском CSS, вызывающего неправильное соотношение сторон, Chrome DevTools может показать вам объявления CSS, которые влияют на данное изображение. Дополнительную информацию см. в разделе «Просмотр только CSS, который фактически применен к странице элемента» .
Проверьте атрибуты width и height изображения в HTML.
Если это возможно, рекомендуется указывать атрибуты width и height каждого изображения в HTML, чтобы браузер мог выделить место для изображения. Этот подход помогает гарантировать, что содержимое под изображением не сместится после загрузки изображения.
Однако указание размеров изображения в HTML может быть затруднено, если вы работаете с адаптивными изображениями, поскольку невозможно узнать ширину и высоту, пока не известны размеры области просмотра. Рассмотрите возможность использования библиотеки CSS Aspect Ratio или полей соотношения сторон , чтобы сохранить пропорции для адаптивных изображений.
Наконец, ознакомьтесь с публикацией «Подача изображений с правильными размерами» , чтобы узнать, как предоставлять изображения подходящего размера для каждого устройства пользователя.