Оптимизация картинок для 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 39,35
    Компания
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 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.
        • +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 сжимает картинки без потерь

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

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                  Самое читаемое