Оптимизация изображений для сайта

В чем смысл оптимизации изображений

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

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

Алгоритм оптимизации изображения следующий:

1. Уменьшаем разрешение фотографии. Размер и вес картинки становится меньше, но четкость и резкость тоже уменьшаются;
2. Повышаем резкость инструментом «Контурная резкость»  до определенного предела, при этом  восстанавливаются визуальная четкость и качество картинки , достаточные для комфортного просмотра на экране;
3. Сохраняем изменения, предварительно выбрав нужное качество  картинки.
   Качество сохраненной  картинки в фотошопе  можно задать по шкале со значениями от 1 до 12. Причем меньшее качество картинки не значит, что картинка будет выглядеть на мониторе  хуже.  Меньшее качество –это меньшее количество пикселей в изображении и соответственно меньший ее вес в килобайтах.

Какой размер, разрешение и вес картинки оптимальный для интернета

Для отправки на емайл и для соцсетей универсальным может быть например размер в 800-1000 пикселей по длинной стороне. Вес картинки в килобайтах здесь не очень критичен. Если у вас быстрый интернет, то грузить фото например на фейсбук можно и полноразмерное фото. Сервис сам его сожмет по собственным алгоритмам.

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

Но это даже не самая большая проблема. Неоптимизированные картинки тормозят загрузку страниц сайта, что отрицательно скажется на его посещаемости. Желательно чтобы максимальный размер картинки на сайте не превышал 100-150 килобайт.

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

Способы сжатия изображений в программе Адоб Фотошоп

1. С фильтром «Контурная резкость»( Unsharp Mask)

В  меню «Файл» выбираем «Автоматизация-изменить размерность»

В диалоговом окне выставляем нужный размер  «высота» и «ширина» , например 1000 рх. То есть одно и то же значение, и жмем «ОК». При этом фотошоп уменьшит длинную сторону картинки до 1000 рх, размер короткой стороны при этом уменьшится  автоматически.

Горизонтальный снимок у вас при этом, или вертикальный не имеет значения;

К уменьшенному снимку применяем фильтр «Контурная резкость», значения которого выставляем приблизительно как на скриншоте;

Сохраняем изменения, выбрав нужное качество конечной картинки;

Просматриваем картинку в любом просмотровщике, увеличив масштаб до 100%. Если конечная картинка вас по какой то причине не устроит, например мало резкости, или наоборот слишком много, то повторяем процесс с другими значениями фильтра «Умная резкость».

Все действия записываем в экшен.

2.Сжатие фото плагином C3C ImageSize

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

Выберите  свой вариант плагина исходя из разрядности вашей ОС (32 или 64). Скопируйте папку плагина (C3CImageSize32 или C3CImageSize64) в папку плагинов Adobe Photoshop

Например C:\Program Files\Adobe\Adobe Photoshop CS5.1 (64 Bit)\Plug-ins\C3CImageSize64

Откройте в фотошопе нужное фото и запустите плагин.

Плагин будет открываться из меню «Файл-Автоматизация- C3C Image Size»

• Выбрать пресет, то есть  нужный размер картинки;
• Или же вручную выставить ширину и высоту изображения в пикселях или в процентах;
• Поставим галку в чек бокс «Сохранить пропорции»;
• Установим величину, на которую нужно увеличить резкость после уменьшения размера. Я советую оставить «авто»;
• Выберем алгоритм работы плагин. Там два варианта, выберите какой хотите;
• Размер высоты и ширины выставляем одинаковыми. Программа уменьшит картинку по длинной стороне до заданного значения, а второй размер получится автоматом.

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

3.Сжатие фото с использованием фильтра фотошопа «High pass» (Высокий проход)

Фильтр «High pass» добавляет четкость уменьшенной картинке, но делает это очень мягко.Степень его воздействия можно откорректировать.

1. Итак,  открываем в фотошопе нужный снимок, и  в  меню «Файл» выбираем «Автоматизация-изменить размерность» и выставляем нужный размер  «высота» и «ширина» , например 1000 рх;
2. Создаем копию слоя: «Слои- создать дубликат слоя»;
3. Меню «Изображение-Коррекция-Обесцветить» (Shift+Ctrl+U);
4. Меню «Фильтр-Другое-Цветовой контраст(High pass);
5. Значение радиуса в настройках фильтра выставляем в пределах 0,8-1, нажимаем «ОК»;
6. Режим наложения слоев меняем на «Перекрытие»;
7. Объединяем слои (Сtrl+E);
8. Сохраняем изменения;

Что бы уменьшить вес изображения максимально, то сохраняем его как копию. В диалоговом окне сохранения файла выбираем качество 5. При этом наш файл получится весом от 50 до 130 кВ ( Величина будет зависеть от качества исходного фото). Можете сохранить фото с меньшим качеством, например 2 или 3.
Оцените результат просмотром в масштабе 100%

Скачать экшен для сжатия фото

Вы можете скачать готовый экшен, записанный по материалам этой статьи.

Набор содержит 4 экшена для оптимизации изображения:

• «1000рх» с фильтром «Контурная резкость»;
• «1000рх» с плагином C3C ImageSize. Для его работы скачайте и установите плагин;
• «1000рх» с использованием фильтра фотошопа «High pass»;
• «1000рх» для вэб. Этот экшен сохранит оптимизированную картинку с качеством 5 и весом от 60 до 130 кБ. Если вам грузить фото на сайт, то используйте этот экшен.

Первые три экшена сохранят картинку после сжатия в максимальном качестве;

Зачем так много экшенов? Разные варианты, протестируйте разные, выберите то, что понравится больше.

Скачать экшен для сжатия фото

Пакетная обработка по оптимизации (сжатия) изображений

Используя эти экшены вы можете очень быстро обработать сотни и даже тысячи снимков.  Подробнее об этом описано в статье  «Пакетная обработка в фотошопе».

Примечание. Последний экшен «1000рх  для вэб»при пакетной обработке будет сохранять картинки не только в выходной папке, но и в исходной. Имейте это в виду.

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