HTTP ArchieveSelon les statistiques, le contenu image représente déjà 62% du contenu total sur Internet, ce qui signifie que plus de la moitié du trafic et du temps est consacrée au téléchargement d'images. Du point de vue de l'optimisation des performances, les images sont certainement l'un des points chauds et des points clés. Google PageSpeed ou les 14 règles d'optimisation des performances de Yahoo considèrent toutes l'optimisation des images comme une méthode d'optimisation importante. Cet article couvre tous les aspects de l'optimisation des images web, de la sélection de base du format d'image aux images responsives qui ne sont pas encore largement prises en charge.

J'aime vraiment ce que dit Google Web Fundamentals :

L'optimisation des images est à la fois un art et une science. C'est un art car il n'existe pas de solution unique, spécifique et optimale pour compresser une image individuelle. C'est une science car de nombreuses méthodes et algorithmes bien développés peuvent réduire considérablement la taille des images. Pour trouver les réglages optimaux d'une image, une analyse minutieuse est nécessaire selon de nombreux axes : capacités du format, contenu des données encodées, dimensions en pixels, etc.

Avez-vous vraiment besoin d'utiliser des images ?

Avez-vous vraiment besoin d'une image pour obtenir l'effet souhaité ? C'est la première question à se poser. Les navigateurs et les standards du web ont évolué extrêmement rapidement. Je me souviens qu'il y a quelques années, lorsque j'écrivais un lecteur vidéo avec Microsoft Silverlight 1.0, le texte chinois ne pouvait pas être affiché avec des polices personnalisées, alors j'ai donc écrit beaucoup de code terrible qui générait le texte requis sous forme d'images sur le serveur et les mettait en cache. Elles étaient lentes à télécharger pour les utilisateurs, et les moteurs de recherche ne pouvaient pas du tout indexer ce texte.

Mais maintenant, les choses sont différentes. De nombreux effets (dégradés, ombres, coins arrondis, etc.) peuvent être implémentés avec du HTML, du CSS, du SVG, etc. purs. L'implémentation de ces effets peut se faire en aussi peu que quelques lignes de code, ou au plus en chargeant une bibliothèque supplémentaire (une photo ordinaire comparée àune bibliothèque d'effets très puissanteest également bien plus volumineuse). Ces effets non seulement occupent très peu d'espace, mais fonctionnent également bien sur de nombreux appareils et résolutions, et peuvent être dégradés gracieusement sur les anciens navigateurs. Par conséquent, lorsque des technologies alternatives existent, ces technologies doivent être choisies en premier, et de vraies images ne doivent être ajoutées que lorsque les images sont inévitables.

Technologies alternatives

• Effets CSS et animations CSS. Ils fournissent des effets indépendants de la résolution, s'affichent clairement à toute résolution et à tout niveau de zoom, et occupent très peu d'espace.
• Polices web. Aujourd'hui, même de nombreuses bibliothèques d'icônes sont fournies sous forme de polices, préservant la possibilité de recherche du texte tout en élargissant les styles d'affichage.

Les ingénieurs front-end devraient idéalement maintenir la communication avec les designers et les chefs de produit,en les aidant à comprendre quels effets sont « simples, efficaces et maintenables ». Après tout, pour CSS, modifier le rayon d’un rectangle arrondi est visible en temps réel ; avec des images, il faut au moins régénérer l’image, la découper et remplacer la ressource. Retina, les écrans haute résolution et les appareils à tailles multiples ont tous accéléré le développement des effets non basés sur des images. Pensez simplement à l’aspect désastreux de Windows 7 sur les écrans haute résolution, et vous comprendrez que les ressources d’images natives ne sont certainement pas à considérer selon le principe « plus il y en a, mieux c’est ».

Choisir un format d’image

Si une image est vraiment nécessaire pour exprimer l’effet, alors choisir le format d’image est la première étape de l’optimisation. Parmi les termes que l’on entend souvent, citons les images vectorielles, les images matricielles, SVG, la compression avec perte, la compression sans perte, etc. Commençons par expliquer les caractéristiques des différents formats d’image.

