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

Question

Lorsque vous exécutez le plugin 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 :

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

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

Notez également les vignettes Flickr (toutes ces images font 75x75 pixels.) Ce sont des économies assez importantes. Si c'est vraiment si génial, pourquoi Yahoo n'applique-t-il pas cette méthode 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 permet de réaliser de très petites économies :

• Compression sans perte http://sstatic.net/stackoverflow/img/sprites.png?v=3 pourrait économiser 1.7KiB (10% de réduction).
• Compression sans perte http://sstatic.net/stackoverflow/img/tag-chrome.png pourrait permettre d'économiser 11B (réduction de 1%).

J'ai vu PageSpeed suggérer des économies assez décentes sur des 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 à ce point ? Je suppose qu'il y a 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 ?

Answer 1

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 en procédant par tâtonnements.

// 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é. C'est aussi simple que cela.

(N.B. : Le optipng L'outil en ligne de commande le fait aussi si vous fournissez -o 2 par le biais de -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 existe également image_converter.cc qui est utilisé pour convertir sans perte au plus petit format.

Answer 2

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 JPGs dans un répertoire (récursivement) est :

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

Vous pouvez ajouter -m[%] a 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 PNGs dans 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 à partir de o2 a o7 . Notez que plus le niveau d'optimisation est élevé, plus le temps de traitement est long.

Answer 3

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

Answer 4

Il s'agit d'échanger le temps du processeur 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 trouverez des représentations plus courtes.

Il s'agit également d'utiliser au maximum les capacités des formats d'image, par exemple PNG8+a au lieu de PNG24+a, tables de Huffman optimisées en JPEG, etc.

Photoshop ne fait pas vraiment d'efforts dans ce sens lorsqu'il enregistre des images pour le web, il n'est donc pas surprenant que n'importe quel outil le batte.

Voir ImageOptim (sans perte) et ImageAlpha (avec perte) pour des fichiers PNG plus petits et JPEGmini (avec perte) pour un meilleur compresseur JPEG.

Answer 5

Pour reproduire 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 à l'adresse suivante www.jpegclub.org/jpegtran . J'ai lancé l'exécutable en utilisant l'invite DOS (utiliser 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 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 avoir accès aux fichiers optimisés de PageSpeed. En espérant que la capture d'écran aquí apporte plus de clarté pour l'environnement FireFox. (Mais je n'ai pas pu avoir accès à une version locale de ces fichiers optimisés dans Chrome).

Et pour nettoyer les noms de fichiers PageSpeed désordonnés en utilisant Adobe Bridge et des expressions régulières :

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

nice_picture.jpg

en

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

J'ai découvert que cela semble être une plainte courante. Comme je ne voulais pas renommer toutes mes photos à la main, j'ai utilisé l'outil de renommage d'Adobe Bridge ainsi qu'une expression régulière. Vous pouvez utiliser d'autres commandes/outils de renommage qui acceptent les expressions régulières, mais je pense qu'Adobe Bridge est facilement disponible pour la plupart d'entre nous qui travaillent sur des problèmes de vitesse de page !

1. Lancez Adobe Bridge

2. Sélectionnez tous les fichiers (en utilisant le contrôle A)

3. Sélectionnez Outils > Renommer par lots (ou Control Shift R).

4. Dans le champ Preset, sélectionnez "String Substitution". Les champs "New Filenames" devraient maintenant afficher "String Substitution", suivi de "Original Filename".

5. Activez la case à cocher intitulée "Utiliser une expression régulière".

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

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

7. Dans le champ "Remplacer par", entrez :

   .jpg

8. En option, cliquez sur le bouton Aperçu pour voir les résultats de la proposition de renommage par lots, 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 sous la forme d'un 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 la configuration / Dépannage

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

Comment utiliser l'outil de renommage par lots d'Adobe Bridge pour nettoyer les images PageSpeed optimisées dont le nom de fichier est confus ?