Например, даже на стартовой странице Google Developers графику можно сжать на 71%. Чем меньше весят фотки – тем быстрее грузится сайт. Меньше картинки — меньше трафика — все работает быстрее. Посетители тратят меньше времени – все довольны.
В этом материале подобраны основные инструменты для оптимизации графики.
Серверные инструменты
Самые частые — изображения в формате JPG. Основные инструменты:
- Jpegtran сжимает картинки без потерь и удаляет метаданные:
jpegtran -copy none -optimize -outfile output.jpg input.jpg
- Imagemagick работает практически со всеми форматами. Утилита convert позволяет указывать параметр качества для сжатия, что поможет уменьшить размер картинки:
convert input.jpg -quality 75 output.jpg
Формат PNG используется для иконок, логотипов и малоцветных изображений. Инструменты для оптимизации:
- pngquant – инструмент lossy-сжатия для оптимизации PNG с потерями качества. Основной алгоритм работы — уменьшается количество используемых оттенков цветов. Это снижает размер с небольшими потерями в качестве:
pngquant --quality 75 —speed 1 input.png
- pngcrush – еще одно средство оптимизации для PNG. Использует алгоритм сжатия без потерь:
pngcrush -reduce -brute in.png out.png
Облачные инструменты
- JPEGmini. Отлично сжимает фотки на 20…30%. Создатели заявляют, что могут сжать некоторые изображения в 5 раз без потерь в качестве. Есть API для автоматизации.
- TinyPNG. Реально крутой инструмент оптимизации для PNG. Очень хорошее сжатие без заметных потерь в качестве. Также есть API и большой бесплатный пакет.
- i.onthe.io/google_speed. Простой сжиматор, работает с любым форматом. Удобен для одноразовой обработки.
Модуль PageSpeed
Google потрудился и выпустил модуль к Ngnix и Apache для повышения производительности сайтов. Он увеличивает скорость загрузки, оптимизируя дофига всяких параметров, в том числе и фотки. Работает автоматически, его нужно только установить и включить:
pagespeed on;
pagespeed FileCachePath /var/cache/nginx;
Модуль делает все сам — и анализирует HTML, и оптимизирует ресурсы. Например, пережимает картинки или минифицирует статику. В исходниках страницы все оптимизированные ресурсы будут иметь другой путь.
Прямая оптимизация ресурсов
После оптимизации PageSpeed сохраняет файл по новому пути. Но как быть с фотками, отображаемыми через JavaScript? Или со ссылками на Ваши фотки на сторонних ресурсах? Тут на помощь приходит IPRO – оптимизация ресурсов не отходя от кассы, а точнее не изменяя URL.
Для этого достаточно включить в конфиг такие инструкции (для Nginx):
pagespeed InPlaceResourceOptimization on;
Конспект
- Используйте PageSpeed для поиска проблем с графикой на сайте.
- Если графики много, используйте серверные инструменты для оптимизации: jpegtran, jpegoptim, ImageMagick, pngquant, pngcrush.
- Облачные инструменты для одноразовых задач и подключения по API: JPEGmini, tinyPNG, i.onthe.io/google_speed.
- Модуль PageSpeed к Nginx/Apache сделает всю оптимизацию сам, но его нужно собирать.
Комментарии (23)
btd
20.05.2015 16:07+7Как то вы совсем по вершкам прошлись. Нету описания svgo, pngout, gifsicle, advpng. jpegtran бывает как минимум трех видов: jpeg group (оригинальный), jpeg-turbo, mozjpeg. Нету ссылки к очень популярному ImageOptim.app.
Последний раз когда использовал pagespeed с nginx, было много заморочек c https.
immaculate
21.05.2015 04:14+1Еще есть optipng, который проще использовать, чем pngcrush, и сжимает сильнее.
questor
20.05.2015 18:09Чем Imagemagick так лучше gd, что про один рассказано, а про второй — нет?
demimurych
21.05.2015 00:11+3хотябы тем, что gd при обработке изображения грузит его в память весь. Представьте ситуацию когда десяток пользователй грузят равы по 50 мегабайт. gd просто сьест всю память, imagemagick же разберется с этим без труда.
Образно — сравнивать imagemagick и gd это как сравнивать болид формулы один с окой.
goooseman
20.05.2015 18:49+1Модуль pagespeed для nginx действительно может помочь со скоростью загрузки сайта, но может вдвое увеличить нагрузку на cpu. Будьте осторожны.
nogoody
20.05.2015 22:05по поводу метаданных, где-то читал, что они используются для SEO продвижения картинок. Сейчас не смог найти ничего похожего в рекомендациях и гугла, и яндекса. Как сейчас с этим обстоит дела? В метаданных еще и копирайт указывается и дата съемки, нужно ли их удалять?
demimurych
21.05.2015 00:18Важная ремарка — все это имеет смысл в первую очередь тогда, когда изображения напрямую грузятся посредством тега img или background.
При той же lazy load загрузке изображений, подобного рода приемы уже не так критичны, хотя, конечно, и важны.
Qwikky
21.05.2015 00:53Еще момент, если нуно пожать картинки на локалке, то можно использовать "FileOptimizer". Он жмёт практически все форматы картинок (и не только картинок), также по умолчанию включено «сжатие без потерь».
Совет: лучше скачивать portable-версию, так будет проще заменять программу после выхода новой версии.
Starche
У TinyPNG есть собрат TinyJPG, который на мой взгляд не менее крут. API у них общий, и модули под grunt/gulp тоже в наличии.
Stan_1
Артефакты явные появляются. :( Хотя радостно написал, что уменьшил размер на 75%
wdmaster
А это разве не один и тот же сервис?