Как работает Google Speed ​​Page сжатия изображений без потерь? - PullRequest
Новая
       11

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

136 голосов
/ 27 марта 2011

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

Например:

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

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

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

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

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

Ответы [ 9 ]

82 голосов
/ 05 декабря 2012

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

Для файлов 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)
};

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

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

46 голосов
/ 16 ноября 2013

Я использую 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 голосов
/ 27 марта 2011

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

15 голосов
/ 15 декабря 2011

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

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

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

См.

13 голосов
/ 23 декабря 2012

Для репликации результатов сжатия 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 выберите «Подстановка строк». В полях «Новые имена файлов» теперь должно отображаться «Подстановка строк», а затем «Исходное имя файла»
  5. Включить флажок «Использовать регулярное выражение»

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

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

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

    .jpg

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

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

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

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

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

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

10 голосов
/ 27 февраля 2014

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

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

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

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

2 голосов
/ 08 июля 2015

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

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

ONE LINE!

0 голосов
/ 12 октября 2016

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

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

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

https://pnggauntlet.com/

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

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

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

0 голосов
/ 27 октября 2014

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

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

...