Imaginez qu'un visiteur de votre site Web découvre votre dernière promotion. Il est tellement séduit qu'il décide de découvrir l'offre que vous proposez. Il ne peut malheureusement pas charger la page du panier d'achats et finaliser son achat. Que vient-il de se passer ?
De nombreux problèmes peuvent empêcher le chargement d'une page. Par exemple, il se peut que vous n'ayez pas assez d'espace de stockage en ligne pour que votre site s'affiche. Il peut également ne pas y avoir suffisamment de cache mémoire.
Mais, parmi toutes les erreurs que vous pouvez commettre lors de la création d'un site Web, ne pas optimiser les images pour les pages Web peut être l'une des plus problématiques. Ne pas optimiser correctement les images pour le Web peut ralentir votre site Web et, à son tour, entraîner une réduction du trafic et des pertes d'opportunités de vente. Nous expliquons ci-dessous comment optimiser les images pour le Web afin que vous puissiez créer un site Web qui obtient des résultats.
- Qu'est-ce que l'optimisation d'images ?
- Pourquoi est-il important d'optimiser les images pour le Web ?
- Comment optimiser les images pour le Web ?
- Outils d'optimisation d'images
- Types de fichiers d'optimisation d'images pour le Web
- Conclusion
Qu'est-ce que l'optimisation d'images ?
Environ 70 % des personnes déclarent que la vitesse de chargement des pages Web affecte leur volonté d'effectuer un achat en ligne. En outre, environ 45 % de ces personnes n'achèteront pas sur un site Web si la page se charge trop lentement.
Ces statistiques soulignent l'importance de l'optimisation des images pour le Web. Si vous n'avez pas pris de mesures pour vous assurer que vos pages se chargent suffisamment rapidement, vous aurez de la chance si un acheteur parvient à afficher la page de finalisation du panier. Souvent, ce programme commence lorsqu'ils arrivent pour la première fois sur la page d'accueil de votre site. Vous pouvez éviter cela grâce à l'optimisation des images pour les sites Web.
L'optimisation des images consiste à réduire la taille de vos fichiers d'image. Cependant, cela implique également de ne pas diminuer la qualité de votre image et de vos graphiques pendant le processus de "réduction" (compression).
Les images qui ne sont pas correctement optimisées sont l'une des raisons de la lenteur de chargement des sites Web. Cela signifie que les fichiers sont si volumineux qu'ils pèsent sur le fonctionnement de votre site et consomment trop d'espace de stockage sur votre site Web.
L'optimisation des images, quant à elle, redimensionne la résolution de vos images sur la page. L'optimisation des images réduit également la taille des fichiers correspondants, de sorte que le serveur de votre site Web dispose de plus d'espace. En libérant de l'espace de stockage sur votre serveur, vous pouvez réduire les temps de chargement des pages sur votre site Web, rendant ainsi votre site plus facile et plus agréable à naviguer.
Pourquoi est-il important d'optimiser les images pour le Web ?
L'optimisation des images pour les pages Web rend vos utilisateurs heureux. Cela permet également à vos serveurs de domaine de fonctionner correctement. Gardez à l'esprit qu'environ la moitié de vos lecteurs utilisent des téléphones portables pour rechercher des informations en ligne et consulter des sites Web ; par conséquent, l'optimisation des images peut grandement optimiser la vitesse d'affichage de votre site Web sur mobile et son référencement SEO mobile. L'optimisation des images pour le Web peut aider les visiteurs à voir votre contenu même avec une connexion Wi-Fi lente.
En fin de compte, l'optimisation des images pour le Web peut aider votre site Web de plusieurs façons. Ci-dessous, nous avons dressé la liste des autres façons dont l'optimisation des images pour le Web peut améliorer votre site Web.
Accélérer le chargement des pages
L'une des principales raisons d'optimiser les images est d'en permettre le chargement plus rapide. Les images qui ne sont pas optimisées peuvent ralentir votre site Web au point d'être difficile à naviguer et frustrant à utiliser.
Indice : L'optimisation des images est liée à la réduction de leur taille de résolution, afin qu'elles n'occupent pas trop d'espace de stockage Web en ligne. Vous pouvez également compresser les images tout en en conservant la qualité d'origine ou n'utiliser des images et des graphiques que lorsque cela est nécessaire.
Optimiser l'expérience utilisateur
Lorsque vous optimisez les images pour le Web, vous optimisez également l'expérience utilisateur. En d'autres termes, vous réduirez la frustration des clients. Si vous ne voulez pas que les visiteurs perdent patience en se demandant quand l'espace vierge et blanc affichera du texte et des graphiques, il est temps de modifier la résolution de chaque image.
Les visiteurs du site Web apprécieront l'amélioration de l'aspect pratique et de l'apparence, et le chargement de page plus rapide qui va de pair. Au lieu d'un message d'erreur remplaçant les images ne pouvant être chargées, ils verront les icônes et les images qui doivent être affichées.
Booster le SEO
En optimisant les images, vous pouvez potentiellement booster le référencement de votre site Web. Vous pouvez également étiqueter les images avec des balises alternatives afin d'améliorer l'accessibilité et d'optimiser le référencement. Si vous utilisez un créateur de site Web, vous pouvez facilement le faire lorsque vous téléchargez des images dans une bibliothèque multimédia.
Les bibliothèques multimédias, telles que celles fournies par WordPress ou Mailchimp, fournissent des zones de texte où vous pouvez saisir des balises et des mots-clés alternatifs. Ceux-ci seront joints à l'image et apparaîtront dans les moteurs de recherche, à condition que vous ayez autorisé la recherche de votre site Web sur le Web.
Minimiser le stockage sur votre serveur
Les fichiers image, vidéo ou graphiques volumineux peuvent ralentir les serveurs du site Web. Si le support que vous affichez sur votre site Web dépasse les limites de taille recommandées, le chargement de la page peut prendre trop de temps, voire ne jamais aboutir.
Stocker moins de fichiers image sur votre serveur permet à votre site Web de fonctionner à la vitesse que vos visiteurs attendent. Apprendre comment optimiser les images pour le Web vous permettra d'obtenir des temps de chargement de page rapides.
Comment optimiser les images pour le Web ?
Apprendre à optimiser les images pour le Web n'est pas difficile. Ci-dessous, nous expliquons comment compresser les images ou votre site Web et passons en revue les étapes de base pour optimiser des images pour le Web.
Sélectionner un format de fichier
Vous avez déjà peut-être remarqué qu'il existe des centaines de types de fichiers différents. Parmi les plus courants, citons JPEG (ou .jpg), PNG ou GIF. Mais avant de poursuivre avec l'optimisation des images pour le Web, vous devez comprendre l'objectif de chaque type de fichier.
- JPEG – C'est l'un des types de fichiers d'image Web les plus couramment utilisés. C'est parce qu'il offre une qualité correcte nécessitant moins d'espace qu'un PNG. Cependant, certains graphiques ne conservent pas toujours leur "éclat" si vous réduisez la taille du fichier image JPEG (JPG).
- PNG – Ce format est souvent plus efficace pour réduire la taille des fichiers d'image et en conserver la qualité. Il vous permet également d'utiliser et de compresser des images avec un arrière-plan transparent.
- GIF – Le format de fichier "GIF" n'est pas le plus prisé pour les images sur le Web. Il s'adresse plutôt à la création de vidéos graphiques animées. La meilleure utilisation de ce type de fichier concerne les tutoriels de démonstration. De nos jours, le GIF peut sembler obsolète, car vous pouvez héberger des fichiers MP4, MOV ou WMV compressés qui produisent des animations de meilleure qualité qu'un GIF. D'un autre côté le GIF est moins gourmand en espace et en ressources de serveur Web et ne ralentit pas le chargement des pages.
- SVG – Ce format a gagné en popularité avec le besoin que les graphiques s'adaptent à une variété de tailles d'écran. Un fichier SVG est compatible avec tous les appareils, y compris les ordinateurs, les téléphones portables et les tablettes, sans perte de qualité. Cependant, les SVG peuvent ne pas s'afficher correctement dans tous les navigateurs.
Concernant le type de fichier, ils se compressent tous différemment. Par exemple, les fichiers JPEG subissent une compression "avec perte". Vous aurez besoin d'une image presque parfaite pour obtenir la même qualité avec ce format.
En revanche, la compression "sans perte" des fichiers n'altère pas leur qualité lors du processus. C'est souvent le cas lorsque les images PNG sont compressées. Les types de compression "avec perte" ou "sans perte" sont ceux que vous devez prendre en compte lorsque vous utilisez des plug-ins pour le redimensionnement automatique. Le type de fichier joue un rôle, mais la conception du plug-in peut également affecter le résultat final de la compression.
Ajouter du texte de remplacement (moyen le plus simple)
L'ajout d'un texte de remplacement, ou texte "alt", ne se limite pas à optimiser une image pour le référencement en utilisant des mots-clés. Il rend également une page Web plus accessible en ajoutant une description aux graphiques affichés.
Le texte de remplacement permet aux personnes malvoyantes de comprendre les photos et les graphiques affichés. Il est également utile lorsque les images ne s'affichent pas correctement dans un guide de tutoriel, car il vous permet de comprendre les instructions.
Le moyen le plus simple d'ajouter du texte de remplacement est de le remplir dans le champ fourni lors du téléchargement d'une image dans une bibliothèque d'images. Vous pouvez également généralement télécharger des images sur des billets de blog sur la plupart des plateformes d'hébergement qui exécutent des blogs. Lorsque vous créez votre billet de blog, vous remarquerez probablement un champ dans lequel vous pouvez saisir le texte de remplacement lors de l'ajout des images.
Ajouter du texte de remplacement (moyen difficile)
Si votre créateur de site Web ou de blog n'offre pas la possibilité de saisir rapidement un texte de remplacement et une description d'image, vous devrez utiliser le HTML. Vous pouvez le faire soit dans un billet de blog ou une zone de texte de page, soit dans un fichier que vous téléchargeriez sur votre serveur à partir d'un fichier de bloc-notes.
L'utilisation du HTML est un peu plus avancée que celle d'un simple éditeur Visual de blog ou de page de site Web. Cela nécessite que le code dans lequel copier-coller (ou écrire à partir de zéro) soit en mode "texte" et non "visuel" ou "source". Si vous ne savez pas ce que cela signifie, regardez cet exemple de ce à quoi ressemble le code HTML lorsque vous ajoutez du texte de remplacement à une image.
Ne vous inquiétez pas si vous démarrez tout juste votre site Web. Vous pouvez créer du texte de remplacement sans connaître le HTML si vous utilisez la méthode la plus simple décrite ci-dessus. Sinon, vous pouvez apprendre seulement le code HTML requis pour formater l'image une fois que vous l'avez téléchargée sur un billet de blog.
Apprendre le code de balise alt HTML "selon le moyen le plus difficile" concerne principalement les personnes qui veulent se lancer dans la création d'un site Web à partir de zéro. Dans ce cas, ils apprendront à l'insérer dans un fichier de bloc-notes et à le télécharger sur leur site Web à l'aide d'un client FTP ou lors de la création d'un site Web à l'aide d'un éditeur de code.
Vous n'avez probablement pas besoin de procéder ainsi si vous commencez tout juste à construire votre site. Cependant, vous savez maintenant que c'est une option pour optimiser les images pour le Web.
Optimiser la taille du fichier
Il est plus facile d'optimiser la taille d'un fichier lorsque vous ne l'avez pas encore téléchargé sur le Web. Dans ce cas, vous pouvez l'enregistrer dans votre programme d'édition de photos préféré à la taille dont vous avez besoin. Cette taille est d'environ 1 024 pixels de large x 786 pixels de haut pour les en-têtes.
Vos images d'arrière-plan devront être d'environ 1 920 x 1 080 pixels. Les images de logo varient de 100 à 400 pixels de large et de 50 à 100 pixels de haut généralement. Gardez à l'esprit, en particulier pour les images d'arrière-plan, que la taille à utiliser dépend de celle du fichier image.
Compresser vos images
Les images de votre site Web qui peuvent affecter le plus vos temps de chargement sont celles de l'en-tête et de l'arrière-plan de la page. Pour les images d'en-tête et d'arrière-plan, il faut généralement utiliser la compression GIF ou JPEG. Optez pour la plus petite taille possible afin de donner à votre site Web l'aspect professionnel dont vous avez besoin.
Utiliser des outils et plug-ins d'optimisation d'image
Une façon d'éviter de passer d'innombrables heures à optimiser manuellement des images pour le Web est d'utiliser des outils d'optimisation. Ces plug-ins, généralement fournis avec la plupart des principales plateformes de blog, redimensionnent automatiquement vos images. Les plug-ins et outils d'optimisation d'image offrent également un moyen rapide d'ajouter les balises de remplacement. Il suffit généralement de sélectionner dans la bibliothèque multimédia les images que vous souhaitez compresser. Quelques clics et leur taille est réduite tout en en conservant la qualité.