web-dev-qa-db-fra.com

Comment fonctionne la compression d'images sans perte de Page Speed ​​de Google?

Lorsque vous exécutez le plug-in PageSpeed ​​de Google pour Firebug/Firefox sur un site Web, il suggère les cas où une image peut être compressée sans perte et fournit un lien pour télécharger cette image plus petite.

Par exemple:

Ceci s’applique aux types de fichiers JPG et PNG (je n’ai pas testé GIF ni d’autres.)

Notez également les miniatures Flickr (toutes ces images mesurent 75x75 pixels.) Ce sont des économies assez importantes. Si cela est vraiment génial, pourquoi Yahoo n'applique-t-il pas ce côté serveur à l'ensemble de leur bibliothèque et ne réduit-il pas leurs charges de stockage et de bande passante?

Même Stackoverflow.com représente des économies très mineures:

J'ai vu PageSpeed ​​suggérer des économies assez intéressantes sur les fichiers PNG créés à l'aide de la fonction "Enregistrer pour le Web" de Photoshop.

Ma question est donc la suivante: quels changements apportent-ils aux images pour les réduire autant? J'imagine qu'il existe différentes réponses pour différents types de fichiers. Est-ce vraiment sans perte pour les JPG? Et comment peuvent-ils battre Photoshop? Devrais-je être un peu méfiant à ce sujet?

compressionimagingpagespeedgoogle-pagespeed
136
Drew Noakes

Si vous êtes vraiment intéressé par les détails techniques, consultez le code source: 

Pour les fichiers PNG, ils utilisent OptiPNG avec une approche d'essai et d'erreur.

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
  PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
  PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

Lorsque les quatre combinaisons sont appliquées, le résultat le plus petit est conservé. Aussi simple que cela.

