Подавайте изображения с правильными размерами

Кэти Хемпениус
Katie Hempenius
X

Беги Маяк

Этот глюк достаточно мал, чтобы его изображения можно было просмотреть вручную. Однако для большинства веб-сайтов использование такого инструмента, как Lighthouse, для автоматизации этого процесса имеет важное значение.

  1. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим полноэкранный .
  2. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
  3. Откройте вкладку «Маяк» .
  4. Убедитесь, что в списке «Категории» установлен флажок «Производительность» .
  5. Нажмите кнопку Создать отчет .
  6. Посмотрите на результаты аудита изображений правильного размера .

В Lighthouse не удалось выполнить аудит изображений правильного размера.

Аудит Lighthouse показывает, что размеры обоих изображений на этой странице необходимо изменить.

Исправить flower_logo.png

Начните с верхней части страницы и исправьте изображение логотипа.

  • Проверьте flower_logo.png на панели «Элементы DevTools».

Панель элементов DevTools

Это CSS для flower_logo.png :

.logo {
  width: 50px;
  height: 50px;
}

Ширина CSS этого изображения составляет 50 пикселей, поэтому flower_logo.png следует изменить в соответствии с ним. Вы можете использовать ImageMagick , чтобы изменить размер изображения по размеру. ImageMagick — это инструмент CLI для редактирования изображений, который предварительно установлен в среде Codelab.

  1. Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.
  2. Нажмите «Терминал» (примечание: если кнопка «Терминал» не отображается, возможно, вам придется использовать опцию «Полноэкранный режим»).
  3. В консоли введите:
convert flower_logo.png -resize 50x50 flower_logo.png

Исправить flowers_photo.jpg

Далее исправьте фото фиолетовых цветов.

  • Осмотрите flower_photo.jpg на панели элементов DevTools.

Панель элементов DevTools

Это CSS для flower_photo.jpg :

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

50vw устанавливает ширину CSS файла flower_photo.jpg в «половину ширины браузера». ( 1vw равен 1% ширины браузера).

Идеальный размер этого изображения будет зависеть от устройства, на котором оно просматривается, поэтому вам следует изменить его размер до размера, который подойдет большинству ваших пользователей. Вы можете проверить свои аналитические данные, чтобы узнать, какие разрешения экрана наиболее распространены среди ваших пользователей:

Google аналитика разрешений экрана.

Эти данные показывают, что более 95% посетителей этого сайта используют разрешение экрана 1920 пикселей в ширину или меньше.

Используя эту информацию, мы можем рассчитать ширину изображения: (ширина 1920 пикселей) * (50% ширины браузера) = 960 пикселей.

При разрешении шириной более 1920 пикселей изображение будет растянуто, чтобы покрыть всю область. Изображение с измененным размером все еще довольно велико, поэтому эффект от этого не должен быть очень заметным.

  • Используйте ImageMagick , чтобы изменить размер изображения до ширины 960 пикселей. В терминале введите:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

Повторный запуск маяка

  • Повторно запустите аудит производительности Lighthouse, чтобы убедиться, что вы успешно изменили размер изображений.

Аудит изображений правильного размера Lighthouse.

… И это терпит неудачу! Почему это?

Lighthouse проводит испытания на Nexus 5x. Nexus 5x имеет экран с разрешением 1080 x 1920. Для Nexus 5x оптимальный размер flower_photo.jpg будет составлять 540 пикселей в ширину (1080 пикселей * .5). Это намного меньше, чем наше измененное изображение.

Стоит ли изменить размер изображения, чтобы оно стало еще меньше? Вероятно. Однако ответ на этот вопрос не всегда однозначен.

Здесь приходится искать компромисс между качеством изображения на устройствах с высоким разрешением и производительностью. Легко переоценить, насколько внимательно пользователи будут просматривать изображения — поэтому вам, вероятно, следует уменьшить их размер — но, безусловно, есть случаи использования, когда качество изображения более важно.

Хорошей новостью является то, что вы можете полностью обойти этот компромисс, используя адаптивные изображения для обслуживания изображений разных размеров. Подробнее об этом можно узнать в руководстве по адаптивным изображениям .