Сжатие JPG в 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/>');
}

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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