Passer au contenu principal

Comment optimiser les images pour votre site Web ?

Des images optimisées accélèrent votre site Web et offrent aux visiteurs une meilleure expérience. Lisez ceci pour découvrir comment optimiser les images pour votre site.

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.

MailChimp Longform -15 graphic -1-01

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.

MailChimp Longform -15 graphic -2-01

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.

MailChimp Longform -15 graphic -3-01

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é.

Outils d'optimisation d'images

Si vous deviez essayer d'optimiser pour le Web pour des images une par une, vous auriez besoin de connaissances avancées en code. Les outils d'optimisation d'images automatisent le processus. Ils vous évitent également d'avoir à supprimer et à télécharger à nouveau des dizaines, voire des centaines d'images ou de fichiers graphiques.

Vous n'avez plus à vous charger de tout le travail nécessaire pour modifier les types et les tailles de fichiers d'image, les plug-ins le font pour vous. Il s'agit par exemple de LazyLoad, TinyPNG ou Shortpixel. Cependant, cela dépend de la plateforme de blog que vous utilisez.

Dans la plupart des cas, tout ce que vous avez à faire pour compresser automatiquement vos images consiste à :

  1. Installer le plug-in de compression d'images.
  2. Ajuster les paramètres en fonction de vos normes de compression.
  3. Laisser le plug-in de compression faire son travail.
  4. Définir manuellement les images non modifiées pour une compression ultérieure.

La quatrième étape ci-dessus concerne les cas où le plug-in de compression d'images ne reconnaît pas les images téléchargées. Cela dépend du plug-in que vous utilisez, mais il se peut qu'il ne détecte pas les images que vous n'avez pas modifiées. Cependant, vous avez la possibilité de modifier manuellement ces images avec certains plug-ins de compression d'images.

Types de fichiers d'optimisation d'images pour le Web

Comme mentionné ci-dessus, il existe plusieurs types de fichiers disponibles lors de l'optimisation d'images pour le Web. Les types de fichiers d'optimisation d'images Web courants comprennent JPG (JPEG), PNG, GIF et, dans certains cas, SVG.

Vous rencontrerez peut-être également le format d'image WebP (.webp), qui est devenu de plus en plus populaire pour permettre l'affichage de toutes les images sur tous les écrans. Certaines versions de Chrome, Android, Microsoft Edge et Opera ou Firefox le prennent en charge.

Conclusion

Lorsque vous apprenez à optimiser les images pour les pages Web, n'oubliez pas que vous pouvez réduire leur taille tout en conservant leur qualité d'origine.

Il est possible de redimensionner automatiquement toutes vos images à l'aide de plug-ins. Les meilleurs résultats s'obtiennent avec les outils qui savent comment traiter vos types de fichiers. Si vous êtes satisfait de votre image de départ, son optimisation pour l'affichage sur le Web ne devrait pas être trop difficile.

Foire aux questions

Comment compresser les images pour mon site Web ?

Pour compresser des images de votre site Web, vous pouvez redimensionner chaque image à la résolution idéale avant de la télécharger sur votre site Web. Sinon, vous pouvez utiliser un plug-in automatisé qui se charge de le faire pour vous. Il est préférable d'installer le plug-in sur votre site Web ou votre blog avant d'ajouter de nouvelles images, afin qu'elles se compressent automatiquement. Vous pouvez réduire manuellement la taille des images après les avoir téléchargées et avant d'avoir installé un plug-in de compression. Cela peut être nécessaire uniquement si le plug-in ne détecte pas certains fichiers plus anciens.

Comment optimiser un fichier JPEG pour le Web ?

La compression d'images JPEG peut réduire les temps de chargement des pages. Cela vous aide généralement aussi à retrouver la qualité de l'image d'origine à l'issue du processus. Cependant, vous devez disposer au départ d'une image de haute qualité pour obtenir les meilleurs résultats.

Pour compresser rapidement un fichier JPEG pour le Web, pensez à utiliser des outils d'optimisation d'images et des plug-ins correspondants. Par exemple, vous pouvez utiliser le producteur de contenu et l'éditeur de photos de Mailchimp pour modifier, redimensionner et optimiser différents types d'images.

Quelle est la taille d'image idéale pour un site Web ?

La taille d'image idéale varie en fonction de vos besoins. Par exemple, la taille idéale d'un logo est généralement d'environ 100 pixels de large et cette largeur s'adapte à l'écran. La taille idéale de l'image d'arrière-plan de l'en-tête est d'au moins 1 024 pixels, et sa largeur peut atteindre 2 500 pixels.

N'oubliez pas que cela ne préjuge pas du niveau de qualité après compression. Cependant, les outils de compression automatiques vous aideront à obtenir la meilleure qualité avec le moins d'effort possible.

Partagez cet article