Consultez notre guide vid\u00e9o sur la compression avec ou sans perte<\/a><\/h3>\n<\/kinsta-video>\nDiff\u00e9rences entre avec et sans perte<\/h2>\n
Lorsqu’il s’agit de compressions d’images num\u00e9riques, il existe plusieurs formats diff\u00e9rents parmi lesquels choisir. Ceux-ci portent parfois d’autres noms en fonction de nombreux facteurs. Cependant, \u00e0 un niveau de base, vous trouverez deux types :<\/p>\n
\n- Compression avec perte :<\/b> L’objectif ici est de fournir la plus petite taille de fichier possible pour une image. \u00c0 ce titre, la qualit\u00e9 de l’image est souvent en bas de la liste des priorit\u00e9s.<\/li>\n
- Compression sans perte :<\/b> Vous trouverez toujours une r\u00e9duction substantielle de la taille du fichier avec ce format de compression, mais l’image ne souffrira pas d’artefacts et d’autres probl\u00e8mes.<\/li>\n<\/ul>\n
Dans la plupart des cas, votre d\u00e9cision concernant le format \u00e0 utiliser d\u00e9pendra de votre objectif final : voulez-vous des fichiers minuscules ou souhaitez-vous avant tout pr\u00e9server la qualit\u00e9 ?<\/p>\n
La compression avec perte supprime d\u00e9finitivement de l’image les donn\u00e9es qu’elle juge inutiles. Elle utilise de nombreuses techniques diff\u00e9rentes pour y parvenir, ce qui permet d’obtenir des fichiers beaucoup plus petits.<\/p>\n
La compression sans perte supprime \u00e9galement des donn\u00e9es, mais elle peut restaurer l’original si n\u00e9cessaire. L’objectif est de conserver une qualit\u00e9 \u00e9lev\u00e9e, tout en r\u00e9duisant la taille du fichier.<\/p>\n
Il existe plusieurs fa\u00e7ons d’y parvenir, mais le r\u00e9sultat est souvent le m\u00eame. Pour trouver la bonne option pour vos besoins, prenons d’abord un peu de recul et passons en revue les bases des images et de la compression en g\u00e9n\u00e9ral.<\/p>\n\n
\u00c9l\u00e9ments d’une image num\u00e9rique<\/h2>\n
Comme pour le d\u00e9veloppement de logiciels et de sites web, il y a souvent une \u00ab pile \u00bb pour faire passer une image de l’appareil photo au web.<\/p>\n
Une image commence sous forme de donn\u00e9es \u00ab brutes \u00bb (d’o\u00f9 le nom RAW). C’est un peu comme le code d’une application : Les snippets, lignes et valeurs se traduisent par des arri\u00e8re-plans avec de la couleur, des espaces r\u00e9serv\u00e9s aux images, des \u00e9l\u00e9ments dynamiques, etc.<\/p>\n
Pour une image, le fichier RAW pr\u00e9sente une repr\u00e9sentation l\u00e9g\u00e8rement diff\u00e9rente de l’image en fonction du fabricant de l’appareil photo, du logiciel d’\u00e9dition, de l’algorithme de l’espace couleur, etc. \u00c0 partir de l\u00e0, vous modifiez l’image et l’exportez dans l’un des nombreux formats de fichier (nous y reviendrons plus tard) :<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/editing-software.png\")
Un exemple de modification d’un fichier RAW dans Capture One.<\/figcaption><\/figure>\nIl y a quelques \u00e9l\u00e9ments diff\u00e9rents qui composent une image num\u00e9rique standard :<\/p>\n
\n- Type de fichier :<\/b> Diff\u00e9rents types fourniront des qualit\u00e9s qui conviendront ou non \u00e0 votre image finale. L’essentiel est de choisir le type de fichier le plus adapt\u00e9 \u00e0 l’application.<\/li>\n
- R\u00e9solution :<\/b> Vous la verrez souvent exprim\u00e9e en m\u00e9gapixels (MP), mais aussi en pixels par pouce (PPI) ou en points par pouce (DPI). Les r\u00e9solutions plus \u00e9lev\u00e9es offrent une meilleure qualit\u00e9, mais elles augmentent aussi la taille initiale du fichier<\/li>\n
- Profondeur de bits :<\/b> Cet aspect d\u00e9termine les informations de couleur dans une image. Une faible profondeur de bits ne rendra que quelques couleurs, tandis qu’une profondeur de bits \u00e9lev\u00e9e pourrait potentiellement rendre des millions de couleurs \u00e0 la fois. En g\u00e9n\u00e9ral, plus elle est \u00e9lev\u00e9e, mieux c’est.<\/li>\n
- Dimensions :<\/b> Il s’agit de l’espace physique qu’occupe une image. Par exemple, 1000 pixels x 500 pixels peuvent d\u00e9finir la taille totale d’une image.<\/li>\n
- Espace couleur :<\/b> Il s’agit d’un algorithme qui d\u00e9termine la fa\u00e7on dont les couleurs s’affichent. Chaque espace colorim\u00e9trique est configur\u00e9 diff\u00e9remment, et il s’agit souvent de la pr\u00e9f\u00e9rence du photographe.<\/li>\n<\/ul>\n
Ces \u00e9l\u00e9ments se combinent pour donner une image finale de qualit\u00e9 variable. Par exemple, une grande photo JPEG \u00e0 haute r\u00e9solution et \u00e0 haute profondeur de bits offrira une qualit\u00e9 et une nettet\u00e9 supr\u00eames :<\/p>\n![\"Une](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/high-quality-image.jpg\")
Une image de haute qualit\u00e9.<\/figcaption><\/figure>\nEn revanche, m\u00eame une image ayant de grandes dimensions et la capacit\u00e9 d’afficher beaucoup de couleurs peut para\u00eetre m\u00e9diocre \u00e0 une faible r\u00e9solution :<\/p>\n![\"Une](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/low-quality-image.jpg\")
Une image de faible qualit\u00e9.<\/figcaption><\/figure>\nCet \u00e9quilibre est la fa\u00e7on dont vous d\u00e9veloppez l’image de base avant d’appliquer la compression. Cependant, le format que vous utilisez pour l’image joue un r\u00f4le important dans la qualit\u00e9 finale.<\/p>\n
Comment fonctionne l’optimisation des images web<\/h2>\n
\u00c9tant donn\u00e9 que la compression d’image est la m\u00eame dans un sens g\u00e9n\u00e9ral sous le capot, vous pouvez appliquer des r\u00e8gles standard \u00e0 la fa\u00e7on dont vous optimisez les images pour le web.<\/p>\n
Nous couvrons un grand nombre de ces concepts ailleurs sur le blog Kinsta<\/a>, mais il est utile de faire un r\u00e9sum\u00e9 rapide pour r\u00e9f\u00e9rence :<\/p>\n\n- Utilisez une r\u00e9solution de 72 PPI, car c’est la norme pour le web. Vous pouvez utiliser un PPI\/DPI plus \u00e9lev\u00e9 pour des raisons d’archivage, mais nous supposons que vous publiez sur le web.<\/li>\n
- D\u00e9finissez le \u00ab bord long \u00bb (long edge) de l’image \u00e0 2048 pixels, car cela est optimal pour de nombreuses applications diff\u00e9rentes.<\/li>\n
- Utilisez une profondeur de couleur de 8 bits si vous en avez la possibilit\u00e9.<\/li>\n
- Passez une image dans un outil de compression et d’optimisation avant de la publier.<\/li>\n<\/ul>\n
Il s’agit d’un format simple qui peut vous donner des r\u00e9sultats coh\u00e9rents, bien que la compression et l’optimisation soient des sujets que nous d\u00e9velopperons dans le reste de cet article.<\/p>\n
\u00c0 cette fin, examinons les avantages et les inconv\u00e9nients de la compression avec ou sans perte.<\/p>\n
Comment la compression d’image peut aider vos images web<\/h3>\n
En termes g\u00e9n\u00e9raux, la \u00ab compression \u00bb rapproche le minimum et le maximum. Par exemple, dans la musique, la compression augmente le volume le plus faible et r\u00e9duit le plus \u00e9lev\u00e9. Cela rend le niveau moyen plus fort \u00e0 l’oreille.<\/p>\n
Pour les images, la compression est davantage un processus r\u00e9ducteur. Cela signifie que l’accent est mis sur la suppression de donn\u00e9es de votre image pour r\u00e9duire la taille du fichier, tout en conservant une qualit\u00e9 aussi \u00e9lev\u00e9e que possible.<\/p>\n
Il existe de nombreux algorithmes propri\u00e9taires diff\u00e9rents pour aider \u00e0 r\u00e9duire la taille des fichiers image. Dans de nombreux cas, ils sont la propri\u00e9t\u00e9 d’une entreprise sp\u00e9cifique. Vous trouverez de nombreuses normes de compression \u00ab avec perte \u00bb et \u00ab sans perte \u00bb, chacune avec des descripteurs uniques :<\/p>\n![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/compression-formats.png\")
Les options de compression dans ShortPixel.<\/figcaption><\/figure>\nTout cela \u00e9tant dit, il y a de nombreux avantages \u00e0 appliquer la compression d’image qui ne sont pas exclusifs \u00e0 un format particulier :<\/p>\n
\n- Vous pouvez maintenir la taille des fichiers \u00e0 un niveau bas, ce qui am\u00e9liore les performances de votre site.<\/li>\n
- Par extension, le serveur de votre site aura moins de travail \u00e0 faire, ce qui aura un impact sur les performances.<\/li>\n
- Les fichiers de petite taille contribuent \u00e0 r\u00e9duire les \u00e9missions du serveur. En tant que tel, vous contribuez \u00e0 un avenir durable et \u00e9thique.<\/li>\n
- Vous \u00eates en mesure d’afficher une qualit\u00e9 quasi parfaite et comparable selon l’algorithme et la qualit\u00e9 de compression que vous choisissez.<\/li>\n<\/ul>\n
Tout comme la cr\u00e9ation d’une image partageable, jouer avec diff\u00e9rentes valeurs de compression, utiliser une soci\u00e9t\u00e9 sp\u00e9cifique et choisir le bon algorithme sont des \u00e9l\u00e9ments essentiels pour trouver des r\u00e9sultats qui vous conviennent.<\/p>\n
Avantages et inconv\u00e9nients de la compression avec perte<\/h2>\n
La compression avec perte<\/a> r\u00e9duit la taille du fichier de l’image, presque \u00e0 l’exclusion de tous les autres aspects. Le mode de fonctionnement de l’algorithme consiste \u00e0 supprimer des donn\u00e9es de fa\u00e7on permanente. Cela peut \u00eatre aussi destructeur qu’il n’y para\u00eet.<\/p>\nNous n’entrerons pas trop dans les d\u00e9tails, mais sachez que certaines des donn\u00e9es supprim\u00e9es par la compression avec perte sont visibles dans l’image. L’id\u00e9e est d’offrir la meilleure repr\u00e9sentation de l’image originale de haute qualit\u00e9 \u00e0 un poids plus l\u00e9ger – et cela signifie que certaines donn\u00e9es ne passeront pas.<\/p>\n
En g\u00e9n\u00e9ral, l’utilisation de la compression avec perte pr\u00e9sente quelques avantages :<\/p>\n
\n- Les fichiers seront de petite taille – dans certains cas, moins de 10 Ko.<\/li>\n
- La perte de qualit\u00e9 sera acceptable dans de nombreux cas, malgr\u00e9 les artefacts.<\/li>\n<\/ul>\n
Cela nous am\u00e8ne aux inconv\u00e9nients de la compression avec perte, \u00e0 savoir que la qualit\u00e9 de l’image diminue quel que soit le degr\u00e9 de compression :<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/compression-slider.png\")
Un curseur de compression pour une image JPEG.<\/figcaption><\/figure>\nVous constaterez que les bandes de couleur – o\u00f9 les nuances de couleur ne sont pas rendues de la bonne mani\u00e8re – et une perte de clart\u00e9 des bords seront visibles dans certains cas. Les images avec moins de couleurs montreront moins de cela, mais la r\u00e9duction de la clart\u00e9 sera toujours pr\u00e9sente.<\/p>\n
En outre, la d\u00e9gradation de l’image est une caract\u00e9ristique permanente du processus de compression. Cela signifie qu’il n’y a aucun moyen d’inverser les effets \u00e0 une date ult\u00e9rieure.<\/p>\n
Malgr\u00e9 ces inconv\u00e9nients, la compression avec perte est excellente pour le web et les performances de votre site. La taille minuscule des fichiers ne se traduit pas toujours par des images granuleuses, m\u00eame si vous pouvez (bien s\u00fbr) pousser les choses \u00e0 l’extr\u00eame :<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/over-compressed-cat-min.jpg\")
<\/a>Un exemple d’image trop compress\u00e9e<\/figcaption><\/figure>\nCependant, la compression avec perte n’est pas la seule option. La compression sans perte est une alternative pour le propri\u00e9taire de site soucieux de la qualit\u00e9.<\/p>\n
Avantages et inconv\u00e9nients de la compression sans perte<\/h2>\n
La compression sans perte fait ce qu’elle indique dans son nom : Elle comprime la taille du fichier d’une image autant que possible sans affecter la qualit\u00e9 visible. Pour cela, elle supprime les m\u00e9tadonn\u00e9es de l’image, qui peuvent occuper un espace inutile :<\/p>\n![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/image-metadata.png\")
Les m\u00e9tadonn\u00e9es d’une image.<\/figcaption><\/figure>\nL’algorithme de compression sans perte recherche \u00e9galement les s\u00e9quences de pixels r\u00e9p\u00e9titives, puis code un raccourci pour les afficher. Par exemple, prenez \u00ab Command Line Interface \u00bb Vous d\u00e9finirez souvent son acronyme une fois, puis utiliserez \u00ab CLI \u00bb (ou l’acronyme de votre choix) pour y faire r\u00e9f\u00e9rence \u00e0 la vitesse de l’\u00e9clair<\/p>\n
La compression sans perte fonctionne de la m\u00eame mani\u00e8re, en ce sens qu’elle est moins destructrice. Alors que la suppression des m\u00e9tadonn\u00e9es ne sera pas r\u00e9versible, une partie de la compression le sera, ce qui en fait un algorithme flexible pour de nombreuses utilisations.<\/p>\n
Les avantages de la compression sans perte sont li\u00e9s \u00e0 la conservation de la qualit\u00e9 :<\/p>\n
\n- La compression sans perte pr\u00e9serve le plus de qualit\u00e9 dans une image par rapport \u00e0 tous les autres algorithmes.<\/li>\n
- La compression sans perte est fantastique \u00e0 des fins d’archivage. Par exemple, un photographe peut \u00e9quilibrer les ressources de stockage avec une image qui pr\u00e9serve le plus de donn\u00e9es.<\/li>\n
- L’algorithme sans perte est l’algorithme de compression pr\u00e9f\u00e9r\u00e9 des arts visuels : photographie, conception graphique, art num\u00e9rique, etc. La combinaison d’un algorithme sans perte avec la profondeur et la r\u00e9solution appropri\u00e9es permet d’obtenir une copie presque \u00ab un pour un \u00bb.<\/li>\n<\/ul>\n
Cependant, il faut noter que la compression sans perte sert bien des niches sp\u00e9cifiques : L’\u00e9ventail d’applications est restreint. Cela r\u00e9duit sa disponibilit\u00e9 globale.<\/p>\n
Voici d’autres inconv\u00e9nients de la compression sans perte \u00e0 prendre en compte :<\/p>\n
\n- Si un site web utilise de nombreuses images, la compression sans perte peut ne pas \u00eatre optimale pour les afficher. En effet, dans la plupart des cas, vous voudrez privil\u00e9gier les tailles de fichiers plus petites dans ce type de situations.<\/li>\n
- Bien que la compression r\u00e9duise la taille des fichiers, les algorithmes sans perte n’alt\u00e8rent pas les donn\u00e9es d’image autant que les algorithmes avec perte. Pour cette raison, vous risquez de ne voir que des r\u00e9ductions marginales de la taille plut\u00f4t que des r\u00e9sultats de r\u00e9duction extr\u00eames.<\/li>\n<\/ul>\n
Ensuite, nous examinerons la fa\u00e7on la plus rapide (et potentiellement la meilleure) de le faire.<\/p>\n
Comment choisir entre la compression avec ou sans perte<\/h2>\n
\u00c0 ce stade, vous comprenez la diff\u00e9rence entre la compression avec ou sans perte. Cependant, vous ne savez peut-\u00eatre pas encore quel est le meilleur algorithme \u00e0 utiliser sur votre site.<\/p>\n
Il y a deux situations \u00e0 consid\u00e9rer :<\/p>\n
\n- Pour la plupart des cas d’utilisation sur le web, il est acceptable d’utiliser la compression avec perte.<\/li>\n
- Si vous souhaitez afficher des photographies ou des \u0153uvres d’art photographi\u00e9es, la compression sans perte vous servira mieux.<\/li>\n<\/ol>\n
Ces consid\u00e9rations reposent sur l’utilisation de l’un des formats d’image web standard, tels que JPEG, PNG ou GIF. Cependant, vos besoins de compression peuvent diff\u00e9rer avec des formats plus modernes comme HEIC et WebP.<\/p>\n
Nous irions m\u00eame jusqu’\u00e0 dire qu’\u00e0 moins d’afficher des photographies sur votre site, la compression avec perte devrait \u00eatre votre choix par d\u00e9faut. WordPress compresse les images<\/a> par d\u00e9faut, ce qui illustre bien que la compression avec perte convient \u00e0 presque toutes les applications.<\/p>\nUtilisation d’un service de compression en ligne pour optimiser vos images<\/h2>\n
Il existe de nombreuses fa\u00e7ons de compresser vos images avant de les afficher sur votre site. Par exemple, vous pouvez choisir d’appliquer la compression au stade de l’\u00e9dition. Cela pourrait \u00eatre un sous-produit de la conversion \u00e0 partir des formats RAW de toute fa\u00e7on.<\/p>\n
Certains h\u00e9bergeurs premium comme Kinsta proposent m\u00eame des services int\u00e9gr\u00e9s qui peuvent vous aider \u00e0 optimiser automatiquement vos fichiers d’images. La fonctionnalit\u00e9 d’optimisation des images de Kinsta<\/a>, qui est gratuite pour tous les clients, cr\u00e9e des versions WebP<\/a> de vos images, puis transmet la plus petite \u00e0 vos visiteurs en utilisant le CDN ultra-rapide<\/a> de Kinsta. Vous pouvez choisir entre la compression avec ou sans perte, et vous pouvez \u00e9galement activer ou d\u00e9sactiver la fonctionnalit\u00e9 \u00e0 volont\u00e9.<\/p>\nDepuis les outils int\u00e9gr\u00e9s, cependant, un choix populaire est l’un des nombreux services en ligne. Chacun d’entre eux offrira une s\u00e9lection d’algorithmes et une interface utilisateur (IU) exemplaire. De plus, la plupart proposent un service gratuit, au moins pour essayer l’application avant de vous engager.<\/p>\n
Nous couvrons quelques options dans notre article sur l’optimisation des images<\/a>, bien qu’il s’agisse d’extensions sp\u00e9cifiques \u00e0 WordPress qui se connectent \u00e0 une interface de programmation d’applications (API). La bonne nouvelle est que beaucoup de ces extensions offrent \u00e9galement une interface en ligne. Par exemple, pensez \u00e0 ShortPixel<\/a>:<\/p>\n![\"L'interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/shortpixel-interface.png\")
L’interface de ShortPixel.<\/figcaption><\/figure>\nIci, vous ferez glisser les images \u00e0 t\u00e9l\u00e9verser, puis vous attendrez que l’application les compresse et les traite. Cependant, vous voudrez d’abord choisir l’algorithme, car le processus commencera tout de suite.<\/p>\n
Le choix est simple : Deux formes de compression avec perte (\u00ab Lossy \u00bb et \u00ab Glossy \u00bb), et une option sans perte. L’interface de ShortPixel explique bien la diff\u00e9rence entre chaque algorithme, et vous pouvez t\u00e9l\u00e9charger les images en quelques secondes.<\/p>\n
Diff\u00e9rences entre avec et sans perte<\/h2>\n
Lorsqu’il s’agit de compressions d’images num\u00e9riques, il existe plusieurs formats diff\u00e9rents parmi lesquels choisir. Ceux-ci portent parfois d’autres noms en fonction de nombreux facteurs. Cependant, \u00e0 un niveau de base, vous trouverez deux types :<\/p>\n
- \n
- Compression avec perte :<\/b> L’objectif ici est de fournir la plus petite taille de fichier possible pour une image. \u00c0 ce titre, la qualit\u00e9 de l’image est souvent en bas de la liste des priorit\u00e9s.<\/li>\n
- Compression sans perte :<\/b> Vous trouverez toujours une r\u00e9duction substantielle de la taille du fichier avec ce format de compression, mais l’image ne souffrira pas d’artefacts et d’autres probl\u00e8mes.<\/li>\n<\/ul>\n
Dans la plupart des cas, votre d\u00e9cision concernant le format \u00e0 utiliser d\u00e9pendra de votre objectif final : voulez-vous des fichiers minuscules ou souhaitez-vous avant tout pr\u00e9server la qualit\u00e9 ?<\/p>\n
La compression avec perte supprime d\u00e9finitivement de l’image les donn\u00e9es qu’elle juge inutiles. Elle utilise de nombreuses techniques diff\u00e9rentes pour y parvenir, ce qui permet d’obtenir des fichiers beaucoup plus petits.<\/p>\n
La compression sans perte supprime \u00e9galement des donn\u00e9es, mais elle peut restaurer l’original si n\u00e9cessaire. L’objectif est de conserver une qualit\u00e9 \u00e9lev\u00e9e, tout en r\u00e9duisant la taille du fichier.<\/p>\n
Il existe plusieurs fa\u00e7ons d’y parvenir, mais le r\u00e9sultat est souvent le m\u00eame. Pour trouver la bonne option pour vos besoins, prenons d’abord un peu de recul et passons en revue les bases des images et de la compression en g\u00e9n\u00e9ral.<\/p>\n\n
\u00c9l\u00e9ments d’une image num\u00e9rique<\/h2>\n
Comme pour le d\u00e9veloppement de logiciels et de sites web, il y a souvent une \u00ab pile \u00bb pour faire passer une image de l’appareil photo au web.<\/p>\n
Une image commence sous forme de donn\u00e9es \u00ab brutes \u00bb (d’o\u00f9 le nom RAW). C’est un peu comme le code d’une application : Les snippets, lignes et valeurs se traduisent par des arri\u00e8re-plans avec de la couleur, des espaces r\u00e9serv\u00e9s aux images, des \u00e9l\u00e9ments dynamiques, etc.<\/p>\n
Pour une image, le fichier RAW pr\u00e9sente une repr\u00e9sentation l\u00e9g\u00e8rement diff\u00e9rente de l’image en fonction du fabricant de l’appareil photo, du logiciel d’\u00e9dition, de l’algorithme de l’espace couleur, etc. \u00c0 partir de l\u00e0, vous modifiez l’image et l’exportez dans l’un des nombreux formats de fichier (nous y reviendrons plus tard) :<\/p>\n
Un exemple de modification d’un fichier RAW dans Capture One.<\/figcaption><\/figure>\n Il y a quelques \u00e9l\u00e9ments diff\u00e9rents qui composent une image num\u00e9rique standard :<\/p>\n
- \n
- Type de fichier :<\/b> Diff\u00e9rents types fourniront des qualit\u00e9s qui conviendront ou non \u00e0 votre image finale. L’essentiel est de choisir le type de fichier le plus adapt\u00e9 \u00e0 l’application.<\/li>\n
- R\u00e9solution :<\/b> Vous la verrez souvent exprim\u00e9e en m\u00e9gapixels (MP), mais aussi en pixels par pouce (PPI) ou en points par pouce (DPI). Les r\u00e9solutions plus \u00e9lev\u00e9es offrent une meilleure qualit\u00e9, mais elles augmentent aussi la taille initiale du fichier<\/li>\n
- Profondeur de bits :<\/b> Cet aspect d\u00e9termine les informations de couleur dans une image. Une faible profondeur de bits ne rendra que quelques couleurs, tandis qu’une profondeur de bits \u00e9lev\u00e9e pourrait potentiellement rendre des millions de couleurs \u00e0 la fois. En g\u00e9n\u00e9ral, plus elle est \u00e9lev\u00e9e, mieux c’est.<\/li>\n
- Dimensions :<\/b> Il s’agit de l’espace physique qu’occupe une image. Par exemple, 1000 pixels x 500 pixels peuvent d\u00e9finir la taille totale d’une image.<\/li>\n
- Espace couleur :<\/b> Il s’agit d’un algorithme qui d\u00e9termine la fa\u00e7on dont les couleurs s’affichent. Chaque espace colorim\u00e9trique est configur\u00e9 diff\u00e9remment, et il s’agit souvent de la pr\u00e9f\u00e9rence du photographe.<\/li>\n<\/ul>\n
Ces \u00e9l\u00e9ments se combinent pour donner une image finale de qualit\u00e9 variable. Par exemple, une grande photo JPEG \u00e0 haute r\u00e9solution et \u00e0 haute profondeur de bits offrira une qualit\u00e9 et une nettet\u00e9 supr\u00eames :<\/p>\n
Une image de haute qualit\u00e9.<\/figcaption><\/figure>\n En revanche, m\u00eame une image ayant de grandes dimensions et la capacit\u00e9 d’afficher beaucoup de couleurs peut para\u00eetre m\u00e9diocre \u00e0 une faible r\u00e9solution :<\/p>\n
Une image de faible qualit\u00e9.<\/figcaption><\/figure>\n Cet \u00e9quilibre est la fa\u00e7on dont vous d\u00e9veloppez l’image de base avant d’appliquer la compression. Cependant, le format que vous utilisez pour l’image joue un r\u00f4le important dans la qualit\u00e9 finale.<\/p>\n
Comment fonctionne l’optimisation des images web<\/h2>\n
\u00c9tant donn\u00e9 que la compression d’image est la m\u00eame dans un sens g\u00e9n\u00e9ral sous le capot, vous pouvez appliquer des r\u00e8gles standard \u00e0 la fa\u00e7on dont vous optimisez les images pour le web.<\/p>\n
Nous couvrons un grand nombre de ces concepts ailleurs sur le blog Kinsta<\/a>, mais il est utile de faire un r\u00e9sum\u00e9 rapide pour r\u00e9f\u00e9rence :<\/p>\n
- \n
- Utilisez une r\u00e9solution de 72 PPI, car c’est la norme pour le web. Vous pouvez utiliser un PPI\/DPI plus \u00e9lev\u00e9 pour des raisons d’archivage, mais nous supposons que vous publiez sur le web.<\/li>\n
- D\u00e9finissez le \u00ab bord long \u00bb (long edge) de l’image \u00e0 2048 pixels, car cela est optimal pour de nombreuses applications diff\u00e9rentes.<\/li>\n
- Utilisez une profondeur de couleur de 8 bits si vous en avez la possibilit\u00e9.<\/li>\n
- Passez une image dans un outil de compression et d’optimisation avant de la publier.<\/li>\n<\/ul>\n
Il s’agit d’un format simple qui peut vous donner des r\u00e9sultats coh\u00e9rents, bien que la compression et l’optimisation soient des sujets que nous d\u00e9velopperons dans le reste de cet article.<\/p>\n
\u00c0 cette fin, examinons les avantages et les inconv\u00e9nients de la compression avec ou sans perte.<\/p>\n
Comment la compression d’image peut aider vos images web<\/h3>\n
En termes g\u00e9n\u00e9raux, la \u00ab compression \u00bb rapproche le minimum et le maximum. Par exemple, dans la musique, la compression augmente le volume le plus faible et r\u00e9duit le plus \u00e9lev\u00e9. Cela rend le niveau moyen plus fort \u00e0 l’oreille.<\/p>\n
Pour les images, la compression est davantage un processus r\u00e9ducteur. Cela signifie que l’accent est mis sur la suppression de donn\u00e9es de votre image pour r\u00e9duire la taille du fichier, tout en conservant une qualit\u00e9 aussi \u00e9lev\u00e9e que possible.<\/p>\n
Il existe de nombreux algorithmes propri\u00e9taires diff\u00e9rents pour aider \u00e0 r\u00e9duire la taille des fichiers image. Dans de nombreux cas, ils sont la propri\u00e9t\u00e9 d’une entreprise sp\u00e9cifique. Vous trouverez de nombreuses normes de compression \u00ab avec perte \u00bb et \u00ab sans perte \u00bb, chacune avec des descripteurs uniques :<\/p>\n
Les options de compression dans ShortPixel.<\/figcaption><\/figure>\n Tout cela \u00e9tant dit, il y a de nombreux avantages \u00e0 appliquer la compression d’image qui ne sont pas exclusifs \u00e0 un format particulier :<\/p>\n
- \n
- Vous pouvez maintenir la taille des fichiers \u00e0 un niveau bas, ce qui am\u00e9liore les performances de votre site.<\/li>\n
- Par extension, le serveur de votre site aura moins de travail \u00e0 faire, ce qui aura un impact sur les performances.<\/li>\n
- Les fichiers de petite taille contribuent \u00e0 r\u00e9duire les \u00e9missions du serveur. En tant que tel, vous contribuez \u00e0 un avenir durable et \u00e9thique.<\/li>\n
- Vous \u00eates en mesure d’afficher une qualit\u00e9 quasi parfaite et comparable selon l’algorithme et la qualit\u00e9 de compression que vous choisissez.<\/li>\n<\/ul>\n
Tout comme la cr\u00e9ation d’une image partageable, jouer avec diff\u00e9rentes valeurs de compression, utiliser une soci\u00e9t\u00e9 sp\u00e9cifique et choisir le bon algorithme sont des \u00e9l\u00e9ments essentiels pour trouver des r\u00e9sultats qui vous conviennent.<\/p>\n
Avantages et inconv\u00e9nients de la compression avec perte<\/h2>\n
La compression avec perte<\/a> r\u00e9duit la taille du fichier de l’image, presque \u00e0 l’exclusion de tous les autres aspects. Le mode de fonctionnement de l’algorithme consiste \u00e0 supprimer des donn\u00e9es de fa\u00e7on permanente. Cela peut \u00eatre aussi destructeur qu’il n’y para\u00eet.<\/p>\n
Nous n’entrerons pas trop dans les d\u00e9tails, mais sachez que certaines des donn\u00e9es supprim\u00e9es par la compression avec perte sont visibles dans l’image. L’id\u00e9e est d’offrir la meilleure repr\u00e9sentation de l’image originale de haute qualit\u00e9 \u00e0 un poids plus l\u00e9ger – et cela signifie que certaines donn\u00e9es ne passeront pas.<\/p>\n
En g\u00e9n\u00e9ral, l’utilisation de la compression avec perte pr\u00e9sente quelques avantages :<\/p>\n
- \n
- Les fichiers seront de petite taille – dans certains cas, moins de 10 Ko.<\/li>\n
- La perte de qualit\u00e9 sera acceptable dans de nombreux cas, malgr\u00e9 les artefacts.<\/li>\n<\/ul>\n
Cela nous am\u00e8ne aux inconv\u00e9nients de la compression avec perte, \u00e0 savoir que la qualit\u00e9 de l’image diminue quel que soit le degr\u00e9 de compression :<\/p>\n
Un curseur de compression pour une image JPEG.<\/figcaption><\/figure>\n Vous constaterez que les bandes de couleur – o\u00f9 les nuances de couleur ne sont pas rendues de la bonne mani\u00e8re – et une perte de clart\u00e9 des bords seront visibles dans certains cas. Les images avec moins de couleurs montreront moins de cela, mais la r\u00e9duction de la clart\u00e9 sera toujours pr\u00e9sente.<\/p>\n
En outre, la d\u00e9gradation de l’image est une caract\u00e9ristique permanente du processus de compression. Cela signifie qu’il n’y a aucun moyen d’inverser les effets \u00e0 une date ult\u00e9rieure.<\/p>\n
Malgr\u00e9 ces inconv\u00e9nients, la compression avec perte est excellente pour le web et les performances de votre site. La taille minuscule des fichiers ne se traduit pas toujours par des images granuleuses, m\u00eame si vous pouvez (bien s\u00fbr) pousser les choses \u00e0 l’extr\u00eame :<\/p>\n
<\/a>Un exemple d’image trop compress\u00e9e<\/figcaption><\/figure>\n Cependant, la compression avec perte n’est pas la seule option. La compression sans perte est une alternative pour le propri\u00e9taire de site soucieux de la qualit\u00e9.<\/p>\n
Avantages et inconv\u00e9nients de la compression sans perte<\/h2>\n
La compression sans perte fait ce qu’elle indique dans son nom : Elle comprime la taille du fichier d’une image autant que possible sans affecter la qualit\u00e9 visible. Pour cela, elle supprime les m\u00e9tadonn\u00e9es de l’image, qui peuvent occuper un espace inutile :<\/p>\n
Les m\u00e9tadonn\u00e9es d’une image.<\/figcaption><\/figure>\n L’algorithme de compression sans perte recherche \u00e9galement les s\u00e9quences de pixels r\u00e9p\u00e9titives, puis code un raccourci pour les afficher. Par exemple, prenez \u00ab Command Line Interface \u00bb Vous d\u00e9finirez souvent son acronyme une fois, puis utiliserez \u00ab CLI \u00bb (ou l’acronyme de votre choix) pour y faire r\u00e9f\u00e9rence \u00e0 la vitesse de l’\u00e9clair<\/p>\n
La compression sans perte fonctionne de la m\u00eame mani\u00e8re, en ce sens qu’elle est moins destructrice. Alors que la suppression des m\u00e9tadonn\u00e9es ne sera pas r\u00e9versible, une partie de la compression le sera, ce qui en fait un algorithme flexible pour de nombreuses utilisations.<\/p>\n
Les avantages de la compression sans perte sont li\u00e9s \u00e0 la conservation de la qualit\u00e9 :<\/p>\n
- \n
- La compression sans perte pr\u00e9serve le plus de qualit\u00e9 dans une image par rapport \u00e0 tous les autres algorithmes.<\/li>\n
- La compression sans perte est fantastique \u00e0 des fins d’archivage. Par exemple, un photographe peut \u00e9quilibrer les ressources de stockage avec une image qui pr\u00e9serve le plus de donn\u00e9es.<\/li>\n
- L’algorithme sans perte est l’algorithme de compression pr\u00e9f\u00e9r\u00e9 des arts visuels : photographie, conception graphique, art num\u00e9rique, etc. La combinaison d’un algorithme sans perte avec la profondeur et la r\u00e9solution appropri\u00e9es permet d’obtenir une copie presque \u00ab un pour un \u00bb.<\/li>\n<\/ul>\n
Cependant, il faut noter que la compression sans perte sert bien des niches sp\u00e9cifiques : L’\u00e9ventail d’applications est restreint. Cela r\u00e9duit sa disponibilit\u00e9 globale.<\/p>\n
Voici d’autres inconv\u00e9nients de la compression sans perte \u00e0 prendre en compte :<\/p>\n
- \n
- Si un site web utilise de nombreuses images, la compression sans perte peut ne pas \u00eatre optimale pour les afficher. En effet, dans la plupart des cas, vous voudrez privil\u00e9gier les tailles de fichiers plus petites dans ce type de situations.<\/li>\n
- Bien que la compression r\u00e9duise la taille des fichiers, les algorithmes sans perte n’alt\u00e8rent pas les donn\u00e9es d’image autant que les algorithmes avec perte. Pour cette raison, vous risquez de ne voir que des r\u00e9ductions marginales de la taille plut\u00f4t que des r\u00e9sultats de r\u00e9duction extr\u00eames.<\/li>\n<\/ul>\n
Ensuite, nous examinerons la fa\u00e7on la plus rapide (et potentiellement la meilleure) de le faire.<\/p>\n
Comment choisir entre la compression avec ou sans perte<\/h2>\n
\u00c0 ce stade, vous comprenez la diff\u00e9rence entre la compression avec ou sans perte. Cependant, vous ne savez peut-\u00eatre pas encore quel est le meilleur algorithme \u00e0 utiliser sur votre site.<\/p>\n
Il y a deux situations \u00e0 consid\u00e9rer :<\/p>\n
- \n
- Pour la plupart des cas d’utilisation sur le web, il est acceptable d’utiliser la compression avec perte.<\/li>\n
- Si vous souhaitez afficher des photographies ou des \u0153uvres d’art photographi\u00e9es, la compression sans perte vous servira mieux.<\/li>\n<\/ol>\n
Ces consid\u00e9rations reposent sur l’utilisation de l’un des formats d’image web standard, tels que JPEG, PNG ou GIF. Cependant, vos besoins de compression peuvent diff\u00e9rer avec des formats plus modernes comme HEIC et WebP.<\/p>\n
Nous irions m\u00eame jusqu’\u00e0 dire qu’\u00e0 moins d’afficher des photographies sur votre site, la compression avec perte devrait \u00eatre votre choix par d\u00e9faut. WordPress compresse les images<\/a> par d\u00e9faut, ce qui illustre bien que la compression avec perte convient \u00e0 presque toutes les applications.<\/p>\n
Utilisation d’un service de compression en ligne pour optimiser vos images<\/h2>\n
Il existe de nombreuses fa\u00e7ons de compresser vos images avant de les afficher sur votre site. Par exemple, vous pouvez choisir d’appliquer la compression au stade de l’\u00e9dition. Cela pourrait \u00eatre un sous-produit de la conversion \u00e0 partir des formats RAW de toute fa\u00e7on.<\/p>\n
Certains h\u00e9bergeurs premium comme Kinsta proposent m\u00eame des services int\u00e9gr\u00e9s qui peuvent vous aider \u00e0 optimiser automatiquement vos fichiers d’images. La fonctionnalit\u00e9 d’optimisation des images de Kinsta<\/a>, qui est gratuite pour tous les clients, cr\u00e9e des versions WebP<\/a> de vos images, puis transmet la plus petite \u00e0 vos visiteurs en utilisant le CDN ultra-rapide<\/a> de Kinsta. Vous pouvez choisir entre la compression avec ou sans perte, et vous pouvez \u00e9galement activer ou d\u00e9sactiver la fonctionnalit\u00e9 \u00e0 volont\u00e9.<\/p>\n
Depuis les outils int\u00e9gr\u00e9s, cependant, un choix populaire est l’un des nombreux services en ligne. Chacun d’entre eux offrira une s\u00e9lection d’algorithmes et une interface utilisateur (IU) exemplaire. De plus, la plupart proposent un service gratuit, au moins pour essayer l’application avant de vous engager.<\/p>\n
Nous couvrons quelques options dans notre article sur l’optimisation des images<\/a>, bien qu’il s’agisse d’extensions sp\u00e9cifiques \u00e0 WordPress qui se connectent \u00e0 une interface de programmation d’applications (API). La bonne nouvelle est que beaucoup de ces extensions offrent \u00e9galement une interface en ligne. Par exemple, pensez \u00e0 ShortPixel<\/a>:<\/p>\n
L’interface de ShortPixel.<\/figcaption><\/figure>\n Ici, vous ferez glisser les images \u00e0 t\u00e9l\u00e9verser, puis vous attendrez que l’application les compresse et les traite. Cependant, vous voudrez d’abord choisir l’algorithme, car le processus commencera tout de suite.<\/p>\n
Le choix est simple : Deux formes de compression avec perte (\u00ab Lossy \u00bb et \u00ab Glossy \u00bb), et une option sans perte. L’interface de ShortPixel explique bien la diff\u00e9rence entre chaque algorithme, et vous pouvez t\u00e9l\u00e9charger les images en quelques secondes.<\/p>\n
- R\u00e9solution :<\/b> Vous la verrez souvent exprim\u00e9e en m\u00e9gapixels (MP), mais aussi en pixels par pouce (PPI) ou en points par pouce (DPI). Les r\u00e9solutions plus \u00e9lev\u00e9es offrent une meilleure qualit\u00e9, mais elles augmentent aussi la taille initiale du fichier<\/li>\n
- Compression sans perte :<\/b> Vous trouverez toujours une r\u00e9duction substantielle de la taille du fichier avec ce format de compression, mais l’image ne souffrira pas d’artefacts et d’autres probl\u00e8mes.<\/li>\n<\/ul>\n
![\"L'interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/imagify-interface.png\")
![\"L'interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/kraken-interface.png\")
![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/kraken-expert-mode.png\")