Мы все были в такой ситуации: вы забыли уменьшить изображение перед добавлением его на страницу. Изображение выглядит нормально, но оно тратит данные пользователей и ухудшает производительность страницы.
Определите изображения неправильного размера
Lighthouse позволяет легко идентифицировать изображения неправильного размера. Запустите аудит производительности ( Lighthouse > Параметры > Производительность ) и найдите результаты аудита правильного размера изображений . В ходе аудита перечислены все изображения, размер которых необходимо изменить.
Определите правильный размер изображения
Размер изображения может быть обманчиво сложным. По этой причине мы предоставили два подхода: «хороший» и «лучший». Оба варианта улучшат производительность, но понимание и реализация «лучшего» подхода может занять немного больше времени. Тем не менее, это также вознаградит вас большим улучшением производительности. Лучшим выбором для вас будет тот, который вам будет удобно реализовать.
Краткое примечание о модулях CSS
Существует два типа единиц CSS для указания размера HTML-элементов, включая изображения:
- Абсолютные единицы измерения: элементы, оформленные с использованием абсолютных единиц, всегда будут отображаться в одном и том же размере, независимо от устройства. Примеры допустимых абсолютных единиц CSS: пиксели, см, мм, дюймы.
- Относительные единицы: элементы, стилизованные с использованием относительных единиц, будут отображаться в разных размерах в зависимости от указанной относительной длины. Примеры допустимых относительных единиц CSS: %, vw (1vw = 1% ширины области просмотра), em (1,5 em = размер шрифта в 1,5 раза).
«Хороший» подход
Для изображений, размер которых основан на…
- Относительные единицы : измените размер изображения до размера, который будет работать на всех устройствах.
Возможно, вам будет полезно проверить свои аналитические данные (например, Google Analytics), чтобы узнать, какие размеры дисплеев обычно используются вашими пользователями. Альтернативно, screensiz.es предоставляет информацию о дисплеях многих распространенных устройств. - Абсолютные единицы : изменение размера изображения в соответствии с размером, в котором оно отображается.
Панель «Элементы DevTools» можно использовать для определения размера отображаемого изображения.
«Лучший» подход
Для изображений как с абсолютным, так и с относительным размером используйте атрибуты srcset и sizes , чтобы отображать разные изображения с разной плотностью отображения. Прочтите руководство по адаптивным изображениям .
«Плотность дисплея» означает, что разные дисплеи имеют разную плотность пикселей. При прочих равных условиях дисплей с высокой плотностью пикселей будет выглядеть резче, чем дисплей с низкой плотностью пикселей.
В результате необходимо несколько версий изображения, если вы хотите, чтобы пользователи видели как можно более четкие изображения независимо от плотности пикселей их устройства.
Методы адаптивного изображения делают это возможным, позволяя вам перечислить несколько версий изображения, а устройство может выбрать изображение, которое лучше всего подходит для него.
Изображение, которое работает на всех устройствах, будет излишне большим для устройств меньшего размера. Методы адаптивных изображений, в частности srcset и size , позволяют указать несколько версий изображения, а устройству выбрать размер, который лучше всего подходит для него.
Изменение размера изображений
Независимо от выбранного вами подхода, вам может оказаться полезным использовать ImageMagick для изменения размера изображений. ImageMagick — самый популярный инструмент командной строки для создания и редактирования изображений. Большинство людей могут изменять размер изображений гораздо быстрее при использовании CLI, чем при использовании графического редактора изображений.
Измените размер изображения до 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
Если вы будете изменять размер большого количества изображений, возможно, вам будет удобнее использовать скрипт или сервис для автоматизации этого процесса. Подробнее об этом можно узнать в руководстве по адаптивным изображениям.
Избегайте смещения макета, указывая размеры.
Хотя в этом руководстве размеры изображений обсуждаются в контексте уменьшения количества загружаемых ненужных байтов, важно отметить, что резервирование правильного места для изображений в макете является еще одним важным компонентом минимизации показателя совокупного смещения макета страницы. При отображении изображений в HTML обязательно используйте правильные атрибуты width и height , чтобы браузер знал, сколько места нужно выделить в макете для изображения:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Без этих атрибутов или эквивалентных размеров CSS браузер понятия не имеет, сколько места будет занимать изображение до его загрузки. Это приведет к смещению макета документа, что может раздражать пользователей, когда контент перемещается после того, как они начали его использовать. Это может привести к тому, что пользователи потеряют свое место при чтении или «пропустят» намеченную цель попадания и в конечном итоге нажмут на что-то еще, что они не собирались делать во время загрузки страницы.
Альтернативой явному указанию ширины и высоты является использование свойства aspect-ratio CSS для изображения. Это оказывает на размер элемента такое же влияние, как и атрибуты width и height , в том смысле, что контейнер будет поддерживать постоянное соотношение сторон. Однако разница в том, что это может привести к использованию другого соотношения сторон, чем предоставленное изображение, поэтому вам, вероятно, захочется использовать настройку object-fit , чтобы гарантировать, что изображение не будет искажено в этом явном представлении 16/9. :
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Проверять
Изменив размеры всех изображений, перезапустите Lighthouse, чтобы убедиться, что вы ничего не пропустили.