Avoir des images attrayantes, claires et à chargement rapide sur votre site WordPress est l'un des moyens les plus efficaces d'attirer un utilisateur/client. Il y a une raison pour laquelle les concessionnaires automobiles passent tant de temps à s'assurer que les nouveaux modèles sont impeccables et étincelants. L'impact visuel d'un produit peut souvent être la décision décisive entre le succès et l'échec. Les salles d'exposition en ligne ne sont pas différentes, et il y a la complication supplémentaire de la façon dont une image peut avoir un impact sur votre vitesse de chargement. C'est une métrique bien utilisée et célèbre, qu'un utilisateur quittera un site Web s'il prend plus de 3 secondes à charger. Si un site Web prend plus de 3 secondes à se charger, il y a de fortes chances que les images que vous avez sur votre site en fassent partie.

Donc, en tant que propriétaire de site WordPress, que pouvez-vous faire pour vous assurer que les images que vous avez sur votre site sont à la fois attrayantes pour les utilisateurs et permettent à votre site de se charger rapidement. Votre instinct initial pourrait simplement être de réduire l'image d'une image de taille 1800 × 1400 à une image de taille 300 × 200. Ce serait la mauvaise ligne de conduite à suivre, car même si la taille de votre fichier image peut maintenant être beaucoup plus petite, la qualité de l'image et l'expérience utilisateur en ont souffert. Si vous avez un site Web de vente de voitures dans une salle d'exposition, par exemple, les clients voudront avoir un très bon aperçu de la voiture et pouvoir voir toutes les caractéristiques et tous les détails. En rendant l'image tellement plus petite, toute inspection détaillée de la voiture est désormais impossible - laissant le client potentiel frustré et regardant ailleurs.

Quelles sont donc vos options? Heureusement, vous pouvez choisir parmi des dizaines d'options de fichiers image différentes, allant du BMP de haute qualité mais de grande taille, au JPEG éprouvé et au nouveau format WebP largement inconnu. En plus de choisir le bon format, il est important de se rappeler que quel que soit le format que vous choisissez, vous pouvez également réduire la taille du fichier image en utilisant un processus via WP-Optimize appelé "compression".

La vitesse du site est l'un des 10 facteurs les plus importants que les robots de Google qui explorent votre site Web observent lorsqu'ils classent votre site dans les résultats de recherche. Une vitesse de chargement médiocre peut avoir un impact négatif sur le classement de votre site et peut facilement faire passer votre site de la première page à l'échec de l'indexation par Google. Google est très strict sur la façon dont il classe les sites dans son algorithme de recherche et s'il trouve que le site offre une mauvaise expérience utilisateur en raison de temps de chargement lents, il se peut qu'il ne se donne même pas la peine de l'explorer et de le rendre détectable via la recherche Google. .

Quel format d'image choisir ?

Comme les images de haute qualité sont si importantes pour tout site Web WordPress moderne, vous devez savoir quel format utiliser, comment elles affectent les performances de votre site et comment tirer le meilleur parti de votre sélection de fichiers.

Les deux formats de fichiers image les plus populaires pour les sites Web sont PNG et JPEG/JPG. Selon w3techs , plus de 70 % de tous les sites Web utilisent ces types de fichiers. Environ 30 % des sites utilisent SVG et 22 % utilisent GIF.

C'est là que les types de fichiers d'image entrent en jeu car le type de fichier que vous utilisez pour télécharger vos images joue un rôle important. Comme il existe de nombreux types de fichiers différents, nous allons passer en revue les plus populaires et leurs avantages et inconvénients ci-dessous :

Avant de nous lancer dans le type de fichier, nous devons comprendre certains concepts auparavant, comme ce que sont un raster et une image bitmap ? Qu'est-ce que la compression ? Quelle est la différence entre une compression avec perte et sans perte ?

Compression - Avec perte contre sans perte

Les deux types de compression visent à réduire la taille du fichier, mais c'est ce qu'ils suppriment qui compte vraiment. En compression avec perte ; les données importantes concernant la qualité de l'image sont supprimées. Cela peut se refléter dans l'image pixélisée dans certains cas car votre ordinateur peut avoir du mal à reconstruire l'image.

