С каждым такое случалось: забываешь уменьшить размер изображения перед добавлением его на страницу. Изображение выглядит нормально, но тратит трафик пользователей и ухудшает производительность страницы.
Выявление изображений неправильного размера
Lighthouse позволяет легко выявлять изображения неправильного размера. Запустите аудит производительности ( Lighthouse > Параметры > Производительность ) и посмотрите результаты аудита «Правильный размер изображений» . В аудите будут перечислены все изображения, которые необходимо изменить в размере.
Определите правильный размер изображения.
Изменение размера изображений может быть обманчиво сложным процессом. Поэтому мы предложили два подхода: «хороший» и «лучший». Оба улучшат производительность, но «лучший» подход может потребовать немного больше времени на понимание и внедрение. Однако он также принесет вам более значительное повышение производительности. Лучший выбор для вас — тот, который вам будет удобно реализовать.
Краткое замечание о модулях CSS
Для задания размера HTML-элементов, включая изображения, используются два типа единиц измерения CSS:
- Абсолютные единицы измерения: Элементы, оформленные с использованием абсолютных единиц измерения, всегда будут отображаться в одном и том же размере независимо от устройства. Примеры допустимых абсолютных единиц измерения CSS: px, cm, mm, in.
- Относительные единицы измерения: Элементы, оформленные с использованием относительных единиц измерения, будут отображаться в разных размерах в зависимости от указанной относительной длины. Примеры допустимых относительных единиц измерения CSS: %, vw (1vw = 1% от ширины области просмотра), em (1,5 em = 1,5 раза больше размера шрифта).
«Правильный» подход
Для изображений, размер которых зависит от…
- Относительные единицы измерения : Измените размер изображения до такого, чтобы оно отображалось на всех устройствах.
Возможно, вам будет полезно проверить данные аналитики (например, Google Analytics), чтобы узнать, какие размеры экранов чаще всего используются вашими пользователями. В качестве альтернативы, screensiz.es предоставляет информацию о размерах экранов многих распространенных устройств. - Абсолютные единицы : Измените размер изображения в соответствии с размером, на котором оно отображается.
Панель «Элементы» в инструментах разработчика позволяет определить размер отображаемого изображения.
«Лучший» подход
Для изображений с абсолютными и относительными размерами используйте атрибуты srcset и sizes , чтобы отображать разные изображения при разной плотности экрана. Ознакомьтесь с руководством по адаптивным изображениям .
«Плотность пикселей» означает, что разные дисплеи имеют разную плотность пикселей. При прочих равных условиях дисплей с высокой плотностью пикселей будет выглядеть чётче, чем дисплей с низкой плотностью пикселей.
В результате, для того чтобы пользователи получали максимально четкие изображения независимо от плотности пикселей их устройства, необходимо несколько версий изображений.
Технологии адаптивного отображения изображений позволяют это сделать, предоставляя возможность указать несколько вариантов изображений, и устройство может выбрать наиболее подходящий для себя вариант.
Изображение, корректно отображаемое на всех устройствах, будет излишне большим для устройств меньшего размера. Методы адаптивного отображения изображений, в частности srcset и sizes , позволяют указывать несколько версий изображения, и устройство само выберет наиболее подходящий для себя размер.
Изменить размер изображений
Независимо от выбранного подхода, вам может пригодиться ImageMagick для изменения размера изображений. ImageMagick — это самый популярный инструмент командной строки для создания и редактирования изображений. Большинство пользователей могут изменять размер изображений гораздо быстрее, используя интерфейс командной строки, чем графический редактор изображений.
Измените размер изображения до 25% от исходного размера:
convert flower.jpg -resize 25% flower_small.jpg
Масштабируйте изображение так, чтобы оно поместилось в пределах "200 пикселей в ширину и 100 пикселей в высоту":
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Если вам предстоит изменять размер большого количества изображений, вам может быть удобнее использовать скрипт или сервис для автоматизации этого процесса. Подробнее об этом можно узнать в руководстве по адаптивным изображениям.
Избегайте смещения планировки, указывая размеры.
Хотя в этом руководстве рассматриваются размеры изображений в контексте уменьшения количества загружаемых лишних байтов, важно отметить, что резервирование правильного места для изображений в макете является еще одним важным компонентом минимизации показателя совокупного смещения макета страницы (Cumulative Layout Shift, CSS). При отображении изображений в HTML обязательно используйте правильные атрибуты width и height , чтобы браузер знал, сколько места выделить в макете для изображения:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Без этих атрибутов или эквивалентного CSS-регулирования размеров браузер не знает, сколько места займет изображение, пока оно не загрузится. Это вызовет смещение макета в документе, что может раздражать пользователей, когда контент перемещается после того, как они начали его просматривать. Это может привести к тому, что пользователи потеряют место при чтении или «пропустят» желаемый объект и в итоге кликнут на что-то другое, на что не собирались кликать во время загрузки страницы.
Альтернативой явному указанию ширины и высоты является использование свойства CSS aspect-ratio для изображения. Это оказывает аналогичное влияние на размер элемента, как и атрибуты width и height в том смысле, что контейнер будет поддерживать постоянное соотношение сторон. Однако разница заключается в том, что это может привести к использованию другого соотношения сторон, чем то, в котором предоставлено изображение, поэтому, вероятно, вам потребуется использовать параметр object-fit , чтобы гарантировать, что изображение не будет искажено в этом явном представлении 16/9:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Проверять
После изменения размера всех изображений повторно запустите Lighthouse, чтобы убедиться, что вы ничего не пропустили.