Format d'image	Méthode de compression	Transparence	Animation	Compatibilité des navigateurs	Scénarios adaptés
JPEG	Compression avec perte	Non pris en charge	Non pris en charge	Tous	Couleurs et formes complexes, en particulier les photos
GIF	Compression sans perte	Pris en charge	Pris en charge	Tous	Couleurs simples, animation
PNG	Compression sans perte	Pris en charge	Non pris en charge	Tous	Lorsque la transparence est nécessaire
APNG	Compression sans perte	Pris en charge	Pris en charge	Firefox Safari iOS Safari	Animations nécessitant une semi-transparence
WebP	Compression avec perte	Pris en charge	Pris en charge	Chrome Opera Android Chrome Android Browser	Couleurs et formes complexes ; plateforme de navigateur prévisible
SVG	Compression sans perte	Pris en charge	Pris en charge	Tous (IE8 et versions ultérieures)	Graphismes simples, bonne expérience de mise à l'échelle, besoin d'un contrôle dynamique des effets d'image

Parmi eux, les formats APNG et WebP sont apparus relativement tard,et n'ont pas encore été adoptés par les normes web.Ils ne doivent être utilisés que lorsque la plateforme ou l'environnement de navigateur spécifique est prévisible. Bien que tous deux puissent se dégrader gracieusement dans les environnements non pris en charge, cette section ne traitera pas de ces deux formats pour l'instant. Le processus de sélection du format d'image est le suivant :

Pour les photos aux couleurs riches, le JPG est le choix universel.

• La structure de l'œil humain est bien adaptée à la visualisation de photos compressées en JPG ; il peut totalement ignorer les détails et les compléter mentalement.
• Le JPG conserve assez bien les détails lorsque le taux de compression n'est pas élevé.
• WebP peut réduire la taille du fichier de 30 % par rapport au JPG, mais actuellementil présente une mauvaise compatibilité avec les navigateurs.

Si un format d'animation plus universel est nécessaire, GIF est le seul choix utilisable.

• GIF prend en charge une plage de 256 couleurs et ne prend en charge que la transparence totale / l'opacité totale.
• Lors de l'affichage d'animations aux couleurs riches, GIF peut présenter des problèmes tels que des couleurs manquantes et des bords dentelés.

Si l'image est composée de formes géométriques standard, ou si vous devez contrôler dynamiquement ses effets d'affichage via des programmes, vous pouvez envisager le format SVG.

• SVG est un format de graphiques vectoriels défini à l'aide de XML, et les images résultantes peuvent être mises à l'échelle librement à n'importe quelle résolution.
• Dans SVG, vous pouvez modifier librement les effets d'image via des interfaces telles que JavaScript, et réaliser la rotation libre, le déplacement, les changements de couleur, etc. de certains éléments.

Si vous devez afficher clairement des images aux couleurs riches, PNG est préférable.

