Как работает сжатие изображений без потерь Google Page Speed?

Когда вы запускаете плагин Google PageSpeed ​​для Firebug / Firefox на веб-сайте, он предложит случаи, когда изображение можно сжать без потерь, и предоставит ссылку для загрузки этого меньшего изображения.

Например:

• Сжатие без потерь http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg может сэкономить 33,5 КБ (85%).
• Сжатие без потерь http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg может сэкономить 18,5 КБ (77%).
• Сжатие без потерь http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png может сэкономить 262 Б (11%).
• Сжатие без потерь http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png может сэкономить 91 Б (51%).
• Сжатие без потерь http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm может сэкономить 61 Б (5%).

Это применимо как к файлам JPG, так и к PNG (я не тестировал GIF и другие).

Также обратите внимание на миниатюры Flickr (все эти изображения имеют размер 75x75 пикселей). Это довольно большая экономия. Если это действительно так здорово, почему Yahoo не применяет эту серверную часть ко всей своей библиотеке и не снижает нагрузку на хранилище и полосу пропускания?

Даже Stackoverflow.com означает небольшую экономию:

• Сжатие без потерь http://sstatic.net/stackoverflow/img/sprites.png?v=3 может сэкономить 1,7 КБ (уменьшение на 10%).
• Сжатие без потерь http://sstatic.net/stackoverflow/img/tag-chrome.png может сэкономить 11 Б (сокращение на 1%).

Я видел, как PageSpeed ​​предлагает довольно приличную экономию на файлах PNG, которые я создал с помощью функции Photoshop «Сохранить для Интернета».

Итак, мой вопрос: какие изменения они вносят в изображения, чтобы так их уменьшить? Я предполагаю, что для разных типов файлов есть разные ответы. Это действительно без потерь для JPG? И как они могут обыграть фотошоп? Следует ли мне относиться к этому с подозрением?

Если вас действительно интересуют технические детали, посмотрите исходный код:

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

Для файлов PNG они используют OptiPNG с методом проб и ошибок.

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
  PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
  PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

При применении всех четырех комбинаций сохраняется наименьший результат. Просто как тот.

(NB: optipngинструмент командной строки тоже делает это, если вы предоставите -o 2через -o 7)

Для файлов JPEG они используют jpeglib со следующими параметрами:

 JpegCompressionOptions()
     : progressive(false), retain_color_profile(false),
       retain_exif_data(false), lossy(false) {}

Точно так же WEBP сжимается с помощью libwebp со следующими параметрами:

  WebpConfiguration()
      : lossless(true), quality(100), method(3), target_size(0),
        alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

Также существует image_converter.cc, который используется для преобразования без потерь в самый маленький формат.

Я использую jpegoptimдля оптимизации файлов JPG и optipngдля оптимизации файлов PNG.

Если вы подключены bash, команда для оптимизации всех файлов JPG в каталоге (рекурсивно) без потерь:

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

Вы можете добавить -m[%]к jpegoptimизображениям JPG со сжатием с потерями, например:

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

Чтобы оптимизировать все PNG в каталоге:

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;

-o2- уровень оптимизации по умолчанию, вы можете изменить его с o2на o7. Обратите внимание, что более высокий уровень оптимизации означает более длительное время обработки.

Взгляните на http://code.google.com/speed/page-speed/docs/payload.html#CompressImages, где описаны некоторые методы / инструменты.

Это вопрос обмена процессорного времени кодировщика на эффективность сжатия. Сжатие - это поиск более коротких представлений, и если вы будете искать усерднее, вы найдете более короткие.

Также существует вопрос использования возможностей формата изображения в полной мере, например PNG8 + a вместо PNG24 + a, оптимизированные таблицы Хаффмана в JPEG и т. Д.

Photoshop на самом деле не очень старается сделать это при сохранении изображений для Интернета, поэтому неудивительно, что любой инструмент превосходит его.

Увидеть

• ImageOptim (без потерь) и
• ImageAlpha (с потерями) для файлов PNG меньшего размера ( высокоуровневое описание того, как это работает ) и
• JPEGmini / MozJPEG (с потерями) для лучшего компрессора JPEG.

Чтобы воспроизвести результаты сжатия JPG PageSpeed ​​в Windows:

Я смог получить точно такие же результаты сжатия, как и PageSpeed, используя версию jpegtran для Windows, которую вы можете получить на www.jpegclub.org/jpegtran . Я запустил исполняемый файл из командной строки DOS (используйте Пуск> CMD). Чтобы получить точно такой же размер файла (вплоть до байта), что и при сжатии PageSpeed, я определил оптимизацию Хаффмана следующим образом:

jpegtran -optimize source_filename.jpg output_filename.jpg

