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

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

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

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

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

Нужно протестировать сайт при помощи 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).

В завершение

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

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

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

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

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

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

О нас seoexpert

продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

Смотрите также

16 лучших примеров дизайна главной страницы сайта

Для любой компании главная страница сайта – виртуальная парадная дверь. Если посетителю не нравится то, ...