Comment fonctionne la compression d'image sans perte de vitesse de page de Google?

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

Par exemple:

• La compression sans perte de http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg pourrait économiser 33,5 Ko (réduction de 85%).
• La compression sans perte de http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg pourrait économiser 18,5 Ko (réduction de 77%).
• La compression sans perte de http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png pourrait économiser 262 o (réduction de 11%).
• La compression sans perte de http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png pourrait économiser 91B (réduction de 51%).
• La compression sans perte de http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm pourrait économiser 61B (réduction de 5%).

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

Notez également les miniatures Flickr (toutes ces images font 75x75 pixels.) Ce sont des économies assez importantes. Si c'est vraiment génial, pourquoi Yahoo n'applique-t-il pas ce côté serveur à toute 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:

• La compression sans perte de http://sstatic.net/stackoverflow/img/sprites.png?v=3 pourrait économiser 1,7 Ko (réduction de 10%).
• La compression sans perte de http://sstatic.net/stackoverflow/img/tag-chrome.png pourrait économiser 11B (réduction de 1%).

J'ai vu PageSpeed ​​suggérer des économies assez décentes sur les fichiers PNG que j'ai 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? 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?

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

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

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.

(NB: l' optipngoutil de ligne de commande le fait aussi si vous fournissez -o 2via -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é à l'aide de 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.

J'utilise jpegoptimpour optimiser les fichiers JPG et optipngpour optimiser les fichiers PNG.

Si vous êtes sur bash, la commande pour optimiser sans perte tous les JPG d'un répertoire (récursivement) est:

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

Vous pouvez ajouter -m[%]à jpegoptimla lossy compresser 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 {} \;

-o2est le niveau d'optimisation par défaut, vous pouvez le changer de o2à o7. Notez qu'un niveau d'optimisation plus élevé signifie un temps de traitement plus long.

Jetez un œ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 recherchez plus dur, vous en trouverez des plus courtes.

Il s'agit également d'utiliser au maximum les capacités de format d'image, par exemple PNG8 + a au lieu de PNG24 + a, des tables de Huffman optimisées 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

• ImageOptim (sans perte) et
• ImageAlpha (avec perte) pour les fichiers PNG plus petits ( description détaillée de son fonctionnement ) et
• JPEGmini / MozJPEG (avec perte) pour un meilleur compresseur JPEG.

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 en utilisant l'invite DOS (utilisez Démarrer> CMD). Pour obtenir exactement la même taille de fichier (jusqu'à l'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 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. Espérons que la capture d'écran ici apporte plus 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 d'expressions régulières:

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

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émarrez Adobe Bridge
2. Sélectionnez tous les fichiers (à l'aide du contrôle A)
3. Sélectionnez Outils> Renommer par lots (ou Ctrl Maj R)
4. Dans le champ Preset, sélectionnez "Substitution de chaînes". Les champs Nouveaux noms de fichiers doivent maintenant afficher «Substitution de chaîne», suivi 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 au 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 changement de nom 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 voulez 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 à 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 (blâmez mes caractères d'échappement), donc pour une capture d'écran de la configuration (avec ces instructions), voir:

Comment utiliser l'outil de changement de nom par lots d'Adobe Bridge pour nettoyer les images PageSpeed ​​optimisées dont les noms de fichiers sont désordonnés

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

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

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

et voila! :-)
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 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 que trimage se plaint 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 les fenêtres, 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 ce 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 voir combien de CPU a été investi dans cette comparaison de compression qui doit être ce qui se passe ici. Il semble que l'image est compressée de 100 façons et que la meilleure 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 économisé 113 Mo sur 5500 fichiers sur une installation WP aujourd'hui, donc ça vaut vraiment le coup!