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

Каждый владелец или создатель сайта хочет чтобы пользователь быстрее получал необходимый контент, на сервер была меньше нагрузка, и расходовалось меньше траффика. Об одном из таких способов я говорил в статье Минификация JS и CSS, а сегодня мы поговорим о красивой составяляющей всех сайтов – изображениях.

Ни для кого не секрет что картинки весят достаточно много, и, не смотря на то что времена сайтов по 100кБ ушли в прошлое, все равно для некоторых сайты которые весят больше 1мБ из-за картинок могут открываться достаточно проблематично. Да и кому нужно расходовать лишний траффик.

Так как на еще одном из моих сайтов – flashpl.ru очень много картинок, несмотря на то, что они весят как правило не больше 50Кб я задумался о том, как все это дело улучшить – сжать их еще в несколько раз, и расходовать драгоценный траффик на полезные дела.

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

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

А настроить кэширование на сервере можно следующим образом

Кэширование изображений, и статический файлов

Apache

# 480 недель 
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</FilesMatch>

Время можно указать свое – max-age. Указывается в секундах

Nginx

server {
  listen 80;
  server_name mysite.com;
  ...
  # Задаем правила обработки статического контента (типов файлов можно поставить и больше)
  location ~* ^.+.(jpg|jpeg|gif|png|ico|css|pdf|ppt|txt|bmp|rtf|js)$ {
    root /path/to/document/root/; # Путь к корню вашего сайта
    access_log off; # не пишем логи
    expires 3d; # кэшируем у клиента на 3 дня
  }
}

можно указывать не только дни (d) но и часы (h), минуты (m) и секунды (s).

Как видите – кэширование картинок настроить не так уж и сложно, поэтому перейдем к более проблемному пункту – сжатие размера изображений без потерь.

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

Оговорюсь сразу – в данной статье я буду рассматривать только онлайн сервисы, потому что по опыту серверные приложения типа imagemagick не дают такого прекрасного результата как сторонние сервисы.
Дабы не быть голословным – я приведу процент сжатия картинки, весящей 100кб
И первый в моем списке –

Smush.It

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

Для wp есть даже плагин, основанный на smushit для оптимизации изображений, и его я использовал в своем плагине для emlog – оптимизатор изображений

Ссылку на всякий случай оставлю – smush.it

Процент сжатия не выяснить

TinyPNG

Один из моих любимых оптимизаторов – TinyPNG. Очень удобный интерфейс, хорошо сжимает, и есть неплохое API для разработчиков, но, к сожалению, в нем только бесплатные только 500 изображений в месяц.
Конечно если вам нужно не очень много изображений сжимать, то tinyPng отличной подойдет к вашим требованиям. Работает только с PNG или JPG

Также имеет свой WP плагин и подробный мануал по работе

101.5Кб превратились в 25.8Кб

Kraken.IO

Kraken – еще одни отличный оптимизатор изображений и также имеет 2 версии – платная и бесплатная.
В бесплатной будет только веб интерфейс по загрузке изображений, и ограничение на загружаемый файл в 1Мб.

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

101.5Кб превратились в 26.04Кб.
При сжатии с небольшой потерей качества – 4.1Кб
Качество достаточно приемлемое, но меня оно не устраивает.

CompressPNG

Еще один сервис – compressPNG. нету API, то лично для меня неприемлемо, но зато очень неплохо жмет изображения. Качество сжатия меня сильно порадовало.

101.5Кб превратились в 30.46Кб

 PunyPNG

PunyPNG – еще один сервис со своим API, но к моему великому сожалению жмущий изображения не так хорошо как конкуренты.

101.5Кб превратились в 71.3Кб

Подведем итоги теста с изображением в 100Кб

Название Размер после сжатия API
TinyPNG 25.8Кб бесплатное
Kraken.IO 26.04Кб (с потерей 4Кб) платное
CompressPNG 30.46Кб нет
PunyPNG 71.3Кб Бесплатное
[Всего голосов: 0    Средний: 0/5]

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

Ваш e-mail не будет опубликован.