Беги Маяк
Этот глюк достаточно мал, чтобы его изображения можно было просмотреть вручную. Однако для большинства веб-сайтов использование такого инструмента, как Lighthouse, для автоматизации этого процесса имеет важное значение.
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
- Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
- Откройте вкладку «Маяк» .
- Убедитесь, что в списке «Категории» установлен флажок «Производительность» .
- Нажмите кнопку Создать отчет .
- Посмотрите на результаты аудита изображений правильного размера .
Аудит Lighthouse показывает, что размеры обоих изображений на этой странице необходимо изменить.
Исправить flower_logo.png
Начните с верхней части страницы и исправьте изображение логотипа.
- Проверьте
flower_logo.png
на панели «Элементы DevTools».
Это CSS для flower_logo.png
:
.logo {
width: 50px;
height: 50px;
}
Ширина CSS этого изображения составляет 50 пикселей, поэтому flower_logo.png
следует изменить в соответствии с ним. Вы можете использовать ImageMagick, чтобы изменить размер изображения по размеру. ImageMagick — это инструмент CLI для редактирования изображений, который предварительно установлен в среде Codelab.
- Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.
- Нажмите «Терминал» (примечание: если кнопка «Терминал» не отображается, возможно, вам придется использовать опцию «Полноэкранный режим»).
- В консоли введите:
convert flower_logo.png -resize 50x50 flower_logo.png
Исправить flowers_photo.jpg
Далее исправьте фото фиолетовых цветов.
- Осмотрите
flower_photo.jpg
на панели элементов DevTools.
Это CSS для flower_photo.jpg
:
.photo {
width: 50vw;
margin: 30px auto;
border: 1px solid black;
}
50vw
устанавливает ширину CSS flower_photo.jpg
в «половину ширины браузера». ( 1vw равен 1% ширины браузера).
Идеальный размер этого изображения будет зависеть от устройства, на котором оно просматривается, поэтому вам следует изменить его размер до размера, который подойдет большинству ваших пользователей. Вы можете проверить свои аналитические данные, чтобы узнать, какие разрешения экрана наиболее распространены среди ваших пользователей:
Эти данные показывают, что более 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 проводит испытания на Nexus 5x. Nexus 5x имеет экран с разрешением 1080 x 1920. Для Nexus 5x оптимальный размер flower_photo.jpg
будет составлять 540 пикселей в ширину (1080 пикселей * .5). Это намного меньше, чем наше измененное изображение.
Стоит ли изменить размер изображения, чтобы оно стало еще меньше? Вероятно. Однако ответ на этот вопрос не всегда однозначен.
Здесь приходится искать компромисс между качеством изображения на устройствах с высоким разрешением и производительностью. Легко переоценить, насколько внимательно пользователи будут просматривать изображения — поэтому вам, вероятно, следует уменьшить их размер — но, безусловно, есть случаи использования, когда качество изображения более важно.
Хорошей новостью является то, что вы можете полностью обойти этот компромисс, используя адаптивные изображения для обслуживания изображений разных размеров. Подробнее об этом можно узнать в руководстве по адаптивным изображениям .