Масштабируем, экспортируем и сжимаем изображения для лучшей производительности сайта

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

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

Как узнать о проблеме с размером картинок?

Нужно протестировать сайт при помощи Google PageSpeed Insights:

PageSpeed-Insights-poor-performance-example

Давайте рассмотрим три основных аспекта оптимизации изображений для сайта, чтобы увеличить производительность:

optimize-images-overview-steps

1. Размер изображений (в пикселях)

Независимо от формата (JPG, PNG, GIF, TIF и т. д.), не рекомендуется загружать на сайт изображения в высоком разрешении.

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

А) Слайд-шоу во всю ширину окна

Для слайд-шоу во всю ширину экрана (которые автоматически растягиваются на все окно браузера) я рекомендую использовать изображения не более 2560 пикселей в ширину.

У картинок может быть любая высота, и при этом будет сохраняться соотношение сторон. Также для слайд-шоу на всю ширину экрана следует сохранять исходное соотношение сторон, а для небольших слайд-шоу лучше использовать слегка обрезанные изображения (например, в соотношении 3:1).

Посмотрим, как это выглядит на примере одного из сайтов:

jeff-schultz-photography-homepage-preview

Б) Маленькие изображения / миниатюры

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

К примеру, на этом сайте размер миниатюр, расположенных под основным слайдером, составляет 320 на 214 пикселей:

dream-photo-tours-homepage-preview

Если взглянуть внимательнее, можно увидеть, что разработчики сайта решили использовать изображения в два раза больше указанного размера (то есть, их ширина составляет не 320, а 640 пикселей). Это необходимо, чтобы на экранах повышенного разрешения типа Retina они смотрелись четко:

retina-image-example-chrome-inspect-element

В) Большие изображения в лайтбоксах

При оптимизации изображений, если нужно увеличивать их на экране (например, показывать их в лайтбоксе после клика по миниатюре), то старайтесь не делать их шире 1500 пикселей. При этом максимальная высота должна составлять 800-900 пикселей.

Это позволит сохранить относительно небольшой вес файлов, и гарантировать плавную прокрутку изображений в слайд-шоу:

lightbox-slideshow-example

2. Качество картинок и уровень их сжатия

А) Экспорт JPG-изображений

Если вы используете в качестве программы для оптимизации изображений Adobe Lightroom, то не нужно экспортировать изображения в 100% качестве. Попробуйте выбрать между 60-70%. Это все равно даст приемлемый результат и позволит существенно уменьшить вес файла:

adobe-lightroom-jpg-export-quality-slider

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

adobe-lightroom-jpg-export-file-size-comparison

Та же практика применима и при экспорте изображений из Adobe Photoshop.

К тому же, если вы используете последнюю версию Photoshop CC, то не забудьте попробовать новую опцию экспорта, которая находится в меню File > Export > Export As… (Файл > Экспорт > Экспортировать как…):

adobe-photoshop-new-export-dialog-jpg-quality

При оптимизации изображений для web постарайтесь определить наиболее оптимальный уровень сжатия. Многих вполне устраивает результат, который получается при 60-70%.

Б) Используйте форматы PNG/SVG/GIF для графики со сплошными цветами

Часто в оформлении сайта кроме фотографий будут присутствовать и другие графические элементы: логотип, иконки, скриншоты или баннеры.

Любые элементы графики, которые состоят из сплошных цветов (которые вы создаете в Photoshop или других инструментах), лучше всего сохранять в форматах PNG, SVG и GIF.

В качестве примера я использую одно из изображений, которое приводил ранее в этой статье:

adobe-lightroom-jpg-export-file-size-comparison

Всегда старайтесь использовать форматы изображений PNG и GIF, если есть возможность получить меньший вес файла по сравнению с JPG.

Но это подходит исключительно для пакетной оптимизации изображений графических элементов со сплошными цветами. Если опробовать тот же метод на обычной фотографии, то JPG даст лучший результат:

export-losless-file-types-comparison-regular-photo

3. Дополнительная компрессия за счет инструментов и плагинов

Теперь вы готовы к загрузке картинок на сайт. Что дальше?

А) Плагины для WordPress

Если вы используете CMS WordPress, то вам повезло. Для этой системы управления контентом придумано множество полезных и удобных плагинов, которые сделают за вас практически любую работу. Они способны сжимать загруженные изображения без потери качества ради оптимизации веса файла.

Одними из популярных решений для оптимизации изображений WordPress являются Smush.it и Kraken, но я предпочитаю Imagify:

imagify-plugin-preview

«Агрессивный» уровень сжатия данного плагина позволяет найти компромисс между качеством изображения и весом файла, но всегда есть возможность переключиться на «нормальный» режим оптимизации (также без потери качества).

Если у вас достаточно навыков в работе с WordPress, то я рекомендую провести массовую оптимизацию всех ранее загруженных изображений:

imagify-bulk-optimization-preview

Если же нужна бесплатная альтернатива, то с некоторыми задачами отлично справляется плагин со странным названием Ewww plugin.

Б) Другие инструменты для компрессии изображений

Если вы не используете WordPress, то можете попробовать следующие программные и онлайн-инструменты:

  • Imagify (онлайн, есть бесплатные и платные опции);
  • ImageOptim (бесплатно, Mac);
  • PNG Gauntlet (бесплатно, Windows);
  • Trimage (бесплатно, Linux);
  • JPEGmini ($20, Mac и Windows).

В завершение

Если вам важна скорость работы сайта, то при использовании сервисов оптимизации изображений обязательно нужно следить за размером картинок.

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

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

Так что выделите немного времени и займитесь следующим:

  • Оптимизируйте процесс экспорта и загрузки изображений на сайт;
  • Просмотрите и оптимизируйте уже загруженные на сайт изображения;
  • Продолжайте тестировать скорость работы сайта.

Перевод статьи “How to resize, export & compress images for optimal website performance” был подготовлен дружной командой проекта Сайтостроение от А до Я.