Google PageSpeed & ImageMagick la compression JPG

Question

Compte tenu de l'utilisateur image téléchargée, j'ai besoin de créer différentes vignettes pour afficher sur un site internet.Je suis en utilisant ImageMagick et d'essayer de faire de Google PageSpeed heureux.Malheureusement, peu importe ce que quality valeur-je indiquer dans la convert commande, PageSpeed est toujours en mesure de vous suggérer la compression de l'image encore plus loin.

Notez que http://www.imagemagick.org/script/command-line-options.php?ImageMagick=2khj9jcl1gd12mmiu4lbo9p365#quality mentions:

Pour le JPEG ...les formats d'image, la qualité est de 1 [fournit] plus bas la qualité de l'image et de la compression plus élevée ....

J'ai même testé la compression de l'image à l'aide de 1 (il se produit une inutilisables image, tout de même) et PageSpeed suggère encore que je peux encore optimiser l'image par "la compression sans perte" de l'image.Je ne sais pas comment compresser une image plus utiliser ImageMagick. Toutes les suggestions?

Voici un moyen rapide de tester de quoi je parle:

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/>');
}

Answer 1

• Le JPEG peuvent contenir des commentaires, des vignettes ou des méta-données, qui peut être enlevée.
• Parfois, il est possible de compresser des fichiers JPEG de plus, tout en gardant la même qualité.Ceci est possible si le programme qui a généré l'image n'a pas utilisé l'algorithme optimal des paramètres de compresser l'image.Par recompresser ensuite les mêmes données, un optimiseur peut réduire la taille de l'image.Cela fonctionne en utilisant spécifiques des tables de Huffman pour la compression.

Vous pouvez exécuter jpegtran ou jpegoptim sur votre fichier créé, afin de réduire davantage la taille.

Answer 2

Pour réduire la taille d'une image encore plus, vous devez supprimer toutes les méta-données.ImageMagick pouvez le faire en ajoutant un -strip à l'invite de commande.

Avez-vous aussi considéré à mettre vos images miniatures en ligne-d des données encodées en base64 dans votre code HTML?

Cela peut rendre votre chargement de la page web beaucoup plus rapide (même si la taille est un peu plus gros), car il permet d'économiser le navigateur de l'exécution de plusieurs requêtes pour tous les fichiers de l'image (les images) qui sont référencés dans le code HTML.

Code HTML pour une telle image devrait ressembler à ceci:

 <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 />

Et vous créez la encodées en base64 les données de l'image comme ceci:

base64  -i image.jpg  -o image.b64

Answer 3

Google effectue ces calculs basés sur le format d'image WebP (https://developers.google.com/speed/webp/).

Malgré des gains de performances, il est actuellement pris en charge uniquement par chrome et opera (http://caniuse.com/webp)