Для передачи изображений размером с настольный компьютер на мобильные устройства может потребоваться в 2–4 раза больше данных, чем необходимо. Следуйте инструкциям на этой странице, чтобы улучшить взаимодействие с пользователем, предоставляя изображения разных размеров на разные устройства.
Адаптивные изображения и основные веб-показатели
Когда вы предоставляете адаптивные изображения, ваша страница оценивает возможности отображения устройства пользователя и выбирает один из набора кандидатов на изображение, которые оптимальны для отображения на основе этих критериев. Это экономит данные для ваших пользователей, в основном за счет предоставления меньших изображений на устройства с меньшими экранами.
Эффект более быстрой загрузки изображений может также распространяться на самую большую содержательную отрисовку (LCP) вашей страницы. Например, если элементом LCP вашей страницы является изображение, его оперативное обслуживание может сократить продолжительность загрузки ресурса .
Меньшая продолжительность загрузки ресурса сокращает время загрузки изображения LCP, улучшая оценку LCP вашей страницы. Более низкий LCP означает, что пользователи увидят, что ваш сайт загружается быстрее, и особенно быстрее загружается его самый важный контент (элемент LCP). Использование адаптивных изображений также может уменьшить конфликты за полосу пропускания для других ресурсов на странице, что может улучшить скорость загрузки вашей страницы в целом.
Изменение размера изображений
Двумя наиболее популярными инструментами изменения размера изображений являются пакет Sharp npm и инструмент ImageMagick CLI .
Пакет Sharp — хороший выбор для автоматизации изменения размера изображений (например, создания миниатюр разного размера для всех видео на вашем веб-сайте). Он быстрый и хорошо интегрируется со сценариями и инструментами сборки. ImageMagick более удобен для однократного изменения размера изображения, поскольку он полностью запускается из командной строки.
острый
Чтобы использовать Sharp в качестве сценария Node, сохраните этот код как отдельный сценарий в своем проекте, а затем запустите его для преобразования изображений:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ИзображениеМагия
Чтобы изменить размер изображения до 33% от его исходного размера, выполните в терминале следующую команду:
convert -resize 33% flower.jpg flower-small.jpg
Чтобы изменить размер изображения так, чтобы оно помещалось в пространство шириной 300 пикселей и высотой 200 пикселей, выполните следующую команду:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
Сколько версий образа следует создать?
На этот вопрос не существует единственного «правильного» ответа. Однако обычно используется изображение 3–5 разных размеров. Использование изображений большего размера лучше для производительности, но занимает больше места на ваших серверах и требует от вас написания немного большего количества HTML.
Другие варианты
Также стоит попробовать такие сервисы изображений, как Thumbor (с открытым исходным кодом) и Cloudinary . Оба являются простыми способами создания адаптивных изображений, которые также позволяют манипулировать изображениями по требованию. Чтобы настроить Thumbor, установите его на свой сервер. Cloudinary позаботится обо всех деталях за вас и не требует настройки сервера.
Обслуживание нескольких версий изображений
Когда вы указываете несколько версий изображения, браузер выбирает лучшую из них:
| До | После |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480 Вт, flowers-large.jpg 1080 Вт" size="50vw"> |
Атрибуты src , srcset и sizes тега <img> взаимодействуют друг с другом для достижения этого конечного результата.
Атрибут «источник»
Атрибут src позволяет этому коду работать в браузерах, которые не поддерживают атрибуты srcset и sizes . Эти браузеры возвращаются к загрузке ресурса, указанного в атрибуте src .
Атрибут «srcset»
Атрибут srcset представляет собой разделенный запятыми список имен файлов изображений и их дескрипторов ширины или плотности.
В этом примере используются дескрипторы ширины , которые сообщают браузеру ширину изображения, поэтому ему не нужно загружать изображение, чтобы узнать это. 480w — это дескриптор ширины, сообщающий браузеру, что ширина flower-small.jpg составляет 480 пикселей. 1080w — это дескриптор ширины, сообщающий браузеру, что ширина flower-large.jpg составляет 1080 пикселей.
Дополнительная заслуга : вам не нужно знать дескрипторы плотности, чтобы обслуживать изображения разных размеров. Однако, если вам интересно, как работают дескрипторы плотности, посетите лабораторию кода переключения разрешения . Дескрипторы плотности используются для предоставления различных изображений в зависимости от плотности пикселей устройства.
Атрибут «размеры»
Атрибут «размеры» сообщает браузеру, насколько широким будет изображение при его отображении, хотя он не влияет на размер отображаемого изображения, поэтому для этого вам все равно понадобится CSS.
Браузер использует эту информацию, а также то, что он знает об устройстве пользователя (включая его размеры и плотность пикселей), чтобы определить, какое изображение загружать.
Если браузер не распознает атрибут « sizes », он возвращается к загрузке изображения, указанного атрибутом « src ». ( sizes и srcset были введены одновременно, поэтому каждый браузер поддерживает либо оба атрибута, либо ни одного.)
Дополнительная заслуга : если вы хотите проявить фантазию, вы также можете использовать атрибут размеров, чтобы указать несколько размеров слотов. Это подходит для веб-сайтов, которые используют разные макеты для разных размеров области просмотра. Посмотрите этот пример кода с несколькими слотами, чтобы узнать, как это сделать.
(Даже больше) Дополнительный балл
В дополнение ко всем уже перечисленным дополнительным преимуществам (изображения сложны!), вы также можете использовать эти же концепции для художественного оформления . Художественное направление — это практика подачи совершенно разных изображений (вместо разных версий одного и того же изображения) в разные области просмотра. Подробнее можно узнать в лаборатории кода Art Direction .
Проверять
После реализации адаптивных изображений вы можете использовать Lighthouse, чтобы убедиться, что вы не пропустили ни одного изображения. Запустите аудит производительности Lighthouse ( Lighthouse > Параметры > Производительность ) и найдите результаты аудита правильного размера изображений . В этих результатах перечислены изображения, размер которых вам еще нужно изменить.