Адаптивная загрузка изображений
При загрузке на мобильных устройствах изображений, предназначенных для ПК, расход трафика может быть в 2–4 раза выше, чем нужно. Вместо того чтобы использовать универсальные изображения, размер изображений можно выбирать исходя из формата устройства.
Изменение размера изображений #
Одни из наиболее популярных инструментов для изменения размера изображений — это npm-пакет sharp и инструмент ImageMagick для командной строки.
Пакет sharp — хороший выбор для автоматизации изменения размера изображений (например, при создании для всех видео на вашем сайте миниатюр различных размеров). Он быстро работает и с легкостью интегрируется со скриптами и инструментами сборки. ImageMagick, напротив, удобен для разового изменения размера изображений, так как используется исключительно через командную строку.
sharp #
Чтобы использовать 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`);
});ImageMagick #
Чтобы изменить размер изображения до 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 настройка сервера не требуется. Оба этих решения являются простыми способами создания адаптивных изображений.
Загрузка различных вариантов изображений #
Укажите несколько вариантов изображения, и браузер выберет наиболее подходящую:
Для достижения конечного результата используется комбинация атрибутов src, srcset и sizes элемента <img>.
Атрибут «src» #
Атрибут src позволяет коду работать в браузерах, которые не поддерживают srcset и sizes. Если браузер не поддерживает эти атрибуты, то загружается ресурс, указанный в атрибуте src.
Атрибут «srcset» #
Атрибут srcset принимает разделенный запятыми список изображений с указанием имен файлов и дескрипторов ширины или плотности пикселей.
В этом примере используются дескрипторы ширины. 480w — это дескриптор ширины, сообщающий браузеру, что flower-small.jpg имеет ширину 480 пикселей; 1080w — это дескриптор ширины, сообщающий браузеру, что flower-large.jpg имеет ширину 1080 пикселей.
«Дескриптор ширины» звучит как что-то сложное, но в действительности он лишь сообщает браузеру ширину изображения, позволяя определить его размер без необходимости загрузки.
Дополнительная информация: для показа изображений различных размеров вам не нужно ничего знать о дескрипторах плотности пикселей. Но если вам интересно, как они работают, ознакомьтесь с проектом «Переключение разрешения» в Codelabs. Дескрипторы плотности пикселей используются для выбора изображений с учетом плотности пикселей устройства.
Атрибут «sizes» #
Атрибут sizes сообщает браузеру, какую изображение будет иметь ширину при отображении. Однако атрибут sizes никак не учитывает размер экрана; для этого по-прежнему понадобится CSS.
На основании этой информации, а также информации об устройстве пользователя, такой как размер и плотность пикселей, браузер выбирает изображение для загрузки.
Если браузер не распознает атрибут «sizes», то будет загружено изображение, указанное в атрибуте «src». (Поддержка атрибутов «sizes» и «srcset» появилась в браузерах одновременно, поэтому браузер будет поддерживать либо оба атрибута, либо ни тот, ни другой.)
Дополнительная информация: если вы хотите проявить изобретательность, вы также можете указать при помощи атрибута sizes несколько размеров областей отображения. Эту возможность можно использовать на сайтах, макет выбирается в зависимости от размера области просмотра. Чтобы узнать, как это сделать, ознакомьтесь с примером кода, использующего множественные области отображения.
Информация для дальнейшего изучения #
Помимо дополнительной информации, приведенной выше (изображения — сложная тема!), вы также можете использовать концепции, описанные в этой статье, для художественного преобразования. Художественное преобразование — это когда в зависимости от размера области просмотра происходит загрузка совершенно разных изображений (а не разных версий одного изображения). Подробности вы можете узнать, ознакомившись с проектом «Художественное преобразование» в Codelabs.
Проверка #
После внедрения адаптивных изображений вы можете воспользоваться Lighthouse, чтобы убедиться, что ни одно изображение не было пропущено. Запустите в Lighthouse проверку производительности (Lighthouse > Options > Performance) и посмотрите результаты проверки Properly size images («Корректное масштабирование изображений»). Там вы увидите список изображений, которые требуют масштабирования.