вторник, 23 августа 2016 г.

Оптимизация картинок для Google PageSpeed

15:54 By , , No comments


Нет предела совершенству, и 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 сделает всю оптимизацию сам, но его нужно собирать.
  •  
    +29
     
    •  
  • 30,3k
    •  
  •  407
      •  
      •  
      •  
Автор: @Capuchin
 
.io 
рейтинг40,25
Компания прекратила активность на сайте

Похожие публикации

Комментарии (29)

  •   
    +3
      
    У TinyPNG есть собрат TinyJPG, который на мой взгляд не менее крут. API у них общий, и модули под grunt/gulp тоже в наличии.
    •     
      0
        
      Артефакты явные появляются. :( Хотя радостно написал, что уменьшил размер на 75%
      •     
        0
          
        А это разве не один и тот же сервис?
      •   
        +1
          
        Есть ещё -strip для ImageMagick-овского convert.
        •     
          +1
            
          А еще ImageMagick умеет устанавливать разный color subsampling при кодировании, сменив который со стандартного 4:2:2 на 4:4:4 можно уменьшить визуальные потери даже при меньшем значении параметра quality.
          •     
            0
              
            4:1:1 вроде лучше
        •   
          +7
            
          Как то вы совсем по вершкам прошлись. Нету описания svgo, pngout, gifsicle, advpng. jpegtran бывает как минимум трех видов: jpeg group (оригинальный), jpeg-turbo, mozjpeg. Нету ссылки к очень популярному ImageOptim.app.
          Последний раз когда использовал pagespeed с nginx, было много заморочек c https.
          •     
            +1
              
            Еще есть optipng, который проще использовать, чем pngcrush, и сжимает сильнее.
            •     
              0
                
              или TruePNG, который еще сильнее жмет
          •   
            0
              
            Чем Imagemagick так лучше gd, что про один рассказано, а про второй — нет?
            •     
              +3
                
              хотябы тем, что gd при обработке изображения грузит его в память весь. Представьте ситуацию когда десяток пользователй грузят равы по 50 мегабайт. gd просто сьест всю память, imagemagick же разберется с этим без труда.

              Образно — сравнивать imagemagick и gd это как сравнивать болид формулы один с окой.
            •   
              +1
                
              Модуль pagespeed для nginx действительно может помочь со скоростью загрузки сайта, но может вдвое увеличить нагрузку на cpu. Будьте осторожны.
              •   
                +1
                  
                Кусок из доков по оптимизации от гугла…
                •   
                  0
                    
                  по поводу метаданных, где-то читал, что они используются для SEO продвижения картинок. Сейчас не смог найти ничего похожего в рекомендациях и гугла, и яндекса. Как сейчас с этим обстоит дела? В метаданных еще и копирайт указывается и дата съемки, нужно ли их удалять?
                  •     
                    0
                      
                    Возможно вы спутали с alt?
                    •     
                      0
                        
                      Google умеет искать по EXIF, так что теоретически его можно использовать для продвижения. Хотя речь скорее всего идет об alt.
                      •     
                        0
                          
                        нет, точно не alt. Вот что я имею в виду. ссылка. Тоже самое и про яндекс нашел
                    •   
                      +4
                        
                      На Хабре уже было множество содержательных статей (в том числе — в формате обзорных) по оптимизации графики, например, вот такая. Эта существенно от них отстает по качеству.
                      •     
                        +3
                          
                        Видимо, это потому что мы жалеем новичков, которые неделю на Хабре, и не сливаем их как в старые добрые времена.
                      •   
                        0
                          
                        Важная ремарка — все это имеет смысл в первую очередь тогда, когда изображения напрямую грузятся посредством тега img или background.
                        При той же lazy load загрузке изображений, подобного рода приемы уже не так критичны, хотя, конечно, и важны.
                        •   
                          0
                            
                          Еще момент, если нуно пожать картинки на локалке, то можно использовать "FileOptimizer". Он жмёт практически все форматы картинок (и не только картинок), также по умолчанию включено «сжатие без потерь».
                          Совет: лучше скачивать portable-версию, так будет проще заменять программу после выхода новой версии.
                          •   
                            0
                              
                            Игрался с этими штуками так и не смог приблизиться к результатам этой штуки — compressor.io
                            Кто сможет сможет достичь таких же результатов или лучше скиньте конфиги плиз :)
                            •     
                              0
                                
                              Он жмёт с потерями, иначе такого результата не добиться. Проверял оба режима, что Lossy, что Lossless выдают одинаковый результат
                              •     
                                0
                                  
                                Вода мокрая, соль солёная, а комперессор сжимает с потерями.
                                •     
                                  0
                                    
                                  Кэп, ты, похоже, не знаешь, в чём разница между Lossy и Lossless
                                  •     
                                    –1
                                      
                                    Знаю. Не будем холиварить.
                            •   
                              0
                                
                              Эх. Ну ведь совсем ни о чем пост. Зачем программы, когда гугл сам предлагает скачать у него же со страницы отчета оптимизированные картинки?
                              •   
                                0
                                  
                                > Утилита convert позволяет указывать параметр качества для сжатия, что поможет уменьшить размер картинки:

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

                                Это я к тому, что ставить самоцелью получение хороших очков/процентов в PageSpeed к реальной жизни не имеет отношения. Так же, как все эти «померяй скорость загрузки» сервисы постоянно ругаются на «картинки» yandex.metrik и google analytics, хотя «не знать» такие сервисы (хотя бы второй, если сама мерялка из-за бугра) просто стыдно.

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

                                Не статья, в общем, а грусть на грусти.
                                •   
                                  +2
                                    
                                  Jpegtran сжимает картинки без потерь

                                  На картинке-примере после этой операции чувак потерял полпальца и взгляд перевел на эту потерю. Неудачная иллюстрация сжатия без потерь.

                                0 коммент.:

                                Отправить комментарий