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

Измерьте максимальную ширину, при которой отображается изображение, удвойте её для экранов с высокой плотностью пикселей и измените размер всей библиотеки под это значение. Загрузка фотографии размером 4000 пикселей в слот размером 800 пикселей означает, что браузер скачивает примерно в 25 раз больше пиксельных данных, чем может отобразить, а затем просто отбрасывает лишнее.

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

Почему изображения избыточного размера обходятся так дорого

Размер файла масштабируется вместе с количеством пикселей, поэтому уменьшение ширины и высоты вдвое сокращает объем данных примерно на 75 процентов. Эта зависимость является квадратичной, а не линейной, из-за чего объем лишних данных растет очень быстро.

Первая строка — это типичный случай для сайтов, где редакторы загружают изображения напрямую с камеры. Браузер скачивает 4.2 MB, уменьшает масштаб и отображает эквивалент файла размером 180 KB.

Как измерить реальный размер отображения

Кликните правой кнопкой мыши по изображению на странице, выберите «Исследовать элемент» (Inspect) и посмотрите на отображаемые размеры, а не на исходные. Браузеры показывают оба значения, и разница между ними — это и есть ваши потери.

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

Правило удвоения для экранов высокой плотности

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

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

Типичная ширина отображения для изменения размера

• Изображение в тексте статьи: отображается около 700 px, экспортируйте в 1400 px.
• Полноэкранный баннер (hero): отображается до 1920 px, экспортируйте в 1920 px и сжимайте сильнее.
• Изображение на полширины экрана: отображается около 600 px, экспортируйте в 1200 px.
• Миниатюра в сетке товаров: отображается около 300 px, экспортируйте в 600 px.
• Фото автора или профиля: отображается около 80 px, экспортируйте в 160 px.
• Логотип в шапке: отображается около 180 px, экспортируйте в 360 px или используйте векторную графику.

Почему полноэкранные изображения являются исключением

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

Баннеры обычно рассматривают издалека, и они содержат меньше мелких деталей, чем фотографии товаров, а значит, агрессивное сжатие на них менее заметно. Баннер шириной 1920 пикселей с качеством 70 в формате WebP обычно весит менее 200 KB и отлично смотрится на любом экране, в то время как версия 3840 пикселей не дает видимых преимуществ при вчетверо большем весе.

Как исправить всю библиотеку

Чтобы правильно изменить размер изображений на существующем сайте, выполните следующие 6 шагов.

1. Составьте список слотов для изображений в вашем дизайне — обычно это от 4 до 6 уникальных размеров, а не десятки.
2. Измерьте ширину отображения каждого слота с помощью инспектора браузера на живой странице.
3. Удвойте каждую ширину, чтобы получить целевой размер для экспорта.
4. Рассортируйте библиотеку по папкам в соответствии со слотами, так как пакетная обработка применяет один размер ко всем файлам в папке.
5. Измените размер изображений в каждой папке до целевой ширины, а затем сожмите и конвертируйте их за тот же проход.
6. Замените файлы на сервере, сохраняя прежние имена, чтобы существующие страницы продолжали работать.

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

Адаптивные изображения и атрибут srcset

Используйте srcset, чтобы предложить несколько размеров и позволить браузеру выбрать подходящий для каждого устройства. В этом случае телефон загрузит файл размером 400 пикселей, а десктоп — файл размером 1400 пикселей из той же разметки.

Создайте 3 варианта ширины для каждого изображения (обычно 400, 800 и 1600 пикселей) и укажите их с соответствующими значениями ширины, чтобы браузер мог сделать выбор. Большинство систем управления контентом делают это автоматически при загрузке, поэтому проверьте возможности вашей платформы. Но даже в этом случае загрузка правильно подготовленного оригинала улучшит качество всех автоматически создаваемых вариантов.

Всегда меняйте размер перед сжатием

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

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

Как это влияет на скорость загрузки страниц

Правильный подбор размеров изображений обычно снижает их общий вес на 60–90 процентов на сайтах, где это никогда не делалось ранее. Этот эффект превосходит любой переход на новые форматы и обычно превосходит все остальные оптимизации вместе взятые.

Наибольший эффект заметят мобильные пользователи, у которых скорость соединения ниже, а трафик стоит денег. Показатель Largest Contentful Paint улучшается напрямую, так как на это значение обычно влияет одно крупное изображение. Устранение предупреждения «Правильный размер изображений» в аудите Lighthouse часто одновременно убирает еще 2 или 3 связанных предупреждения.

Никогда не увеличивайте изображение под размер слота

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

Если исходное изображение меньше слота, который оно должно заполнить, правильным решением будет использовать его в естественном размере, изменить макет вокруг него или заменить изображение. Увеличение фотографии с 600 до 1600 пикселей дает размытый файл, весящий в 4 раза больше оригинала, что одновременно вредит и качеству, и скорости.

Проверка страницы на наличие избыточных изображений

Откройте инструменты разработчика, перейдите на вкладку Network, отфильтруйте по типу Img и перезагрузите страницу. В списке отобразятся все изображения с их переданным размером, отсортированные по убыванию.

Любое одиночное изображение размером более 500 KB заслуживает внимания, а любая страница, где общий вес изображений превышает 2 MB, определенно имеет проблемы. Наведите курсор на изображение на панели Elements, чтобы увидеть его исходный и отображаемый размеры рядом. Большая разница между этими двумя числами — это и есть признак неправильного размера изображения, который можно обнаружить за пару секунд.

Изменение размера библиотеки за один раз

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

Перетащите до 500 файлов за раз или добавьте ZIP-архив напрямую, а затем настройте ширину, формат и степень сжатия для всего набора. Все процессы выполняются прямо в вашем браузере на вашем процессоре, поэтому рабочие материалы клиентов, макеты и неопубликованные галереи никогда не попадут на сторонний сервер. Ничего не загружается в сеть, а значит, изменение размера всей библиотеки происходит без передачи файлов по интернету.