Сжатие Google PageSpeed ​​и ImageMagick JPG

Учитывая загруженное пользователем изображение, мне нужно создать его различные эскизы для отображения на веб-сайте. Я использую ImageMagick и пытаюсь порадовать Google PageSpeed. К сожалению, независимо от того, какое значение quality я укажу в команде convert, PageSpeed ​​все равно может предложить еще большее сжатие изображения.

Обратите внимание, что http://www.imagemagick.org/script/command-line-options.php?ImageMagick=2khj9jcl1gd12mmiu4lbo9p365#quality упоминает:

Для форматов изображений JPEG ... качество равно 1 [обеспечивает] самое низкое качество изображения и максимальное сжатие ....

На самом деле я даже тестировал сжатие изображения с помощью 1 (хотя оно создало непригодное для использования изображение), и PageSpeed ​​по-прежнему предполагает, что я все еще могу оптимизировать такое изображение, «сжав без потерь» изображение. Я больше не знаю, как сжимать изображение с помощью ImageMagick. Есть предложения?

Вот быстрый способ проверить, о чем я говорю:

assert_options(ASSERT_BAIL, TRUE);

// TODO: specify valid image here
$input_filename = 'Dock.jpg';

assert(file_exists($input_filename));

$qualities = array('100', '75', '50', '25', '1');
$geometries = array('100x100', '250x250', '400x400');

foreach($qualities as $quality)
{
    echo("<h1>$quality</h1>");
    foreach ($geometries as $geometry)
    {
        $output_filename = "$geometry-$quality.jpg";

        $command = "convert -units PixelsPerInch -density 72x72 -quality $quality -resize $geometry $input_filename $output_filename";
        $output  = array();
        $return  = 0;
        exec($command, $output, $return);

        echo('<img src="' . $output_filename . '" />');

        assert(file_exists($output_filename));
        assert($output === array());
        assert($return === 0);
    }

    echo ('<br/>');
}

person StackOverflowNewbie    schedule 10.10.2010    source источник
comment
Я думаю, он хочет, чтобы вы попробовали формат без потерь, такой как PNG. Иногда это может улучшить сжатие, особенно для небольших изображений; но на самом деле это зависит от типа загружаемого вами изображения.   -  person Tim Fountain    schedule 10.10.2010
comment
PageSpeed ​​относится к JPG (поскольку он фактически предоставляет JPG, который можно сохранить). Пользователи загружают фотографии.   -  person StackOverflowNewbie    schedule 10.10.2010
comment
Хм, странно, получается, JPEG меньше, чем ваш автоматически созданный?   -  person Tim Fountain    schedule 10.10.2010
comment
@ Тим, да будет. Попробуйте сами PageSpeed ​​для Firebug, чтобы увидеть, что означает OP. Я только что задал связанный с этим вопрос: stackoverflow.com/questions/5451597/   -  person Drew Noakes    schedule 27.03.2011
comment
По моему опыту, единственная оптимизация, которую Google Page Speed ​​делает для JPEG, - это удаление ненужных метаданных. Хотя это правда, что в этом нет необходимости, для большинства изображений на это приходится относительно мало байтов - этого недостаточно, чтобы иметь значение для больших изображений, а если вы используете маленькие изображения - вам следует использовать спрайт. Обычно советы и оптимизация JPEG в Page Speed ​​фокусируются не на той проблеме.   -  person Chris Moschini    schedule 26.06.2012


Ответы (3)


  • JPEG может содержать комментарии, эскизы или метаданные, которые можно удалить.
  • Иногда можно сжимать файлы JPEG больше, сохраняя при этом то же качество. Это возможно, если программа, создавшая изображение, не использовала оптимальный алгоритм или параметры для сжатия изображения. Повторно сжав одни и те же данные, оптимизатор может уменьшить размер изображения. Это работает за счет использования для сжатия определенных таблиц Хаффмана.

Вы можете запустить jpegtran или jpegoptim в созданный файл, чтобы еще больше уменьшить его размер.

