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

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

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

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

Для файлов 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 и _2 _ для оптимизации файлов 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

Я смог последовать совету 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, так что оно того стоит!