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

StackOverflow https://stackoverflow.com/questions/5451597

Question

Lorsque vous exécutez le plugin PageSpeed ​​de Google pour Firebug/Firefox sur un site Web, il suggérera des cas dans lesquels une image peut être compressée sans perte et fournira un lien pour télécharger cette image plus petite.

Par exemple:

Cela s'applique aux types de fichiers JPG et PNG (je n'ai pas testé GIF ou autres.)

Notez également les vignettes Flickr (toutes ces images font 75x75 pixels.) Elles représentent des économies assez importantes.Si c'est vraiment si génial, pourquoi Yahoo n'applique-t-il pas ce côté serveur à l'ensemble de sa bibliothèque et ne réduit-il pas ses 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 décentes sur les fichiers PNG que j'ai créés à l'aide de la fonctionnalité « Enregistrer pour le Web » de Photoshop.

Ma question est donc la suivante : quels changements apportent-ils aux images pour les réduire autant ?Je suppose 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 ?Dois-je m'en méfier un peu ?

Était-ce utile?

La solution

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 par essais et erreurs

// 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 plus petit résultat est conservé.Aussi simple que cela.

(N.B. :Le optipng l'outil de ligne de commande le fait également si vous fournissez -o 2 à travers -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é en utilisant libwebp avec ces options :

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

Il y a aussi image_converter.cc qui est utilisé pour convertir sans perte au plus petit format.

Autres conseils

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

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

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

Vous pouvez ajouter -m[%] à jpegoptim pour compresser avec perte des 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 modifier depuis o2 à o7.Notez qu'un niveau d'optimisation plus élevé signifie un temps de traitement plus long.

Jeter un coup d'œil à http://code.google.com/speed/page-speed/docs/payload.html#CompressImages qui décrit certaines des techniques/outils.

Il s'agit d'échanger le temps CPU de l'encodeur contre l'efficacité de la compression.La compression est une recherche de représentations plus courtes, et si vous cherchez plus fort, vous en trouverez des plus courtes.

Il s’agit également d’utiliser au maximum les capacités du format d’image, par ex.PNG8+a au lieu de PNG24+a, tableaux de Huffman optimisés en JPEG, etc.

Photoshop ne s'efforce pas vraiment de le faire lors de l'enregistrement d'images pour le Web, il n'est donc pas surprenant qu'un outil le batte.

Voir

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é l'exécutable à l'aide de l'invite DOS (utilisez Démarrer > CMD).Pour obtenir exactement la même taille de fichier (à l'octet près) que la compression PageSpeed, j'ai spécifié l'optimisation de 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 pour 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.J'espère que la capture d'écran ici fournit davantage de clarté pour l'environnement FireFox.(Mais je n'ai pas pu accéder à une version locale de ces fichiers optimisés dans Chrome.)

Et pour nettoyer les noms de fichiers PageSpeed ​​en désordre à l'aide d'Adobe Bridge et des expressions régulières :

Bien que PageSpeed ​​dans FireFox ait pu générer des fichiers image optimisés pour moi, il a également modifié leurs noms en les transformant en noms simples tels que :

nice_picture.jpg

dans 

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

J'ai découvert que cela semble être une plainte courante.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 renommage qui acceptent 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électionnez tous les fichiers (à l'aide du contrôle A)
  3. Sélectionnez Outils > Renommer par lots (ou Control Shift R)
  4. Dans le champ Préréglage, sélectionnez « Substitution de chaîne ».Les champs Nouveaux noms de fichiers devraient désormais afficher « Substitution de chaîne », suivi de « Nom de fichier original ».
  5. Cochez la case intitulée « Utiliser l'expression régulière »

  6. Dans le champ « Rechercher », saisissez 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 », saisissez :

    .jpg

  8. Si vous le souhaitez, cliquez sur le bouton Aperçu pour voir les résultats de renommage par lots proposés, puis fermez

  9. Cliquez sur le bouton Renommer

Notez qu'après le traitement, Bridge désélectionne les fichiers qui n'ont pas été 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 PageSpeed ​​jpg" afin de pouvoir nettoyer rapidement les noms de fichiers à l'avenir.

Capture d'écran de configuration/dépannage

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

Comment utiliser l'outil de renommage par lots d'Adobe Bridge pour nettoyer les images PageSpeed ​​optimisées qui ont des noms de fichiers désordonnés

À mon avis, la meilleure option qui gère efficacement la plupart des formats d'image à la fois est garniture.Il utilise efficacement optipng, pngcrush, advpng et jpegoptim basé sur le format de l'image et offre une compression sans perte presque parfaite.

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

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

et voilà !:-)
De plus, vous trouverez une interface assez simple pour le faire manuellement.

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

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

UNE LIGNE!

Si vous recherchez un traitement par lots, gardez à l'esprit les plaintes de trimage si vous ne disposez pas de Xserver.Dans ce cas, écrivez simplement 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 en fonction de vos besoins.

Pour Windows, il existe plusieurs interfaces glisser-déposer pour un accès facile.

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

Pour les fichiers PNG, j'ai trouvé celui-ci pour mon plaisir, apparemment 3 outils différents enveloppés dans cette GIU.Faites simplement glisser et déposez et il le fait pour vous.

https://pnggauntlet.com/

Cela prend du temps cependant, essayez de compresser un fichier png de 1 Mo - j'ai été étonné de la quantité de CPU utilisée dans cette comparaison de compression, ce qui doit être ce qui se passe ici.On dirait que l'image est compressée de 100 façons et la meilleure gagne :D

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

J'ai économisé 113 Mo sur 5 500 fichiers sur une installation WP aujourd'hui, donc ça vaut vraiment le coup !

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top