Для получения дополнительной справки по параметрам сжатия в командной строке просто введите: jpegtran

Или использовать автоматически сгенерированные изображения из вкладки PageSpeed ​​в Firebug:

Я смог последовать совету Pumbaa80, чтобы получить доступ к оптимизированным файлам PageSpeed. Надеюсь, приведенный здесь снимок экрана дает дополнительную ясность для среды FireFox. (Но мне не удалось получить доступ к локальной версии этих оптимизированных файлов в Chrome.)

И чтобы очистить беспорядочные имена файлов PageSpeed ​​с помощью Adobe Bridge и регулярных выражений:

Хотя PageSpeed ​​в FireFox смог сгенерировать для меня оптимизированные файлы изображений, он также изменил их имена, превратив их в простые имена, например:

nice_picture.jpg

в

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

Я обнаружил, что это обычная жалоба. Поскольку я не хотел переименовывать все свои изображения вручную, я использовал инструмент переименования Adobe Bridge вместе с регулярным выражением. Вы можете использовать другие команды / инструменты переименования, которые принимают регулярные выражения, но я подозреваю, что Adobe Bridge легко доступен для большинства из нас, работающих с проблемами PageSpeed!

1. Запустите Adobe Bridge
2. Выберите все файлы (используя Control A)
3. Выберите Инструменты> Пакетное переименование (или Control Shift R).
4. В поле Preset выберите «String Substitution». В полях «Новые имена файлов» теперь должно отображаться «Подстановка строк», за которым следует «Исходное имя файла».
5. Установите флажок «Использовать регулярное выражение».

6. В поле «Найти» введите регулярное выражение (которое выберет все символы, начиная с крайнего правого разделителя подчеркивания):

   _ (?!. * _) (. *) \. jpg $

7. В поле «Заменить на» введите:

   .jpg

8. При желании нажмите кнопку «Просмотр», чтобы просмотреть результаты предлагаемого пакетного переименования, затем закройте

9. Нажмите кнопку "Переименовать".

Обратите внимание, что после обработки Bridge отменяет выбор файлов, которые не были затронуты. Если вы хотите очистить все файлы .png, вам нужно повторно выбрать все изображения и изменить конфигурацию выше (для «png» вместо «jpg»). Вы также можете сохранить конфигурацию, указанную выше, в качестве предустановки, например «Очистить изображения в формате jpg PageSpeed», чтобы в будущем можно было быстро очистить имена файлов.

Снимок экрана конфигурации / Устранение неполадок

Если у вас возникли проблемы, возможно, некоторые браузеры могут неправильно отображать указанное выше выражение RegEx (виноваты мои escape-символы), поэтому скриншот конфигурации (вместе с этими инструкциями) см.

Как использовать инструмент пакетного переименования Adobe Bridge для очистки оптимизированных изображений PageSpeed ​​с беспорядочными именами файлов

На мой взгляд, лучший вариант, который эффективно обрабатывает большинство форматов изображений на ходу, - это обрезка . Он эффективно использует optipng, pngcrush, advpng и jpegoptim на основе формата изображения и обеспечивает почти идеальное сжатие без потерь.

Реализация довольно проста, если использовать командную строку.

sudo apt-get install trimage    
trimage -d images/*

и вуаля! :-)
Кроме того, вы найдете довольно простой интерфейс, позволяющий делать это вручную.

Есть очень удобный пакетный скрипт, который рекурсивно оптимизирует изображения под папкой с помощью OptiPNG (из этого блога ):

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G

ОДНА ЛИНИЯ!

Если вы ищете пакетную обработку, имейте в виду, что обрезка жалуется, если у вас нет Xserver avail. В этом случае просто напишите сценарий bash или php, чтобы сделать что-то вроде

<?php
    echo "Processing jpegs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
    echo "Processing pngs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>

Измените параметры в соответствии со своими потребностями.

Для окон есть несколько интерфейсов перетаскивания для облегчения доступа.

https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

Для файлов PNG я нашел этот для своего удовольствия, очевидно, 3 разных инструмента, заключенных в этот GIU. Просто перетащите и отпустите, и он сделает это за вас.

https://pnggauntlet.com/

Однако это требует времени, попробуйте сжать png-файл размером 1 МБ - я был поражен, сколько ЦП ушло на это сравнение сжатия, которое должно быть именно тем, что здесь происходит. Кажется, изображение сжимается на 100 способов, и выигрывает лучший: D

Что касается сжатия JPG, я считаю рискованным лишать цветовых профилей и всей дополнительной информации - однако - если все это делают - это бизнес-стандарт, поэтому я просто сделал это сам: D

Сегодня я сэкономил 113 МБ на 5500 файлах при установке WP, так что оно того стоит!