Les images numériques sont une partie inhérente du web, et il est difficile de créer un contenu quelconque sans un certain média. L’image est toujours un moyen formidable d’offrir un contexte supplémentaire à vos écrits.
Cependant, une image peut avoir une taille de fichier énorme sans optimisation. La compression avec perte (Lossy) ou sans perte (Lossless) est une considération courante car chacune d’entre elles peut réduire la taille d’une image, bien qu’il faille également tenir compte des compromis en matière de qualité.
Vous aurez presque toujours besoin d’appliquer une certaine compression à une image. Cela permet de maintenir la qualité à un niveau que vous jugez acceptable tout en réduisant la taille des fichiers. Le choix du bon niveau de compression dépendra de vos objectifs finaux et de vos exigences.
Pour cet article, nous allons examiner la compression avec ou sans perte. Tout au long de cette lecture, nous parlerons du processus qu’une image suit pour se « mettre en forme », de ce qu’est la compression et de nombreux autres aspects de l’optimisation de vos images.
Consultez notre guide vidéo sur la compression avec ou sans perte
Différences entre avec et sans perte
Lorsqu’il s’agit de compressions d’images numériques, il existe plusieurs formats différents parmi lesquels choisir. Ceux-ci portent parfois d’autres noms en fonction de nombreux facteurs. Cependant, à un niveau de base, vous trouverez deux types :
- Compression avec perte : L’objectif ici est de fournir la plus petite taille de fichier possible pour une image. À ce titre, la qualité de l’image est souvent en bas de la liste des priorités.
- Compression sans perte : Vous trouverez toujours une réduction substantielle de la taille du fichier avec ce format de compression, mais l’image ne souffrira pas d’artefacts et d’autres problèmes.
Dans la plupart des cas, votre décision concernant le format à utiliser dépendra de votre objectif final : voulez-vous des fichiers minuscules ou souhaitez-vous avant tout préserver la qualité ?
La compression avec perte supprime définitivement de l’image les données qu’elle juge inutiles. Elle utilise de nombreuses techniques différentes pour y parvenir, ce qui permet d’obtenir des fichiers beaucoup plus petits.
La compression sans perte supprime également des données, mais elle peut restaurer l’original si nécessaire. L’objectif est de conserver une qualité élevée, tout en réduisant la taille du fichier.
Il existe plusieurs façons d’y parvenir, mais le résultat est souvent le même. 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énéral.
Éléments d’une image numérique
Comme pour le développement de logiciels et de sites web, il y a souvent une « pile » pour faire passer une image de l’appareil photo au web.
Une image commence sous forme de données « brutes » (d’où le nom RAW). C’est un peu comme le code d’une application : Les snippets, lignes et valeurs se traduisent par des arrière-plans avec de la couleur, des espaces réservés aux images, des éléments dynamiques, etc.
Pour une image, le fichier RAW présente une représentation légèrement différente de l’image en fonction du fabricant de l’appareil photo, du logiciel d’édition, de l’algorithme de l’espace couleur, etc. À partir de là, vous modifiez l’image et l’exportez dans l’un des nombreux formats de fichier (nous y reviendrons plus tard) :
Il y a quelques éléments différents qui composent une image numérique standard :
- Type de fichier : Différents types fourniront des qualités qui conviendront ou non à votre image finale. L’essentiel est de choisir le type de fichier le plus adapté à l’application.
- Résolution : Vous la verrez souvent exprimée en mégapixels (MP), mais aussi en pixels par pouce (PPI) ou en points par pouce (DPI). Les résolutions plus élevées offrent une meilleure qualité, mais elles augmentent aussi la taille initiale du fichier
- Profondeur de bits : Cet aspect détermine les informations de couleur dans une image. Une faible profondeur de bits ne rendra que quelques couleurs, tandis qu’une profondeur de bits élevée pourrait potentiellement rendre des millions de couleurs à la fois. En général, plus elle est élevée, mieux c’est.
- Dimensions : Il s’agit de l’espace physique qu’occupe une image. Par exemple, 1000 pixels x 500 pixels peuvent définir la taille totale d’une image.
- Espace couleur : Il s’agit d’un algorithme qui détermine la façon dont les couleurs s’affichent. Chaque espace colorimétrique est configuré différemment, et il s’agit souvent de la préférence du photographe.
Ces éléments se combinent pour donner une image finale de qualité variable. Par exemple, une grande photo JPEG à haute résolution et à haute profondeur de bits offrira une qualité et une netteté suprêmes :
En revanche, même une image ayant de grandes dimensions et la capacité d’afficher beaucoup de couleurs peut paraître médiocre à une faible résolution :
Cet équilibre est la façon dont vous développez l’image de base avant d’appliquer la compression. Cependant, le format que vous utilisez pour l’image joue un rôle important dans la qualité finale.
Comment fonctionne l’optimisation des images web
Étant donné que la compression d’image est la même dans un sens général sous le capot, vous pouvez appliquer des règles standard à la façon dont vous optimisez les images pour le web.
Nous couvrons un grand nombre de ces concepts ailleurs sur le blog Kinsta, mais il est utile de faire un résumé rapide pour référence :
- Utilisez une résolution de 72 PPI, car c’est la norme pour le web. Vous pouvez utiliser un PPI/DPI plus élevé pour des raisons d’archivage, mais nous supposons que vous publiez sur le web.
- Définissez le « bord long » (long edge) de l’image à 2048 pixels, car cela est optimal pour de nombreuses applications différentes.
- Utilisez une profondeur de couleur de 8 bits si vous en avez la possibilité.
- Passez une image dans un outil de compression et d’optimisation avant de la publier.
Il s’agit d’un format simple qui peut vous donner des résultats cohérents, bien que la compression et l’optimisation soient des sujets que nous développerons dans le reste de cet article.
À cette fin, examinons les avantages et les inconvénients de la compression avec ou sans perte.
Comment la compression d’image peut aider vos images web
En termes généraux, la « compression » rapproche le minimum et le maximum. Par exemple, dans la musique, la compression augmente le volume le plus faible et réduit le plus élevé. Cela rend le niveau moyen plus fort à l’oreille.
Pour les images, la compression est davantage un processus réducteur. Cela signifie que l’accent est mis sur la suppression de données de votre image pour réduire la taille du fichier, tout en conservant une qualité aussi élevée que possible.
Il existe de nombreux algorithmes propriétaires différents pour aider à réduire la taille des fichiers image. Dans de nombreux cas, ils sont la propriété d’une entreprise spécifique. Vous trouverez de nombreuses normes de compression « avec perte » et « sans perte », chacune avec des descripteurs uniques :
Tout cela étant dit, il y a de nombreux avantages à appliquer la compression d’image qui ne sont pas exclusifs à un format particulier :
- Vous pouvez maintenir la taille des fichiers à un niveau bas, ce qui améliore les performances de votre site.
- Par extension, le serveur de votre site aura moins de travail à faire, ce qui aura un impact sur les performances.
- Les fichiers de petite taille contribuent à réduire les émissions du serveur. En tant que tel, vous contribuez à un avenir durable et éthique.
- Vous êtes en mesure d’afficher une qualité quasi parfaite et comparable selon l’algorithme et la qualité de compression que vous choisissez.
Tout comme la création d’une image partageable, jouer avec différentes valeurs de compression, utiliser une société spécifique et choisir le bon algorithme sont des éléments essentiels pour trouver des résultats qui vous conviennent.
Avantages et inconvénients de la compression avec perte
La compression avec perte réduit la taille du fichier de l’image, presque à l’exclusion de tous les autres aspects. Le mode de fonctionnement de l’algorithme consiste à supprimer des données de façon permanente. Cela peut être aussi destructeur qu’il n’y paraît.
Nous n’entrerons pas trop dans les détails, mais sachez que certaines des données supprimées par la compression avec perte sont visibles dans l’image. L’idée est d’offrir la meilleure représentation de l’image originale de haute qualité à un poids plus léger – et cela signifie que certaines données ne passeront pas.
En général, l’utilisation de la compression avec perte présente quelques avantages :
- Les fichiers seront de petite taille – dans certains cas, moins de 10 Ko.
- La perte de qualité sera acceptable dans de nombreux cas, malgré les artefacts.
Cela nous amène aux inconvénients de la compression avec perte, à savoir que la qualité de l’image diminue quel que soit le degré de compression :
Vous constaterez que les bandes de couleur – où les nuances de couleur ne sont pas rendues de la bonne manière – et une perte de clarté des bords seront visibles dans certains cas. Les images avec moins de couleurs montreront moins de cela, mais la réduction de la clarté sera toujours présente.
En outre, la dégradation de l’image est une caractéristique permanente du processus de compression. Cela signifie qu’il n’y a aucun moyen d’inverser les effets à une date ultérieure.
Malgré ces inconvénients, 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ême si vous pouvez (bien sûr) pousser les choses à l’extrême :
Cependant, la compression avec perte n’est pas la seule option. La compression sans perte est une alternative pour le propriétaire de site soucieux de la qualité.
Avantages et inconvénients de la compression sans perte
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é visible. Pour cela, elle supprime les métadonnées de l’image, qui peuvent occuper un espace inutile :
L’algorithme de compression sans perte recherche également les séquences de pixels répétitives, puis code un raccourci pour les afficher. Par exemple, prenez « Command Line Interface » Vous définirez souvent son acronyme une fois, puis utiliserez « CLI » (ou l’acronyme de votre choix) pour y faire référence à la vitesse de l’éclair
La compression sans perte fonctionne de la même manière, en ce sens qu’elle est moins destructrice. Alors que la suppression des métadonnées ne sera pas réversible, une partie de la compression le sera, ce qui en fait un algorithme flexible pour de nombreuses utilisations.
Les avantages de la compression sans perte sont liés à la conservation de la qualité :
- La compression sans perte préserve le plus de qualité dans une image par rapport à tous les autres algorithmes.
- La compression sans perte est fantastique à des fins d’archivage. Par exemple, un photographe peut équilibrer les ressources de stockage avec une image qui préserve le plus de données.
- L’algorithme sans perte est l’algorithme de compression préféré des arts visuels : photographie, conception graphique, art numérique, etc. La combinaison d’un algorithme sans perte avec la profondeur et la résolution appropriées permet d’obtenir une copie presque « un pour un ».
Cependant, il faut noter que la compression sans perte sert bien des niches spécifiques : L’éventail d’applications est restreint. Cela réduit sa disponibilité globale.
Voici d’autres inconvénients de la compression sans perte à prendre en compte :
- Si un site web utilise de nombreuses images, la compression sans perte peut ne pas être optimale pour les afficher. En effet, dans la plupart des cas, vous voudrez privilégier les tailles de fichiers plus petites dans ce type de situations.
- Bien que la compression réduise la taille des fichiers, les algorithmes sans perte n’altèrent pas les données d’image autant que les algorithmes avec perte. Pour cette raison, vous risquez de ne voir que des réductions marginales de la taille plutôt que des résultats de réduction extrêmes.
Ensuite, nous examinerons la façon la plus rapide (et potentiellement la meilleure) de le faire.
Comment choisir entre la compression avec ou sans perte
À ce stade, vous comprenez la différence entre la compression avec ou sans perte. Cependant, vous ne savez peut-être pas encore quel est le meilleur algorithme à utiliser sur votre site.
Il y a deux situations à considérer :
- Pour la plupart des cas d’utilisation sur le web, il est acceptable d’utiliser la compression avec perte.
- Si vous souhaitez afficher des photographies ou des œuvres d’art photographiées, la compression sans perte vous servira mieux.
Ces considérations 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érer avec des formats plus modernes comme HEIC et WebP.
Nous irions même jusqu’à dire qu’à moins d’afficher des photographies sur votre site, la compression avec perte devrait être votre choix par défaut. WordPress compresse les images par défaut, ce qui illustre bien que la compression avec perte convient à presque toutes les applications.
Utilisation d’un service de compression en ligne pour optimiser vos images
Il existe de nombreuses façons de compresser vos images avant de les afficher sur votre site. Par exemple, vous pouvez choisir d’appliquer la compression au stade de l’édition. Cela pourrait être un sous-produit de la conversion à partir des formats RAW de toute façon.
Certains hébergeurs premium comme Kinsta proposent même des services intégrés qui peuvent vous aider à optimiser automatiquement vos fichiers d’images. La fonctionnalité d’optimisation des images de Kinsta, qui est gratuite pour tous les clients, crée des versions WebP de vos images, puis transmet la plus petite à vos visiteurs en utilisant le CDN ultra-rapide de Kinsta. Vous pouvez choisir entre la compression avec ou sans perte, et vous pouvez également activer ou désactiver la fonctionnalité à volonté.
Depuis les outils intégrés, cependant, un choix populaire est l’un des nombreux services en ligne. Chacun d’entre eux offrira une sélection 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.
Nous couvrons quelques options dans notre article sur l’optimisation des images, bien qu’il s’agisse d’extensions spécifiques à WordPress qui se connectent à une interface de programmation d’applications (API). La bonne nouvelle est que beaucoup de ces extensions offrent également une interface en ligne. Par exemple, pensez à ShortPixel:
Ici, vous ferez glisser les images à téléverser, 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.
Le choix est simple : Deux formes de compression avec perte (« Lossy » et « Glossy »), et une option sans perte. L’interface de ShortPixel explique bien la différence entre chaque algorithme, et vous pouvez télécharger les images en quelques secondes.
Bien que les deux puissent répondre à vos demandes, l’interface d’Imagify semble plus élégante et plus professionnelle que celle de ShortPixel. Il y a également trois « niveaux de compression » ici – Normal, Agressif et Ultra :
La légère différence ici est qu’Imagify commence par une compression sans perte, et va jusqu’à un algorithme avec perte avec de lourds artefacts. Cependant, il existe quelques autres options que vous ne trouverez pas dans d’autres solutions.
Pour commencer, vous pouvez conserver les données EXIF intactes pour votre image, et même les redimensionner après la conversion. Cela s’avère parfois inestimable, surtout si vous souhaitez appliquer un niveau de compression qui, autrement, pourrait supprimer les données EXIF ou limiter la façon dont vous redimensionnez une image.
À l’instar de son homonyme mythique, Kraken peut se battre avec vos images et appliquer différents types de compression. La plupart des utilisateurs opteront pour les types Lossy ou Lossless.
Cependant, il existe également un mode Expert :
Cela vous permet d’ajuster la compression à vos propres besoins, entre autres options. Par exemple, vous pouvez ajuster les niveaux de compression JPEG et PNG, choisir de préserver les métadonnées de l’image, et même travailler avec le sous-échantillonnage chroma pour modifier davantage les couleurs.
Résumé
Les images peuvent sembler être un aspect simple de votre site : Vous prenez un fichier, vous le téléversez sur WordPress, puis ajoutez un bloc d’images pour l’afficher.
Cependant, le processus de préparation d’une image pour le web est bien plus complexe que vous ne le pensez. Le format de compression que vous choisissez peut avoir un impact sur la taille du fichier, la qualité de l’image, et plus encore.
Cet article a examiné la compression avec ou sans perte et a résumé celle que vous devriez choisir. Bien qu’elle soit sur la corde raide de la qualité par rapport à la taille, la compression avec perte est parfaite pour la plupart des cas d’utilisation sur le web. Les photographes ou ceux qui s’inquiètent d’altérer la qualité des images voudront utiliser la compression sans perte, bien qu’il y ait moins d’avantages concernant la taille du fichier.
De quel côté vous situez-vous dans la bataille entre la compression avec ou sans perte ? Faites-nous part de vos réflexions dans la section des commentaires ci-dessous !
Salman Ravoof est un développeur web autodidacte, un écrivain, un créateur et un grand admirateur des logiciels libres. Outre la technologie, il est passionné par la science, la philosophie, la photographie, les arts, les chats et la nourriture. Apprenez-en plus sur son site web, et connectez-vous avec Salman sur X.
Laisser un commentaire