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

Ответ 1

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

• 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)
};

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

(N.B.: Инструмент командной строки 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, который используется для преобразования без потерь в наименьший формат.

Ответ 2

Я использую 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. Обратите внимание, что более высокий уровень оптимизации означает более длительное время обработки.

Ответ 3

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

Ответ 4

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

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

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

См.

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

Ответ 5

Чтобы реплицировать результаты сжатия JPG с сжатием страницы в 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 Rename вместе с регулярным выражением. Вы можете использовать другие команды/инструменты переименования, которые принимают регулярные выражения, но я подозреваю, что Adobe Bridge легко доступен для большинства из нас, работающих с проблемами PageSpeed!

• Запустите Adobe Bridge
• Выбрать все файлы (с помощью элемента управления A)
• Выберите "Инструменты" > "Пакетное переименование" (или "Сдвиг управления" )
• В поле Preset выберите "String Substitution". В полях "Новые имена файлов" теперь должно отображаться "String Substitution", а затем "Original Filename"
• Включить флажок "Использовать регулярное выражение"

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

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

• В поле "Заменить на" введите:

  .jpg

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

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

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

Конфигурация Скриншот/Поиск и устранение неисправностей

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

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

Ответ 6

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

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

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

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

Ответ 7

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

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

ОДНА ЛИНИЯ!

Ответ 8

Если вы ищете пакетную обработку, имейте в виду, что тримаг жалуется, если у вас нет поддержки Xserver. В этом случае просто напишите 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 {} \;");
?>

Измените параметры, чтобы удовлетворить ваши потребности.

Ответ 9

Для окон есть несколько интерфейсов drag'n'drop для легкого доступа.

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

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

https://pnggauntlet.com/

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

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

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