(NB: L'outil de ligne de commande optipng fait la même chose si vous fournissez -o 2 à -o 7)

Pour les fichiers JPEG, ils utilisent jpeglib avec les options suivantes:

 JpegCompressionOptions()
     : progressive(false), retain_color_profile(false),
       retain_exif_data(false), lossy(false) {}

De même, WEBP est compressé avec libwebp avec les options suivantes:

  WebpConfiguration()
      : lossless(true), quality(100), method(3), target_size(0),
        alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

Il existe également image_converter.cc qui est utilisé pour convertir sans perte au plus petit format.

82
user123444555621

J'utilise jpegoptim pour optimiser les fichiers JPG et optipng pour optimiser les fichiers PNG.

Si vous êtes sur bash, la commande pour optimiser sans perte tous les fichiers JPG d'un répertoire (de manière récursive) est la suivante:

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

Vous pouvez ajouter -m[%] à jpegoptim pour compresser avec perte les images JPG, par exemple:

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

Pour optimiser tous les PNG d'un répertoire:

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;

-o2 est le niveau d'optimisation par défaut, vous pouvez le changer de o2 à o7. Notez que plus le niveau d'optimisation est long, plus le traitement est long.

46
Hoang Huynh

Jetez un coup d’oeil à http://code.google.com/speed/page-speed/docs/payload.html#CompressImages qui décrit certaines techniques/outils.

29
Amber

Il faut échanger le temps CPU de l'encodeur pour l'efficacité de la compression. La compression est une recherche de représentations plus courtes et si vous cherchez plus, vous en trouverez de plus courtes.

Il faut aussi utiliser au maximum les capacités de format d’image, par exemple. PNG8 + a au lieu de PNG24 + a, tables de Huffman optimisées en JPEG, etc.

Lorsque vous enregistrez des images sur le Web, Photoshop n’essaie pas vraiment de le faire. Il n’est donc pas surprenant que tout outil le surpasse.

Voir 

15
Kornel

Pour répliquer les résultats de compression JPG de PageSpeed ​​sous Windows:

J'ai pu obtenir exactement les mêmes résultats de compression que PageSpeed ​​en utilisant la version Windows de jpegtran que vous pouvez obtenir sur www.jpegclub.org/jpegtran . J'ai exécuté le fichier exécutable à l'aide de l'invite du DOS (utilisez Démarrer> CMD). Pour obtenir exactement la même taille de fichier (jusqu'au octet) que la compression PageSpeed, j'ai spécifié l'optimisation Huffman comme suit:

jpegtran -optimize source_filename.jpg output_filename.jpg

Pour plus d’aide sur les options de compression, à l’invite de commande, tapez simplement: jpegtran

Ou utiliser les images générées automatiquement à partir de l'onglet PageSpeed ​​dans Firebug:

J'ai pu suivre les conseils de Pumbaa80 pour accéder aux fichiers optimisés de PageSpeed. Espérons que la capture d'écran ici apporte davantage de clarté à l'environnement FireFox. (Mais je n'ai pas pu accéder à une version locale de ces fichiers optimisés dans Chrome.)

Et nettoyer les noms de fichiers Messy PageSpeed ​​en utilisant Adobe Bridge & Regular Expressions:

Bien que PageSpeed ​​dans FireFox ait été en mesure de générer des fichiers d’image optimisés pour moi, il a également changé leur nom en lui donnant un nom simple comme:

Nice_picture.jpg

dans 

Nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

J'ai découvert que cela semble être une plainte commune. Comme je ne voulais pas renommer toutes mes images à la main, j'ai utilisé l'outil Renommer d'Adobe Bridge avec une expression régulière. Vous pouvez utiliser d'autres commandes/outils de changement de nom acceptant les expressions régulières, mais je soupçonne qu'Adobe Bridge est facilement disponible pour la plupart d'entre nous qui travaillent avec des problèmes de PageSpeed! 

  1. Démarrer Adobe Bridge
  2. Sélectionner tous les fichiers (en utilisant Control A)
  3. Sélectionnez Outils> Renommer par lot (ou Control Shift R).
  4. Dans le champ Présélection, sélectionnez "Substitution de chaîne". Les champs Nouveaux noms de fichiers doivent maintenant afficher «Substitution de chaîne», suivie de «Nom de fichier d'origine».
  5. Cochez la case "Utiliser une expression régulière"

  6. Dans le champ "Rechercher", entrez l'expression régulière (qui sélectionnera tous les caractères commençant par le séparateur de soulignement le plus à droite): 

    _ (?!. * _) (. *) \. jpg $

  7. Dans le champ «Remplacer par», entrez:

    .jpg

  8. Cliquez éventuellement sur le bouton Aperçu pour voir les résultats du renommage par lot proposé, puis fermez-le.

  9. Cliquez sur le bouton Renommer

Notez qu'après le traitement, Bridge désélectionne les fichiers non affectés. Si vous souhaitez nettoyer tous vos fichiers .png, vous devez resélectionner toutes les images et modifier la configuration ci-dessus (pour "png" au lieu de "jpg"). Vous pouvez également enregistrer la configuration ci-dessus en tant que préréglage tel que "Nettoyer les images jpg PageSpeed" afin de pouvoir nettoyer rapidement les noms de fichiers. 

Capture d'écran de la configuration/Dépannage

Si vous rencontrez des problèmes, il est possible que certains navigateurs n'affichent pas correctement l'expression RegEx ci-dessus (blâmez mes caractères d'échappement). Pour une capture d'écran de la configuration (avec ces instructions), voir:

Utilisation de l'outil de changement de nom par lot d'Adobe Bridge pour le nettoyage des images à vitesse de page optimisée portant des noms de fichiers malpropres

13
Thor

À mon avis, la meilleure option qui gère efficacement la plupart des formats d'image en une fois est trimage . Elle utilise efficacement optipng, pngcrush, advpng et jpegoptim selon format d'image et offre une compression presque parfaite sans perte.

L'implémentation est assez facile si vous utilisez une ligne de commande. 

Sudo apt-get install trimage    
trimage -d images/*

et le tour est joué! :-)
De plus, vous trouverez une interface assez simple pour le faire manuellement.

10
Rohan

Il existe un script batch très pratique qui optimise de manière récursive les images sous un dossier à l'aide de OptiPNG (à partir de ce blog ):

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G

UNE LIGNE!

2
Digs

Si vous recherchez un traitement par lots, gardez à l’esprit que Trimage se plaint si vous ne disposez pas de Xserver. Dans ce cas, il suffit d'écrire un script bash ou php pour faire quelque chose comme

<?php
    echo "Processing jpegs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
    echo "Processing pngs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>

Modifiez les options pour répondre à vos besoins.

0
Nate

Pour Windows, il existe plusieurs interfaces drag'n'drop pour un accès facile.

https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

Pour les fichiers PNG, j’ai trouvé celui-ci pour mon plus grand plaisir, apparemment 3 outils différents emballés dans ce GIU. Il suffit de faire glisser et déposer et il le fait pour vous.

https://pnggauntlet.com/

Cependant, cela prend du temps, essayez de compresser un fichier png de 1Mo - j’ai été étonné de la quantité de CPU utilisée pour cette comparaison de compression, ce qui doit être ce qui se passe ici. Semble l'image est compressée de 100 façons et le meilleur gagne: D

En ce qui concerne la compression JPG, je sens qu'il est risqué de supprimer les profils de couleur et toutes les informations supplémentaires - cependant - si tout le monde le fait - c'est la norme commerciale, alors je l'ai fait moi-même: D

J'ai enregistré 113 Mo sur 5500 fichiers sur une installation de WP aujourd'hui, alors ça vaut vraiment le coup!

0
Kim Steinhaug