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

138

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

Например:

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

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

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

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

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

compression  imaging  pagespeed  google-pagespeed 
— Дрю Ноукс
источник
Похоже, Pagespeed теперь требует сжатия с потерями. Ранее в результатах было сказано: «Сжатие без потерь xxx.jpg может сэкономить xx kb (сокращение xx%)». Теперь он говорит: «Сжатие xxx.jpg может сэкономить xx kb (уменьшение xx%)». Важно отметить, что Google, похоже, требует сжимать с потерями только меньшие изображения (эскизы и т. Может ли кто-нибудь выяснить, какие инструменты и параметры сжатия с потерями использует Google?
— Мартин

Ответы:

83

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

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

— user123444555621
источник
3
В частности, keep_color_profile (false) для JPEG может быть плохой идеей. По мере того как дисплеи с расширенной цветовой гаммой становятся все более распространенными, четко определенные инструкции по передаче цвета становятся неоднозначными. Если исходное изображение было закодировано sRGB, это все равно будет работать в некоторых браузерах (Safari, Firefox с модификацией about: config), в то время как в других только фактически помеченные изображения могут управляться цветом (Firefox по умолчанию). Конечно, браузерам без каких-либо возможностей управления цветом все равно…
— CO
2
Я бегал optipng file.png -o7и даже близко не подошел к тому, что показывает Google. Возможно, они конвертируют в SVG, когда это возможно?
— Nateowami 04
@Nateowami У меня была такая же проблема ... для некоторых PNG Google работает лучше, чем optipng -o7. Для этого вы можете загрузить оптимизированные изображения с самого веб-сайта Pagespeed.
— chrisvdb
46

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

— Хоанг Хынь
источник
29

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

— Янтарь
источник
1
Спасибо за ссылку. Думаю, я действительно хочу узнать больше о том, какие виды избыточности есть в файлах изображений, которые можно удалить, если размер файла является вашей основной задачей. Я знаю, что эта информация есть в сети, я просто хотел найти хорошее место, чтобы сопоставить ее здесь, на SO.
— Дрю Ноукс,
Я использую специальный инструмент сборки, который сжимает изображения с помощью optipng и pngcrush, а затем выбирает файл меньшего размера. Тем не менее, Page Speed ​​жалуется на неоптимальные изображения. Итак, какой инструмент они действительно используют?
— user123444555621
@ Pumbaa80 Вы также можете попробовать advsys.net/ken/util/pngout.htm (где конкретно говорится, что иногда он может иметь меньшие размеры, чем optipng и pngcrush).
— Эмбер
Я только что узнал, что Page Speed ​​действительно использует optipng с настраиваемой оболочкой, которая определяет лучшие параметры конфигурации. @Amber Не вариант, я не использую Windows;)
— user123444555621
15

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

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

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

Увидеть

— Корнель
источник
Единственный ответ, который пытается ответить на фактический вопрос, который на самом деле задал операционный директор, вместо другого вопроса «как я могу максимально сжать свои изображения»? lol
— toddmo
13

Чтобы воспроизвести результаты сжатия 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 ​​с беспорядочными именами файлов

— Тор
источник
Спасибо, что поделились этим!
— rotaercz
1
Если вы используете IIS, PageSpeed ​​недавно был перенесен в Windows и автоматически выполняет те же оптимизации. iispeed.com Для наилучшего уменьшения, хотя и без каких-либо потерь, я массово конвертировал целые каталоги файлов JPEG с помощью JPEGmini jpegmini.com
— Джеймс Моберг
Похоже, что для Firebug больше нет расширения PageSpeed ​​Extension.
— Стефан Шильке
10

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

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

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

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

— Рохан
источник
2
Есть ли альтернативы для Windows?
— Mathias Lykkegaard Lorenzen
2

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

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

ОДНА ЛИНИЯ!

— Раскопки
источник
1
FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full "%G" если у вас есть пробелы в имени файла
— Нед Мартин
0

Если вы ищете пакетную обработку, имейте в виду, что обрезка жалуется, если у вас нет 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

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

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

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

https://pnggauntlet.com/

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

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

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

— Ким Стейнхауг
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.