20.05.2015 12:21
Capuchin 23 18072 Источник
Нет предела совершенству, и Google PageSpeed тому доказательство. С его помощью меньше чем за минуту можно получить подробный отчет о производительности Web страницы. В подавляющем большинстве случаев PageSpeed подскажет, что нужно оптимизировать графику. Это наиболее частая проблема и наиболее весомая.



Например, даже на стартовой странице 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)


  1. Starche
    20.05.2015 15:41
    #8426997
    +3

    У TinyPNG есть собрат TinyJPG, который на мой взгляд не менее крут. API у них общий, и модули под grunt/gulp тоже в наличии.


    1. Stan_1
      22.05.2015 22:11
      #8430803

      Артефакты явные появляются. :( Хотя радостно написал, что уменьшил размер на 75%


    1. wdmaster
      25.05.2015 04:13
      #8432149

      А это разве не один и тот же сервис?


  1. zee
    20.05.2015 15:52
    #8427007
    +1

    Есть ещё -strip для ImageMagick-овского convert.


    1. Moskus
      21.05.2015 00:19
      #8427545
      +1

      А еще ImageMagick умеет устанавливать разный color subsampling при кодировании, сменив который со стандартного 4:2:2 на 4:4:4 можно уменьшить визуальные потери даже при меньшем значении параметра quality.


  1. btd
    20.05.2015 16:07
    #8427029
    +7

    Как то вы совсем по вершкам прошлись. Нету описания svgo, pngout, gifsicle, advpng. jpegtran бывает как минимум трех видов: jpeg group (оригинальный), jpeg-turbo, mozjpeg. Нету ссылки к очень популярному ImageOptim.app.
    Последний раз когда использовал pagespeed с nginx, было много заморочек c https.


    1. immaculate
      21.05.2015 04:14
      #8427619
      +1

      Еще есть optipng, который проще использовать, чем pngcrush, и сжимает сильнее.


  1. questor
    20.05.2015 18:09
    #8427211

    Чем Imagemagick так лучше gd, что про один рассказано, а про второй — нет?


    1. demimurych
      21.05.2015 00:11
      #8427537
      +3

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

      Образно — сравнивать imagemagick и gd это как сравнивать болид формулы один с окой.


  1. goooseman
    20.05.2015 18:49
    #8427251
    +1

    Модуль pagespeed для nginx действительно может помочь со скоростью загрузки сайта, но может вдвое увеличить нагрузку на cpu. Будьте осторожны.


  1. akamajoris
    20.05.2015 20:22
    #8427345
    +1

    Кусок из доков по оптимизации от гугла…


  1. nogoody
    20.05.2015 22:05
    #8427445

    по поводу метаданных, где-то читал, что они используются для SEO продвижения картинок. Сейчас не смог найти ничего похожего в рекомендациях и гугла, и яндекса. Как сейчас с этим обстоит дела? В метаданных еще и копирайт указывается и дата съемки, нужно ли их удалять?


    1. vaslobas
      20.05.2015 23:59
      #8427529

      Возможно вы спутали с alt?


      1. Vilgelm
        21.05.2015 00:28
        #8427547

        Google умеет искать по EXIF, так что теоретически его можно использовать для продвижения. Хотя речь скорее всего идет об alt.


  1. Moskus
    21.05.2015 00:16
    #8427541
    +4

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


  1. demimurych
    21.05.2015 00:18
    #8427543

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


  1. Qwikky
    21.05.2015 00:53
    #8427563

    Еще момент, если нуно пожать картинки на локалке, то можно использовать "FileOptimizer". Он жмёт практически все форматы картинок (и не только картинок), также по умолчанию включено «сжатие без потерь».
    Совет: лучше скачивать portable-версию, так будет проще заменять программу после выхода новой версии.