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

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

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

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

Необходимо протестировать веб-сайт с помощью Google PageSpeed Insights:

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

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

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

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

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

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

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

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

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

Б) Маленькие картинки / миниатюры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сейчас вы готовы к загрузке изображений на веб-сайт. Что дальше?

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

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

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

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

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

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

Б) Иные инструменты для компрессии картинок

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

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

В завершение

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

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

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

Поэтому выделите времени и займитесь следующим:

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *