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

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

например:

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

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

даже Stackoverflow.com выступает за некоторые очень незначительные сбережения:

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

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

9 136
compression python-imaging-library pagespeed google-pagespeed

9 ответов:

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

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

82

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

45

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

29

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

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

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

посмотреть

15

для репликации результатов сжатия JPG PageSpeed в Windows:

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

jpegtran -optimize source_filename.jpg output_filename.jpg

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

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

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

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

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

nice_picture.jpg

на 

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

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

  1. Запустить Adobe Bridge
  2. выберите все файлы (с помощью элемента управления A)
  3. выберите инструменты > пакетное переименование (или сдвиг управления R)
  4. в поле предустановки выберите "подстановка строк". Теперь должны отображаться новые поля имен файлов "Замена строки", а затем "исходное имя файла"
  5. установите флажок "Использовать регулярное выражение"

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

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

  7. в поле "заменить на" введите:

    .jpg

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

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

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

Скриншот Конфигурации / Устранение Неполадок

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

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

13

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

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

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

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

10

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

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

ОДНА СТРОКА!

2

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

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

0

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

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

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

https://pnggauntlet.com/

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

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

Я сохранил 113 Мб на 5500 файлов на WP установить сегодня, так что его определенно стоит!

0