L’utilisation d’images de bonne qualité́ et sous un bon format est important pour la performance d’un site Internet. Découvrez à travers cet article les points clés pour un meilleur visuel de votre entreprise, blog ou site personnel.
Pourquoi est-il important de choisir le bon format d’image ?
Rapidité́ et performance : Une image avec un poids conséquent peut affecter le temps de chargement d’un site Internet et donc sa performance. Cela a un impact sur l’expérience utilisateur.
Un meilleur référencement naturel : Le temps de chargement des pages est un facteur à considérer pour un bon classement au niveau du référencement naturel (SEO).
Un design réactif et adapté sur tout type d’écrans : Il est important de s’assurer qu’une image optimale et adaptée à tout support électronique et navigateur internet est choisie, pour une bonne expérience utilisateur.
Esthétique : Selon le choix de format d’image, ce dernier peut déterminer sa qualité et son rendu après compression. C’est un détail qui permet de rendre votre site internet plus professionnel et crédible pour vos prospects.
Quel est le meilleur format image à utiliser ?
Il existe trois formats principalement utilisés par la majorité des sites internet. Nous retrouvons les formats JPEG, PNG et GIF.
Le format JPEG (également connu sous le nom de JPG) est une abréviation de Joint Photographic Experts Group. Les images de ce format sont connues pour leur capacité à supporter des traitements de haute compression. Sa capacité d’afficher des millions de coloris est un atout parfait pour la publication de photographies et d’images présentant des couleurs vives.
Ce format d’image supporte la perte de compression avec une conséquence minime sur la qualité de l’image, à la suite d’une optimisation. Il est aussi possible de gérer le niveau de compression afin d’obtenir un résultat à la fois performant et qualitatif. Cependant, le format JPEG ne supporte pas les images avec fond transparent.
Le format PNG est une abréviation de Portable Network Graphics. C’est un format d’image qui a été initialement conçu pour transférer les images à travers la toile. Le PNG possède aussi la capacité d’afficher des millions de coloris tout comme le format JPEG. Néanmoins, le poids de son fichier est plus important. C’est un format principalement recommandé pour des fichiers tels que les logos, infographies et bannières.
Grâce aux algorithmes de compression sans perte sous forme PNG, aucune donnée n’est perdue lors de son optimisation. Ces images sont donc plus nettes et détaillées que celles compressées en JPEG. De plus, les arrière-plans transparents sont supportés sous forme PNG.
Le format GIF est une abréviation de Graphics Interchange Format. C’est un format d’image qui contient de 2 à 256 couleurs parmi 16,7 millions dans sa palette.
Un GIF animé est tout simplement un fichier qui contient une succession d’images, dans le but de créer une animation. C’est un format qui est supporté par plusieurs navigateurs, ce qui le rend particulièrement populaire pour la réalisation d’images animées. GIF utilise la compression sans perte afin de réduire la taille des fichiers sans altérer la qualité visuelle. Ce format supporte les étiquettes de texte et les arrière-plans transparents, devenant ainsi le format parfait pour les animations simples et les vidéos de basse résolution.
Quelles sont les conséquences d’un choix d’utilisation d’image sous un mauvais format ?
Il est difficile d’apercevoir l’impact d’une image enregistrée sous un mauvais format. En effet, il n’est pas évident de reconnaître la différence d’un visuel graphique enregistré sous format JPEG et une photo enregistrée sous format PNG à l’œil nu.
Ce n’est seulement lors du moment de compression qu’il est possible de remarquer la différence.
Il est important qu’une image téléchargée sur un site internet soit à chaque fois compressée. Cela permet de réduire sa taille sans pour autant affaiblir sa qualité. Dans le cas contraire, l’utilisation du site se verra ralentie. L’expérience utilisateur est alors impactée, poussant les visiteurs à quitter la page web.
Lorsque votre site est visité par un utilisateur, son appareil électronique télécharge instantanément les images afin de les rendre visibles. Il est alors logique que plus les fichiers sont importants, plus le téléchargement de ces derniers soit long. Ce qui résulte finalement à un chargement ralenti de votre page internet.
D’après Neil Patel, 47 % des utilisateurs s’attendent à un chargement de page en moins de 2 secondes. 40 % envisagent de quitter la page si le chargement va au-delà de 3 secondes. La rapidité est donc incontestable en matière de référencement naturel.
Google, par exemple, prend en compte le temps de chargement des sites web afin d’organiser le classement d’apparition de ces derniers lorsqu’une recherche est lancée. Si votre page internet prend du temps à charger, cette dernière aura moins de chances d’être bien référencée. Elle apparaîtra dans un classement plus bas dans les résultats de recherche. La compression d’image peut être définie comme un ajustement entre la réduction de la taille d’un fichier et la conservation de sa qualité afin d’améliorer l’expérience utilisateur.
Comment choisir entre un format JPEG et un format PNG ?
Lorsqu’une même photographie est compressée sous format JPEG ou PNG, la différence de qualité est presque imperceptible. Il est possible de remarquer un peu de grain si l’on observe bien le JPEG ; mais rien de bien grave qui pourrait empêcher son utilisation. Cependant, le format JPEG sera considérablement plus léger en taille comparée au format PNG. Donc le choix du JPEG semblerait être plus judicieux de ce côté.
Cependant, lorsqu’un même graphique est compressé en JPEG ou en PNG, l’écart de la qualité est apparent. Alors que le JPEG sera plus petit en taille de fichier, le format PNG aura une apparence plus détaillée et propre. Il est alors recommandé que les photos soient compressées sous format JPEG et que les fichiers et les graphiques soient compressés sous format PNG.
Comment modifier la dimension de votre image
S’il est important de savoir quel format d’image utiliser, il faut aussi connaître les dimensions que l’on peut utiliser avec WordPress.
WordPress propose 4 tailles d’image prédéterminées une fois que vous l’avez chargée :
thumbnail : 150 px carré
medium : 300px de largeur et hauteur maximum
large : 1024px de largeur et hauteur maximum
full size : garde la taille originale de l’image téléchargée
Cela donne alors la possibilité de déterminer la taille de votre image sans avoir à la redimensionner manuellement. Il reste toutefois possible de personnaliser la dimension de votre image si les options proposées ne correspondent pas à vos attentes. Vous devez, en 4 étapes :
- Vous diriger vers le tableau de bord WordPress
- Cliquer sur Réglages — Médias
- Dans les réglages médias, modifier la largeur et hauteurs aux dimensions souhaitées
- Confirmer la modification en cliquant sur Enregistrer les modifications
Le plugin Visual Composer
Pour faire simple, Visual Composer est un outil qui utilise la taille d’image réglée par défaut par WordPress lorsqu’il repère des éléments mobilisant des images. Modifier la taille par défaut à partir des réglages dans l’onglet Médias va également la changer dans l’outil de création de sites web. Il n’est donc pas nécessaire de coder pour insérer une image.
L’optimisation intelligente des images est une fonctionnalité́ que possède Visual Composer. Si vous personnalisez les dimensions d’une image en choisissant une taille aléatoire, Visual Composer va automatiquement la redimensionner en utilisant le langage PHP, plutôt que de se limiter à juste le réduire. Cette fonctionnalité́ contribue à garder une taille de fichier légère.
Les images en arrière-plan qui ne sont pas directement liées aux éléments de contenu tel que les descriptions peuvent être modifiées dans l’onglet Design. La customisation de l’image, le téléchargement de plusieurs images, le choix de différents types d’arrière-plans ou encore le positionnement d’une image sont des options disponibles à partir de ces réglages. Le fait que les thèmes soient réactifs signifie que la taille des images choisie se redimensionnera automatiquement afin de concorder avec l’appareil utilisé lors de la visite de votre site web. Il est aussi possible d’avoir un aperçu de votre mise en page web sur les appareils électroniques les plus utilisés.
Les images dans Divi
L’intégration d’images dans Divi est abordé dans la formation Découvrir Divi.
Pour aller beaucoup plus loin, si vous êtes dans les métiers du Web ou sentez que vous la fibre pour explorer ces sujets en détails, il existe la formation Divi Intégration Web qui dissèque au pixel près ces considérations sur les images dans le Web et dans WordPress.
L’importance de la taille d’image
La taille de l’image en pixel est tout aussi importante que le poids de son fichier. Dans le cas où une image n’est pas ajustée à la bonne taille, cela peut engendrer des conséquences telles que :
- un rendu flou et pixelisé
- des défilements latéraux non nécessaires sur la page
- des incohérences sur la mise en page
Les tailles d’images recommandées pour un contenu WordPress
Dans le cas où les suggestions WordPress ne correspondent pas à vos besoins initiaux lorsque vous chargez votre image, voici une liste de tailles recommandées pour un contenu esthétique et adaptées sur tout écran.
- Article de blog : 1200 x 630px
- Bannière en grand écran : 2880 x 1500px
- Image format paysage : 900 x 1200px
- Image format portrait : 1200 x 900Px
- Diaporama en plein écran : 2800 x 1500px
- Galerie d’images : 1500px x largeur automatique
Pour résumer, l’ajout et la gestion des images sont une partie importante pour votre site internet. C’est ce qui permet de donner une identité́ propre à celui-ci et donc par extension l’identité́ de votre projet. La bonne gestion d’images permet aussi d’optimiser votre site, le rendre plus accessible et plus fluide, améliorant l’expérience utilisateur sur votre site. Après avoir compris l’importance et l’utilité́ de chaque format, vous pouvez intégrer et gérer facilement ces images à votre site via WordPress.
Le module 7 de la formation WordPress est consacré aux médias dans WordPress :
- La médiathèque
- Edition des champs d’une image
- L’éditeur d’image de WordPress
- Galeries d’images
Vous souhaitez de l’aide pour améliorer l’intégration des images dans votre site, choisir les bons formats, les bonnes images, les bonnes dimensions ? Réservez maintenant 1 heure de coaching Web personnalisé avec notre expert en partage d’écran.
0 commentaires