• PNG-8 peut afficher 256 couleurs, mais il prend également en charge 256 niveaux de transparence. Par conséquent, pour les scénarios comportant moins de couleurs mais nécessitant une semi-transparence (comme les émoticônes animées WeChat), PNG-8 peut être envisagé.
• PNG-24 peut afficher les couleurs vraies mais ne prend pas en charge la transparence. Il est recommandé pour les images aux couleurs riches (par exemple, captures d'écran, maquettes de conception UI).
• PNG-32 peut afficher les couleurs vraies et prend en charge 256 niveaux de transparence. Il offre le meilleur effet mais aussi la taille de fichier la plus importante.

Sélection des dimensions d'image

Les dimensions étaient autrefois le sujet le moins abordé, mais le monde est devenu bien plus compliqué depuis l'apparition de Retina. Le sujet des pixels et des dimensions sur les appareils mobiles mérite à lui seul un article complet. Je suggère aux étudiants qui veulent des détails de se référer à l'article suivant :

Un bref exposé sur le développement Web mobile (Partie 1) : Concepts approfondis

Ici, nous ne parlons que des parties et des conclusions qui nous intéressent. Nous devons distinguer différents types de pixels : les pixels CSS et les pixels d'appareil. Un pixel CSS peut contenir plusieurs pixels d'appareil. Pour les images, sur les écrans high-DPI, vous avez besoin d'images de résolution supérieure. Si nous parlons de Retina, alors vous avez besoin d'images en résolution 2x (presque 4x la taille). Il n'y a presque pas de raccourci possible : l'écran est simplement de cette taille, et l'image requise est, inutile de le dire, aussi grande. (Pourquoi le pigeon est-il si gros ? ^_^)

Ce que nous pouvons contrôler, c'est afficher une image à la taille "exacte" requise. Par exemple, à l'écran, via CSS oules attributs width/height de la balise <img>, en redimensionnant une image 200x200 en 100x100, alors (200x200)-(100x100)=30000 pixels sont gaspillés, ce qui représente 75 % de la taille de l'image !

La raison d'un gaspillage aussi énorme est que la taille du fichier image est essentiellement proportionnelle à la surface, et donc proportionnelle au carré de la largeur et de la hauteur. Par conséquent, calculer la taille d'affichage réelle de l'image côté client peut grandement réduire la taille de l'image. Même si seulement 10px de largeur et de hauteur sont gaspillés, lorsque l'image est suffisamment grande, cette partie aura toujours un impact significatif.

Images responsives

Précédemment, nous avons mentionné l'affichage d'images à la taille "exacte" dont le client a besoin. Cela semble facile, n'est-ce pas ? Mais après l'apparition des mises en page responsives, cela est devenu extrêmement difficile. Nous devons prendre en charge d'innombrables appareils allant de 1920px de large à 320px de large. Si nous utilisons des images de 1920px de large, alors sur les petits appareils (qui sont souvent plus sensibles à la vitesse du réseau et à la consommation de données), chaque utilisateur paie un supplément de bande passante et de temps d'attente. Si nous utilisons des images de 320px de large, alors sur un écran 1920px, c'est aussi inacceptable que d'exécuter DOS sur un écran HD.

Naturellement, nous avons aussi besoin que les images se chargent « de manière responsive », en chargeant différentes tailles d'images selon l'appareil. Les images responsives n'ont pas encore été intégrées aux standards du web, et leur mise en œuvre présente de nombreux inconvénients et limitations de compatibilité. Je recommande de consulter cet article de l'équipe EFE de Baidu :

Les images responsives en pratique

Bien que les images responsivesne soient pas encore devenues une norme,elles sont un outil puissant pour l'optimisation des images web. Une fois largement prises en charge, il n'existe pas de méthode d'optimisation plus efficace que de réduire la taille de l'image.

Optimisation des JPG et PNG

Après avoir sélectionné le bon format d'image et généré l'image à la bonne taille, nous devons encore optimiser davantage l'image. Cette optimisation se déroule généralement en deux étapes :

1. Optimisation avec perte : supprimer les couleurs qui n'apparaissent jamais ou très rarement, et fusionner les couleurs similaires adjacentes. Cette étape n'est pas strictement nécessaire ; par exemple, le format PNG peut passer directement à l'étape suivante.
2. Optimisation sans perte : compresser les données et supprimer les informations inutiles.

Après avoir généré des images aux formats JPG et PNG, il reste généralement encore une marge d'optimisation. Par exemple, les photos JPG peuvent contenir des informations Exif de l'appareil photo, et les images PNG peuvent contenir des informations de calque provenant de logiciels tels que Fireworks. Après avoir supprimé ces informations supplémentaires, vous pouvez également optimiser en réduisant la palette de l'image, en supprimant les couleurs qui n'apparaissent jamais et en fusionnant les couleurs identiques adjacentes. Je n'entrerai pas ici dans les détails théoriques ; je présenterai uniquement des outils d'optimisation pratiques pouvant être utilisés en ingénierie.

Il existe une série d'outils pour différents formats d'image, et ces outils disposent de nombreuses options de réglage des paramètres. Voici plusieurs outils de réglage courants :

Outil	Objectif
jpegtran	Optimiser les images JPG
OptiPNG	Optimisation PNG sans perte
AdvPNG	Optimisation PNG sans perte
PNGQuant	Optimisation PNG avec perte

Si vous avez vraiment besoin de poursuivre une compression extrême de diverses images, vous pouvez vous référer à la documentation de ces outils. Cependant, pour les applications web typiques, les types d'images rencontrés sont divers, et il est presque impossible de configurer indépendamment chaque outil dans un contexte d'ingénierie. Par conséquent, il est recommandé d'utiliser les outils suivants pour l'optimisation. Ces outils utilisent souvent un ou plusieurs des outils d'optimisation du tableau ci-dessus.

ImageOptim (Mac)

Page d'accueil :https://imageoptim.com/

Un très bon outil d'optimisation d'images sur la plateforme Mac. Il vous suffit de glisser les images à optimiser dans ImageOptim, et l'optimisation est terminée. Les paramètres sont également riches, et il prend actuellement en charge l'optimisation JPG et PNG. C'est l'outil que j'utilise le plus souvent lorsque je rédige des articles : glissez les images utilisées sur le site web dedans, et l'optimisation est terminée~

Kraken (Web)

Page d'accueil :https://kraken.io/

En mode gratuit, vous pouvez téléverser des images, et après optimisation elles sont empaquetées pour le téléchargement. De nombreuses entreprises étrangères choisissent également son service payant. J'ai personnellement testé les résultats d'optimisation d'images de Kraken ; ils sont généralement environ 3% plus petits que ceux d'ImageOptim. L'effet est bon, et bien sûr le prix l'est aussi. Il convient aux besoins occasionnels d'optimisation d'images, ou aux situations où aucun logiciel d'optimisation n'est disponible sur la machine de développement.

Zhitu (Web)

Page d'accueil :http://zhitu.tencent.com/

L'équipe ISUX de Tencent a un article présentant Zhitu :http://isux.tencent.com/zhitu.html

Il est temps que les produits nationaux se démarquent. L'outil Zhitu de Tencent n'est pas sorti depuis longtemps, mais les tests réels montrent qu'il fonctionne bien, et il fournitune prise en charge de l'automatisation GulpCette partie sera présentée plus loin dans la section sur l'optimisation automatique. Je veux juste suggérer une chose : la page d'accueil de Kraken est des centaines de fois plus belle que celle de Zhitu... Et est-ce vraiment acceptable de mettre le PNG compressé et le JPG compressé côte à côte pour comparer les tailles ?

Optimisation de SVG

Tous les navigateurs récents prennent en charge les graphiques vectoriels adaptables (SVG). Le SVG est un format d'image basé sur XML adapté aux images bidimensionnelles. Le balisage SVG peut être intégré directement dans des pages web ou inclus comme ressource externe. Les fichiers SVG peuvent être créés avec la plupart des logiciels de dessin vectoriel. Voici un graphique SVG simple :

Ce cercle a un contour noir et un fond rouge, exporté directement depuis Adobe Illustrator. Vous pouvez y voir beaucoup de métadonnées, comme des informations de calque, des commentaires, des espaces de noms XML, etc. Ces données ne sont généralement pas nécessaires lors du rendu des ressources dans le navigateur. Par conséquent, nous devons utiliser certains outils pour supprimer ces métadonnées inutiles et ne conserver que le balisage requis.

SVGOLes outils peuvent réduire la taille des fichiers SVG. Dans cet exemple, SVGO peut réduire la taille d'un fichier SVG généré par Illustrator de 58 %, de 470 octets à 199 octets. Comme le SVG est un format basé sur XML et essentiellement du texte brut, la compression GZIP peut également être utilisée pour réduire la taille de transfert. Bien sûr, cela nécessite une certaine configuration du serveur, par exemple en définissant ce qui suit dans un serveur Apache :

AddType image/svg+xml .svg
AddOutputFilterByType DEFLATE image/svg+xml

pour activer la compression GZip pour les fichiers SVG (bien sûr, vous devez aussi charger le module deflate et le configurer correctement ; la configuration de GZip sort du cadre de cet article, alors veuillez rechercher cette partie vous-même sur Google)

Optimisation de GIF et APNG

GIF présente de nombreux avantages : lorsque le nombre de couleurs est faible, il peut réduire considérablement la taille de l'image, et c'est aussi le seul format d'image capable d'afficher des animations de manière relativement universelle. Je ne connais pas très bien les principes d'optimisation du format GIF ; j'utilise directement des outils de compression matures en ingénierie. Dans la suiteOptimisation automatiquesection sur Grunt, je présenterai une méthode d'optimisation automatique via les tâches Grunt.

Quant à APNG, la prise en charge actuelle par les navigateurs n'est pas encore assez bonne. Cependant, dans les scénarios prenant en charge HTML5, il existe un outil open source matureapng-canvasqui peut être utilisé pour prendre en charge APNG.

L'équipe ISUX de Tencent a un article présentant l'outiliSparta:http://isux.tencent.com/introduction-of-apng.htmlC'est actuellement presque le seul outil capable de traiter par lots des fichiers APNG. Les personnes intéressées peuvent en apprendre davantage dans cet article.

Optimisation automatique

J'ai déjà trop parlé ci-dessus des méthodes et des outils d'optimisation des images de divers formats. L'optimisation des images nécessite beaucoup de travail répétitif. En tant qu'ingénieurs, nous ne pouvons évidemment pas tolérer cela, c'est pourquoi de nombreux outils ont été créés pour optimiser automatiquement les images. Ici, je présente principalement trois méthodes : CDN, Grunt/Gulp et Google PageSpeed.

Optimisation automatique : CDN

Utiliser un CDN pour optimiser automatiquement les images. J'ai rarement vu ce type de service chez les fournisseurs de CDN étrangers, mais les deux leaders nationaux du CDN en pleine ascensionQiniuetUpyunont fait beaucoup de travail à cet égard. Le fonctionnement est le suivant : lorsqu'on demande une image au CDN, les paramètres de l'URL incluent des paramètres de traitement d'image (format, largeur et hauteur, etc.). Le serveur CDN génère l'image requise en fonction de la demande et l'envoie au navigateur de l'utilisateur.

Qiniu Cloud Storage dispose d'une interfacede traitement d'imageextrêmement riche, couvrant la plupart des opérations d'image de base, telles que :

• Recadrage d'images, prenant en charge plusieurs méthodes de recadrage (comme par côté long, côté court, remplissage, étirement, etc.)
• Conversion de format d'image, prenant en charge JPG, GIF, PNG, WebP, etc., avec différents taux de compression d'image
• Traitement d'images, prenant en charge le filigrane d'image, le flou gaussien, le traitement de mise au point, etc.

L'interface de traitement d'images de Qiniu Cloud Storage n'est pas compliquée à utiliser. Par exemple, prenez l'image originale suivante :

Nous demandons l'URL suivante pour recadrer la partie centrale et la redimensionner proportionnellement afin de générer une miniature de 200x200 :

http://qiniuphotos.qiniudn.com/gogopher.jpg?imageView2/1/w/200/h/200

Optimisation automatique : Grunt/Gulp

Ici, je présente les composants Grunt utilisés pour l'optimisation d'images :grunt-imageLe travail répétitif des ingénieurs front-end, comme la fusion de ressources statiques, la compression des fichiers JS et CSS, la compilation de SASS, etc., peut être effectué par lots à l'aide d'outils d'automatisation comme Grunt. L'optimisation d'images ne fait pas exception.

grunt-image est très puissant. Selon la présentation de l'auteur, les outils d'optimisation d'images chargés en interne incluent pngquant, optipng, advpng, zopflipng, pngcrush, pngout, mozjpeg, jpegRecompress, jpegoptim, gifsicle et svgo. Il prend en charge l'optimisation automatique par lots des PNG, JPG, SVG et GIF, et sa vitesse est également bonne. La configuration prend en charge l'optimisation d'une seule image et l'optimisation de répertoires entiers :

module.exports = function (grunt) {
  grunt.initConfig({
    image: {
      // 指定单独的图片优化
      static: {
        options: {
          pngquant: true,
          optipng: true,
          advpng: true,
          zopflipng: true,
          pngcrush: true,
          pngout: true,
          mozjpeg: true,
          jpegRecompress: true,
          jpegoptim: true,
          gifsicle: true,
          svgo: true
        },
        files: {
          'dist/img.png': 'src/img.png',
          'dist/img.jpg': 'src/img.jpg',
          'dist/img.gif': 'src/img.gif',
          'dist/img.svg': 'src/img.svg'
        }
      },
      // 指定图片目录进行优化
      dynamic: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.{png,jpg,gif,svg}'],
          dest: 'dist/'
        }]
      }
    }
  });

  grunt.loadNpmTasks('grunt-image');
};

Optimisation automatique : Google PageSpeed

La façon de travailler de Google est assez minutieuse. Lorsque Google voit un logiciel qui n'est pas bon à utiliser, Google en fork directement une nouvelle version ou le réécrit simplement. Pour l'optimisation web, Google a publiéGoogle PageSpeedce module serveur, qui peut être chargé dans Apache ou Nginx, et l'optimisation automatique est effectuée par des réglages dans le fichier de configuration du serveur. Il existe des options associées pour la conversion de format d'image, l'optimisation d'images et même le chargement différé des images. Ce sujet serait très long à développer, donc veuillez vous référer au manuel de Google si cela vous intéresse.

Source : http://blog.cabbit.me/web-image-optimization