Мобильная
версия

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

Дата: Категория: Разное

Каждый владелец или создатель сайта хочет чтобы пользователь быстрее получал необходимый контент, на сервер была меньше нагрузка, и расходовалось меньше траффика. Об одном из таких способов я говорил в статье Минификация 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Кб Бесплатное

Теги: #Оптимизация, #Изображения

Ваша оценка:

Рейтинг: 7.8 (Оценок: 4)

Комментарий:

Copyright © DOC_tr 2015-2017 г. Все права защищены
Яндекс.Метрика
Перейти к мобильной версии