Compression de Google PageSpeed ​​et ImageMagick JPG

Question

Étant donné qu'une image téléchargée par l'utilisateur, j'ai besoin de créer plusieurs miniatures pour l'affichage sur un site Web. J'utilise ImageMagick et essaye de rendre Google PageSpeed ​​heureux. Malheureusement, quelle que soit la valeur quality que je spécifie dans la commande convert, PageSpeed ​​est toujours capable de suggérer de compresser l'image encore plus loin.

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

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

J'ai même testé la compression de l'image en utilisant 1 (elle a produit une image inutilisable, cependant) et PageSpeed ​​suggère toujours que je peux encore optimiser une telle image en "compressant sans perte" l'image. Je ne sais plus comment compresser une image avec ImageMagick. Des suggestions?

est ici un moyen rapide de tester ce que 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 peut contenir des commentaires, des vignettes ou des métadonnées, qui peuvent être enlevés.
• Il est parfois possible de compresser davantage les fichiers JPEG tout en conservant la même qualité. Ceci est possible si le programme qui a généré l'image n'a pas utilisé l'algorithme ou les paramètres optimaux pour compresser l'image. En recompressant les mêmes données, un optimiseur peut réduire la taille de l'image. Cela fonctionne en utilisant specific Huffman tables 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 au minimum les tailles d'image, vous devez supprimer toutes les métadonnées. ImageMagick peut le faire en ajoutant un -strip à la ligne de commande.

Avez-vous aussi considéré dans votre code HTML pour placer vos images miniatures en tant que données codées en ligne base64 dans le code HTML?

Cela peut rendre votre page web charge beaucoup plus rapide (même si la taille devient un peu plus), car il enregistre le navigateur d'exécuter plusieurs requêtes pour tous les fichiers d'image (les images) qui sont référencés dans le code HTML.

Votre 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 les base64 données d'image comme ceci:

base64 -i image.jpg -o image.b64 

Answer 3

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

Malgré donner des gains de performance cependant, il est actuellement pris en charge que par le chrome et l'opéra (http://caniuse.com/webp)