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

138

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:

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:

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?

Drew Noakes
la source
Il semble que Pagespeed demande maintenant une compression avec perte. Avant que les résultats ne disaient: "La compression sans perte de xxx.jpg pourrait économiser xx ko (réduction de xx%)". Maintenant, il dit: "La compression de xxx.jpg pourrait économiser xx ko (réduction de xx%)" Surtout, Google semble demander de compresser avec perte les images plus petites uniquement (vignettes, etc.). Quelqu'un peut-il déterminer quels outils et paramètres de compression avec perte Google utilise?
Martin

Réponses:

83

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.

(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.

user123444555621
la source
3
En particulier, keep_color_profile (false) pour les JPEG peut être une mauvaise idée. À mesure que les affichages à gamme de couleurs étendue deviennent plus courants, une instruction de rendu des couleurs clairement définie devient ambiguë. Si l'image d'origine était encodée en sRVB, cela fonctionnera toujours dans certains navigateurs (Safari, Firefox avec modification de about: config) tandis que dans d'autres, seules les images réellement marquées peuvent être gérées par couleur (Firefox par défaut). Bien sûr, les navigateurs sans aucune capacité de gestion des couleurs ne se soucieront pas…
CO
2
Je cours optipng file.png -o7et je ne reçois pas n'importe où près de ce que montre Google. Peut-être se convertissent-ils en SVG lorsque cela est possible?
Nateowami le
@Nateowami J'ai eu le même problème ... pour certains PNG, Google fait mieux que optipng -o7. Pour ceux-ci, vous pouvez télécharger les images optimisées à partir du site Web pagespeed lui-même.
chrisvdb
46

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.

Hoang Huynh
la source
29

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

ambre
la source
1
Merci pour le lien. Je suppose que je cherche vraiment à en savoir plus sur les types de redondances dans les fichiers image qui peuvent être supprimés si la taille du fichier est votre principale préoccupation. Je sais que les informations sont disponibles sur le Web, je voulais juste avoir un endroit agréable pour les rassembler ici sur SO.
Drew Noakes
J'utilise un outil de création personnalisé qui compresse les images avec optipng et pngcrush, puis sélectionne le fichier le plus petit. Pourtant, Page Speed ​​se plaint d'images non optimales. Alors, quel outil utilisent-ils vraiment?
user123444555621
@ Pumbaa80 Vous pouvez également essayer advsys.net/ken/util/pngout.htm (qui dit spécifiquement qu'il peut parfois obtenir des tailles plus petites que optipng et pngcrush).
Ambre
Je viens de découvrir que Page Speed ​​utilise en effet optipng, avec un wrapper personnalisé qui détermine les meilleures options de configuration. @Amber Pas une option, je n'utilise pas Windows;)
user123444555621
15

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

Kornel
la source
La seule réponse qui tente de répondre à la question réelle posée par l'O / P, au lieu de la question différente «comment puis-je compresser au maximum mes images»? lol
toddmo
13

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

Thor
la source
Merci d'avoir partagé ça!
rotaercz
1
Si vous utilisez IIS, PageSpeed ​​a récemment été porté sous Windows et effectue automatiquement ces mêmes optimisations. iispeed.com Pour une meilleure réduction sans aucune perte, j'ai converti en masse des répertoires entiers de JPEG en utilisant JPEGmini jpegmini.com
James Moberg
On dirait qu'il n'y a plus d'extension PageSpeed ​​pour Firebug.
Stephan Schielke
10

À 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.

Rohan
la source
2
Des alternatives pour Windows?
Mathias Lykkegaard Lorenzen
2

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!

Creuser
la source
1
FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full "%G" si vous avez des espaces dans votre nom de fichier
Ned Martin
0

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.

Nate
la source
0

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!

Kim Steinhaug
la source