Les images sont au cœur de la création de votre site Web. Illustrations, photos, pictogrammes ou textures contribuent à l’établissement de votre image de marque et dynamisent votre contenu afin de soutenir l’intérêt de vos clients.
Or, les images doivent être préparées soigneusement avant d’être placées en ligne puisqu’elles auront une incidence sur les performances de votre site Web. En effet, le poids des images Web, souvent synonyme d’une bonne qualité visuelle, aura un impact considérable sur le temps de chargement de chacune de vos pages. Ainsi, une image de grande dimension très détaillée, dont la qualité sera optimale, sera très lourde et donc longue à télécharger pour l’internaute, ce qui augmentera le délai d’affichage de votre page. Un site Web lent n’est pas idéal puisqu’il nuira à l’expérience de votre client.
Pour obtenir un fichier image moins volumineux, plusieurs paramètres sont à considérer. D’abord, il s’agit de choisir le bon format, tel que décrit plus bas dans l’article. Ensuite, il est important de considérer les dimensions de l’image Web : par exemple, si une image est présentée dans des dimensions de 300 x 300 pixels, inutile de téléverser une image de 2000 x 2000 pixels. En redimensionnant vos images avant de les téléverser sur votre site, vous conservez seulement l’information pertinente et optimisez ainsi le temps de téléchargement. Finalement, avec certains formats d’images, il est aussi possible de jouer sur la qualité de l’image pour en diminuer le poids. À l’aide d’extensions (par exemple Smush) ou de logiciels de graphisme (tel Photoshop), il est possible de supprimer certaines informations de l’image sans que ce soit trop apparent et donc ainsi accélérer la vitesse d’apparition de vos images.
Choisir le bon format pour chacune des images de votre site Web est le premier pas vers un rendu de qualité optimisé. Chaque format a ses caractéristiques particulières qui le démarque des autres. Il existe deux grandes familles de formats d’images : les formats matriciels et les formats vectoriels.
Les images matricielles sont constituées d’une fine grille de carrés de couleurs, ou pixels. En effet, si on agrandit beaucoup une image matricielle, cette grille devient visible ; on dira alors que l’image est pixellisée. Les principaux formats d’images à points sont le jpeg, le gif, le png, le webp et le bitmap (ou bmp).
Le format JPEG (Joint Photographic Experts Group) est le format le plus utilisé. On le retrouve beaucoup notamment dans le domaine photographique puisqu’il est en mesure de gérer un très grand nombre de couleurs. Il permet de compresser avec perte d’informations pour rendre les images moins volumineuses, ce qui est un plus pour les fichiers image destinés au Web.
L’avantage du format PNG (Portable Network Graphics) est sa capacité à gérer la transparence. On l’utilise donc généralement pour des logos ou des pictogrammes. Comparé au format jpeg, il ne permet pas de sauvegarder l’image avec perte d’informations, ce qui en fait un format plus lourd, moins adapté aux photos.
Le format GIF (Graphics Interchange Format) est un format qui a été très populaire dans les débuts du Web, puisqu’il permettait d’ajouter du mouvement sur les sites Web pour les rendre plus dynamiques. Avec l’évolution de la conception Web, il a été délaissé avec les années. Par contre, ce type de fichier image a encore sa place pour présenter des animations simples puisqu’il est peu volumineux comparativement à des fichiers vidéo. On le retrouve aussi couramment sur les applications Messenger et WhatsApp. À l’instar du format PNG, le format GIF gère lui aussi la transparence, mais avec un nombre de couleurs limité à 256.
Voici deux exemples d’images gif tels qu’on les voyait autrefois partout sur le Web :
Créé par Google en 2010, le format WEBP permet de créer des images légères sans perte de qualité perceptible pour le Web (de 25% à 35% de réduction d’espace comparativement aux formats JPEG ou PNG, selon Google). Ce format prend en charge la transparence et de simples animations. Le principal défaut du WEBP vient du fait qu’il n’est présentement pas supporté par tous les navigateurs : c’est le cas du navigateur Safari et des vieilles versions de Edge (avant octobre 2018) et de Firefox (avant janvier 2019).
Le format image BMP (Bitmap) a été créé par Microsoft en 1990. C’est un format qui est bien supporté, mais peu pertinent pour le Web puisqu’il est très volumineux.
Les images vectorielles sont créées à partir de vecteurs, donc de composantes mathématiques (formes géométriques, courbes de Bézier, etc.). Cela fait en sorte qu’elles peuvent être agrandies à l’infini ou transformées (par exemple, étirées) sans perte de qualité. Les images vectorielles sont utilisées principalement pour les logos et les pictogrammes. Le principal format vectoriel pour le Web est le format SVG.
Créé en 1999, le format SVG est pourtant relativement nouveau. Au fil des années, il a été standardisé pour une utilisation plus facile et est maintenant supporté par tous les navigateurs récents. Côté poids, il est très performant, pouvant générer des images plus légères que le JPEG. Il gère la transparence et permet la création d’animations interactives grâce à l’ajout de code JavaScript. Un de ses points faibles réside dans le fait qu’il n’est présentement pas possible de télécharger des SVG sur un site créé avec WordPress (lien vers mon article, Pourquoi créer mon site avec WordPress) sans l’ajout d’extensions.
Certains formats d’images ne sont pas appropriés pour une utilisation sur le Web pour différentes raisons. Précédemment, il a déjà été question du BMP qui est trop volumineux. C’est le cas également du format TIFF, qui de plus, est supporté que par les navigateurs Chrome et Firefox. Ces deux formats d’images sont communément utilisés pour sauvegarder des images matricielles sans perte de qualité. On peut penser aussi au format PCX, beaucoup utilisé sur les premiers systèmes DOS et Windows, mais qui a été depuis remplacé par des formats plus performants comme le JPEG, le PNG ou le GIF. Enfin, vous avez peut-être déjà reçu de la part de vos graphistes des fichiers AI ou EPS. Ceux-ci sont des fichiers images vectoriels et servent habituellement à conserver des logos ou des pictogrammes. Ils ne sont pas supportés par les navigateurs et doivent donc être sauvegardés dans d’autres formats pour pouvoir être lus sur le Web.
Perdu à travers tous ces formats d’images Web? L’équipe de Wenovio saura vous guider dans l’univers des fichiers image. N’hésitez pas à nous contacter afin de créer un site Web performant à l’image de votre entreprise!
Obtenez nos six guides WordPress gratuitement en vous inscrivant à notre infolettre!
Cette semaine je vous présente deux vidéos tutoriel au sujet de Google Business : « prendre contrôle de la fiche » et « créer et optimiser la fiche ».
Réunir les définitions du vocabulaire de la rédaction Web en un seul article est un point de départ intéressant pour la compréhension de nos prochains articles.
Votre site Web affiche un taux de rebond élevé? Découvrez ce qui incite les visiteurs à quitter votre site Web et des conseils pour leur donner envie de rester.
Google Ads c’est du CPC : coût par clic (en anglais PPC et Pay Per Click). Chaque fois qu’un internaute clique sur votre annonce, Google débite votre compte.