Dans la compression sans perte, les données non pertinentes présentes dans l'image (telles que les métadonnées) sont réduites, ce qui permet de réduire la taille du fichier. La qualité de l'image n'est pas affectée du tout dans ce processus.

Raster contre vecteur

Les types de fichiers image les plus couramment utilisés sont généralement basés sur raster. Cela signifie qu'ils ont une valeur de couleur RVB fixe associée à chaque pixel et que tous ces pixels sont combinés et utilisés pour créer une image entière.

Des exemples de ces formats de fichiers incluent jpg, png et gif.

Alternativement, une image vectorielle est créée à l'aide de formes et de lignes qui peuvent être mises à l'échelle à l'infini sans qu'elles ne soient jamais pixélisées. Les vecteurs sont créés à l'aide de formules mathématiques qui permettent aux utilisateurs de modifier les valeurs, sans affecter la qualité de l'image.

Maintenant que nous avons passé en revue les bases des images, nous pouvons maintenant examiner les détails des différents types de fichiers.

JPEG :

Il s'agit d'un format d'image numérique qui contient des données d'image compressées. Avec un taux de compression de 10:1, les images JPEG sont utilisées car elles sont très compactes. Le format JPEG contient des détails d'image importants et est le format d'image le plus populaire pour le partage de photos et d'autres images sur Internet. La petite taille de fichier des images JPEG peut également permettre aux utilisateurs de stocker des milliers d'images (par exemple sur un site d'art) sans avoir besoin d'espace de stockage supplémentaire sur votre site.

JPEG est un type de fichier de compression avec perte qui fonctionne bien pour les photos, mais il est recommandé d'utiliser un autre format lorsque vous travaillez avec des graphiques, comme PNG.

Un exemple de fichier image JPEG. Vous pouvez voir que les détails et la qualité ont été maintenus lors du téléchargement.

PNG :

PNG est un format d'image bitmap populaire et est l'abréviation de "Portable Graphics Format". Ce format a été créé comme une alternative au Graphics Interchange Format (GIF). PNG a quelques fonctionnalités intéressantes comme contenir des palettes de couleurs RVB 24 bits, des images en niveaux de gris et afficher des arrière-plans transparents. Une méthode de compression de données sans perte est également utilisée dans les images PNG lorsque vous travaillez sur des images ou des graphiques de haute qualité. Les images PNG sont également fréquemment utilisées dans l'édition d'images car elles peuvent donner à l'utilisateur plus de contrôle et d'options sur l'image par rapport au format JPEG traditionnel.

PNG utilise également un algorithme de compression sans perte, ce qui signifie que ce format peut conserver plus de données que JPG. Lors de l'utilisation d'un fichier image PNG, les utilisateurs peuvent également enregistrer ces images avec un arrière-plan transparent. En utilisant ce format, les utilisateurs ont la possibilité de travailler avec des images en couches pouvant afficher un arrière-plan clair (par exemple, uniquement les fleurs de l'image ci-dessous et non le mur d'arrière-plan), permettant aux utilisateurs d'ajouter l'image à d'autres images sans avoir besoin pour le découper et supprimer l'arrière-plan existant - comme vous le feriez avec une image JPEG. C'est l'une des principales raisons pour lesquelles c'est le choix préféré pour les graphiques tels que les diagrammes et les illustrations. Les PNG sont connus pour être plus populaires pour les utilisateurs travaillant avec des graphiques, plutôt que pour télécharger des photos standard.

Une image PNG conserve une haute qualité, tout en vous permettant d'avoir plus de contrôle sur l'image

GIF :

Vous connaissez probablement mieux le terme "GIF" grâce aux innombrables courts clips qui vous sont envoyés sur les applications de messagerie. GIF signifie "Graphics Interchange Format" et est principalement utilisé pour prendre en charge l'animation sans audio

Contrairement au JPEG et au PNG, les GIF sont utilisés dans un cas plus spécialisé et ne sont généralement pas utilisés pour les images statiques (bien que cela soit possible). Si vous utilisez un GIF sur votre site WordPress, c'est très probablement pour montrer aux visiteurs une animation ou un processus simple. Les GIF ont une gamme de couleurs limitée et sont mieux utilisés pour les graphiques simples. Ils utilisent une compression sans perte et ont tendance à être plus petits que les JPG. Il est généralement recommandé de n'utiliser les GIFs qu'avec parcimonie dans votre site, car ils peuvent augmenter les temps de chargement (compte tenu de la taille du fichier) et sont limités à 256 couleurs.

Un exemple d'image GIF. La qualité de l'image originale a été considérablement réduite afin de produire l'animation.

SVG :

Scalable Vector Graphics (SVG) est un format de fichier vectoriel adapté au Web. Contrairement aux fichiers d'image raster basés sur des pixels comme les JPEG, les fichiers vectoriels stockent les images via des formules mathématiques basées sur des points et des lignes sur une grille. Cela signifie que les fichiers vectoriels comme SVG peuvent être redimensionnés de manière significative sans rien perdre de leur qualité, ce qui les rend idéaux pour les logos et les graphiques en ligne complexes.

Les vecteurs ne conviennent que pour les graphiques, les formes et les illustrations simples. Les SVG sont un bon choix pour les logos, surtout si vous avez besoin que votre logo soit réactif et qu'ils soient pris en charge par la plupart des navigateurs, notamment Chrome, Firefox, Edge et Opera.

Un exemple de tournesols au format SVG que vous utiliseriez pour un logo.

BMP :

BITMAP est désormais considéré comme un format d'image obsolète. BMP charge les images dans un format d'image sans perte, ce qui peut entraîner des tailles de fichiers énormes en raison du manque de compression. Compte tenu de l'importance de la vitesse de chargement et de la volonté des créateurs de sites de réduire au minimum la taille des images (sans parler de la popularité des formats SVG et JPEG), ce format est devenu largement inutilisé pour les images en ligne.

La qualité d'origine de l'image est conservée lors du téléchargement au format BMP, mais la taille du fichier ralentira considérablement votre site et n'est pas recommandée.

WebP :

Ce format d'image a été créé par Google en 2010 et commence à être populaire auprès des personnes qui téléchargent de nombreuses images sur leur site car il présente plusieurs avantages par rapport au JPEG et au PNG, tels que de meilleures performances de compression avec et sans perte.

WebP télécharge également généralement des fichiers de plus petite taille que les formats JPEG ou PNG compte tenu de ses performances de compression améliorées et occupera moins d'espace sur votre site, ce qui lui permettra de se charger plus rapidement. Bien qu'il ne soit pas pris en charge par tous les navigateurs, il est pris en charge par tous les navigateurs les plus populaires, notamment Chrome, Firefox, Edge et Opera.

Bien qu'il ne soit pas aussi connu que JPEG et PNG, WebP pourrait s'avérer être le format d'image de choix à l'avenir.

Conclusion:

Il existe de nombreux types de formats d'image qui peuvent être utilisés sur votre site WordPress, mais il est important d'évaluer le but de l'image. Si votre site est destiné à un photographe de mariage par exemple, vous souhaiterez conserver des images de haute qualité qui se chargent toujours rapidement et sont conviviales ( JPEG ). Toutefois, si vous vendez des images dans un magasin d'affiches en ligne, vous souhaiterez conserver autant de détails et d'informations d'image que possible ( PNG ).

En règle générale, si vous ne faites que télécharger des images standard pour votre boutique en ligne, votre blog, votre portfolio, vos réseaux sociaux ou votre site de médias sociaux, il est recommandé de télécharger vos images au format JPEG standard, puis d'utiliser WP-Optimize. pour compresser davantage vos images

Cependant, si vous souhaitez pérenniser vos images et améliorer autant que possible votre vitesse de chargement, WebP peut offrir une compression supérieure avec et sans perte, tout en conservant des niveaux de détails élevés. Quoi que vous décidiez, n'oubliez pas de toujours compresser vos images à l'aide de WP-Optimize pour la compression leader du marché.