person Sjoerd    schedule 10.10.2010
comment
Я посмотрел на свойства изображений, сгенерированных ImageMagick. Похоже, метаданные сохранились. Итак, вы знаете, как я могу удалить это с помощью ImageMagick? Кроме того, похоже, что ImageMagick использует таблицы Хаффмана. См. Запись о JPEG на странице imagemagick.org/script/formats.php. Избавляет ли это меня от необходимости изучать jpegtran или jpegoptim? - person StackOverflowNewbie; 10.10.2010
comment
mogrify -strip input.jpg кажется, работает. Однако не уверен, что это лучший подход. - person StackOverflowNewbie; 10.10.2010
comment
Каждый JPEG использует таблицы Хаффмана. Imagemagick, вероятно, всегда использует одни и те же таблицы Хаффмана, тогда как jpegoptim пытается найти лучшую настраиваемую таблицу Хаффмана. - person Sjoerd; 10.10.2010
comment
mogrify -strip input.jpg, похоже, удовлетворил PageSpeed. Спасибо! - person StackOverflowNewbie; 10.10.2010
comment
@Sjoerd: согласно документации ImageMagick (imagemagick.org/script/formats.php) , По умолчанию мы вычисляем оптимальные таблицы кодирования Хаффмана для формата JPEG. - person Joe Lencioni; 18.09.2012

Чтобы еще больше уменьшить размеры изображения, вам следует удалить все метаданные. ImageMagick может сделать это, добавив -strip в командную строку.

Вы также рассматривали возможность размещения миниатюрных изображений как данных в кодировке inline-d base64 в свой HTML?

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

Ваш HTML-код для такого изображения будет выглядеть так:

 <IMG SRC="data:image/png;base64,
         iVBORw0KGgoAAAANSUhEUgAAAM4AAABJAQMAAABPZIvnAAAABGdBTUEAALGPC/xh
         BQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAA
         OpgAABdwnLpRPAAAAAZQTFRFAAAA/wAAG/+NIgAAAAF0Uk5TAEDm2GYAAAABYktH
         RACIBR1IAAAACXBIWXMAAABIAAAASABGyWs+AAAB6ElEQVQ4y+3UQY7bIBQG4IeQ
         yqYaLhANV+iyi9FwpS69iGyiLuZYpepF6A1YskC8/uCA7SgZtVI3lcoiivkIxu/9
         MdH/8U+N6el2pk0oFyibWyr1Q3+PlO2NqJV+/BnRPMjcJ9zrfJ/U+zQ9oAvo+QGF
         d+npPqFQn++TXElkrEpEJhAtlTBR6dNHUuzIMhFnEhxAmJDkKxlmt7ATXDDJYcaE
         r4Txqtkl42VYSH+t9KrD9b5nxZeog/LWGVHprGInGWVQUTvjDWXca5KdsowqyGSc
         DrZRlGlQUl4kQwpUjiSS9gI9VdECZhHFQ2I+UE2CHJQfkNxTNKCl0RkURqlLowJK
         1h1p3sjc0CJD39D4BIqD7JvvpH/GAxl2/YSq9mtHSHknga7OKNOHKyEdaFC2Dh1w
         9VSJemBeGuHgMuh24EynK03YM1Lr83OjUle38aVSfTblT424rl4LhdglsUag5RB5
         uBJSJBIiELSzaAeIN0pUlEeZEMeClC4cBuH6mxOlgPjC3uLproUCWfy58WPN/MZR
         86ghc888yNdD0Tj8eAucasl2I5LqX19I7EmEjaYjSb9R/G1SYfQA7ZBuT5H6WwDt
         UAfK1BOJmh/eZnKLeKvZ/vA8qonCpj1h6djfbqvW620Tva36++MXUkNDlFREMVkA
         AAAldEVYdGRhdGU6Y3JlYXRlADIwMTItMDgtMjJUMDg6Mzc6NDUrMDI6MDBTUnmt
         AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDEyLTA4LTIyVDA4OjM3OjQ1KzAyOjAwIg/B
         EQAAAA50RVh0bGFiZWwAImdvb2dsZSJdcbX4AAAAAElFTkSuQmCC"
  ALT="google" WIDTH=214  HEIGHT=57  VSPACE=5 HSPACE=5 BORDER=0 />

И вы должны создать данные изображения в кодировке base64 следующим образом:

base64  -i image.jpg  -o image.b64
person Kurt Pfeifle    schedule 22.08.2012
comment
Я не уверен, что это правда. Ссылка на внешние файлы означает, что браузер может использовать несколько процессоров, ядер и сетевых ссылок для запроса изображений (или любого другого ресурса). HTTP / 1.1 имеет некоторые накладные расходы для нового запроса, которые могут перевесить это преимущество, но HTTP / 2.0 или SPDY (доступны во многих современных браузерах) могут использовать одно соединение для одновременной отправки нескольких запросов. - person JP.; 21.01.2014

Google выполняет эти расчеты на основе своего формата изображения WebP (https://developers.google.com/speed/webp/).

Несмотря на повышение производительности, в настоящее время он поддерживается только в Chrome и Opera (http://caniuse.com/webp )

person Greg Funtusov    schedule 17.05.2014