2010-10-10 9 views
14

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

Обратите внимание, что 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/>'); 
} 
+0

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

+1

PageSpeed ​​имеет в виду JPG (поскольку он фактически предоставляет JPG, который можно сохранить). Пользователи загружают фотографии. – StackOverflowNewbie

+0

Хм, странно, и JPEG ли он меньше, чем ваш автоматически созданный? –

ответ

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

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

+0

Я посмотрел на свойства изображений, сгенерированных ImageMagick. Он, похоже, сохранил метаданные. Значит, вы знаете, как я могу удалить это с помощью ImageMagick? Также кажется, что ImageMagick использует таблицы Хаффмана. См. Запись в формате JPEG по адресу http://www.imagemagick.org/script/formats.php. Разве это освобождает меня от необходимости исследовать jpegtran или jpegoptim? – StackOverflowNewbie

+0

mogrify -strip input.jpg, похоже, работает. Не уверен, что это лучший подход. – StackOverflowNewbie

+3

Каждый JPEG использует таблицы Хаффмана. Imagemagick, вероятно, всегда использует одни и те же таблицы Хаффмана, тогда как jpegoptim пытается найти лучшую, обычную таблицу Хаффмана. – Sjoerd

4

Чтобы свести к минимуму размеры изображений, вы должны удалить все метаданные. 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 
+0

Я не уверен, что это правда. Ссылка на внешние файлы означает, что браузер может использовать несколько процессоров, ядер и сетевых ссылок для запроса изображений (или любого другого ресурса). HTTP/1.1 имеет некоторые накладные расходы для нового запроса, который может перевесить эту выгоду, но HTTP/2.0 или SPDY (доступно во многих современных браузерах) могут использовать одно соединение для одновременного выполнения нескольких запросов. –

1

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

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