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

    Нет предела совершенству, и 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 сделает всю оптимизацию сам, но его нужно собирать.
    .io
    0.00
    Company
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 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 сжимает картинки без потерь

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

                                    Only users with full accounts can post comments. Log in, please.