Imaginez qu’un visiteur de votre site Web vient de voir votre nouvelle promotion. Il a été tellement séduit par celle-ci qu’il a décidé de jeter un coup d’œil à l’offre que vous proposez. Malheureusement, il ne parvient pas à charger la page du panier et à terminer son achat. Que s’est-il passé ?
De nombreux problèmes peuvent mener à des difficultés de chargement des pages. Par exemple, il se peut que vous ne disposiez pas d’un espace de stockage en ligne suffisant pour votre site. Il se peut également que sa mémoire cache ne soit pas aussi importante qu’il le faudrait.
Mais de toutes les erreurs que vous pouvez commettre lorsque vous créez un site Web, ne pas optimiser les images peut être l’une des plus problématiques. Une mauvaise optimisation des images pour le Web peut ralentir votre site et, par conséquent, conduire à une réduction du trafic et à la perte d’opportunités de vente. Nous vous expliquons ci-dessous comment optimiser vos images afin de créer un site Web qui donne des résultats.
Qu’est-ce que l’optimisation des images ?
Environ 70 % des personnes interrogées déclarent que la vitesse de chargement des pages Web influe sur 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 plus lentement qu’elles ne s’y attendaient.
Ces statistiques soulignent l’importance de l’optimisation des images pour le Web. Si vous ne prenez pas les mesures nécessaires pour que vos pages se chargent assez rapidement, vous aurez de la chance si vos clients arrivent jusqu’à la page de paiement du panier d’achat. Souvent, ce problème commence dès l’arrivée sur la page d’accueil de votre site. Vous pouvez éviter cela en optimisant les images de votre site Web.
L’une des raisons de la lenteur du chargement d’un site Web est que les images ne sont pas correctement optimisées. Cela signifie que les fichiers sont si volumineux qu’ils alourdissent le reste de votre site et monopolisent son espace de stockage.
L’optimisation des images, quant à elle, redimensionne la résolution de vos images sur la page. Elle permet également de réduire la taille des fichiers, de sorte que le serveur de votre site Web dispose de plus d’espace. En libérant de la mémoire sur votre serveur, vous pouvez réduire le temps de chargement des pages de votre site Web, ce qui rend la navigation sur votre site plus facile et plus agréable.
Pourquoi est-il important d’optimiser les images pour le Web ?
L’optimisation des images pour les pages Web contribue à la satisfaction de vos utilisateurs. Elle permet également à vos serveurs de domaine de fonctionner efficacement.
Gardez à l’esprit qu’environ la moitié de vos visiteurs utilisent des téléphones mobiles pour rechercher des informations en ligne et consulter des sites Web, ce qui signifie que l’optimisation des images peut grandement contribuer à accélérer votre vitesse de chargement sur ces appareils et améliorer votre référencement mobile. L’optimisation des images pour le Web permet aux visiteurs de voir votre contenu même avec une connexion WiFi lente.
En fin de compte, l’optimisation des images peut aider votre site Web de plusieurs façons. Vous trouverez ci-dessous une liste d’autres avantages.
Accélérer le chargement des pages
L’une des principales raisons d’optimiser les images est d’accélérer leur chargement. Les images non optimisées peuvent ralentir votre site Web au point d’en rendre la navigation difficile et l’utilisation frustrante.
Conseil : l’optimisation des images consiste à réduire leur résolution afin qu’elles n’occupent pas trop d’espace de stockage sur votre site Web. Vous pouvez également les compresser tout en conservant la même qualité que l’original ou n’utiliser des images et des éléments visuels qu’en cas de nécessité.
Optimiser l’expérience utilisateur
Lorsque vous optimisez les images pour le Web, vous améliorez également l’expérience utilisateur. En d’autres termes, vous évitez à vos clients de se sentir frustrés. Si vous ne voulez pas que les visiteurs restent assis à se demander à quel moment l’espace blanc et vierge affichera du texte et des images, il est temps de limiter leur résolution.
Les visiteurs de votre site Web apprécieront le confort et l’apparence améliorés qui découlent d’un temps de chargement des pages plus rapide. Au lieu d’un message d’erreur indiquant l’emplacement des différentes images, ils verront les icônes et les illustrations appropriées.
Référencement amélioré
En optimisant les images, vous pouvez potentiellement donner un coup de pouce au référencement de votre site Web. Vous pouvez également étiqueter les images avec des balises alt afin d’améliorer l’accessibilité et d’optimiser votre SEO. Si vous utilisez un créateur de site Web, vous pouvez facilement y parvenir en important des images dans une bibliothèque multimédia.
Les bibliothèques multimédias, telles que celles fournies par WordPress ou Mailchimp, proposent des zones de texte dans lesquelles vous pouvez saisir des balises alt et des mots-clés. Ceux-ci seront joints à l’image et apparaîtront dans les moteurs de recherche à condition que vous ayez autorisé votre site Web à être trouvé sur le Web.
Réduire l’espace de stockage sur votre serveur
Les images non optimisées peuvent ralentir les serveurs des sites Web. Si les images que vous affichez sur votre site Web dépassent les limites de taille recommandées, le chargement de la page risque d’être trop long, voire de ne pas se faire du tout.
Le fait de stocker moins de fichiers images sur votre serveur permet à votre site Web de fonctionner à la vitesse attendue par vos visiteurs. Une fois que vous aurez découvert comment optimiser les images pour le Web, vous pourrez obtenir des temps de chargement de page rapides.
Abonnez‑vous pour recevoir plus de conseils marketing directement dans votre boîte de réception.
Comment optimiser les images pour le web
Il suffit de peu de choses pour apprendre à optimiser les images pour le Web. Nous vous expliquons ci-dessous comment compresser des images pour votre site Web et passons en revue les étapes de base de l’optimisation des images pour le Web.
Sélectionnez un format de fichier
Vous pouvez remarquer 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 procéder à l’optimisation des images pour le Web, vous devez comprendre l’objectif de chaque format de fichier image.
- JPEG : c’est l’un des types de fichiers les plus couramment utilisés. En effet, il offre une qualité satisfaisante et occupe moins d’espace qu’un PNG. Toutefois, certains visuels ne conservent pas toujours leur « éclat » si vous réduisez la taille du fichier de l’image JPEG (JPG).
- PNG : ce format fonctionne souvent mieux pour réduire la taille des fichiers image tout en conservant 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 particulièrement privilégié pour les images sur le Web. Il est plutôt destiné à la création d’images animées et de vidéos illustrées. Le meilleur usage pour ce type de fichier est celui des tutoriels de démonstration. Aujourd’hui, le GIF peut sembler démodé car vous pouvez héberger des fichiers compressés MP4, MOV ou WMV qui produisent des animations de meilleure qualité. En revanche, le GIF utilise moins d’espace et de ressources sur le serveur et ne ralentit pas le chargement des pages.
- SVG : ce format est devenu plus populaire depuis qu’il est nécessaire de créer des images s’adaptant à une variété de tailles d’écran. Un fichier SVG s’adapte à tous les appareils, y compris les ordinateurs, les téléphones portables et les tablettes, sans perte de qualité. Cependant, ces fichiers peuvent ne pas s’afficher correctement dans tous les navigateurs.
En ce qui concerne le type de fichier, ils sont tous compressés différemment. Par exemple, les fichiers JPEG sont compressés avec perte. Vous devrez avoir une image presque parfaite pour obtenir la même qualité pour ce type de fichier.
La compression sans perte, en revanche, ne réduit pas la qualité du fichier lorsque la taille est réduite. C’est souvent le cas lorsque des images PNG sont compressées. Vous devez tenir compte de la différence entre les types de compression « avec perte » et « sans perte » lorsque vous utilisez des plugins pour le redimensionnement automatique. Le type de fichier joue un rôle, mais la conception du plugin peut également affecter le résultat final de la compression.
Ajoutez un texte de remplacement (de manière simple)
L’ajout d’un 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 éléments affichés.
Le texte alt permet aux personnes malvoyantes de comprendre les photos et les images affichées. Il est également utile lorsque ces éléments ne s’affichent pas correctement dans un tutoriel, car il vous permet de comprendre les instructions.
Le moyen le plus simple d’ajouter un texte alt est de le saisir dans le champ prévu à cet effet lorsque vous importez une image dans une bibliothèque. Vous pouvez aussi généralement importer des images directement dans des articles de blog sur la plupart des plateformes d’hébergement. Lorsque vous créez votre article de blog, vous remarquerez probablement un champ dans lequel vous pouvez saisir le texte alt lors de l’ajout des images.
Ajouter un texte de remplacement (de manière difficile)
Si votre blog ou votre créateur de site Web n’offre pas la possibilité de saisir directement le texte alt et la description de l’image, vous devrez utiliser le langage HTML. Vous pouvez le faire dans un article de blog ou une zone de texte de page, ou dans un fichier bloc-notes que vous importerez sur votre serveur.
L’utilisation du HTML est un peu plus avancée que celle d’un simple éditeur visuel de pages de blog ou de site Web. Vous devez pour cela disposer du code à copier et à coller (ou à rédiger à partir de zéro) en mode « texte » plutôt qu’en mode « visuel » ou « source ». Si vous n’avez aucune idée de ce que cela signifie, regardez cet exemple de ce à quoi ressemble le code HTML lors de l’ajout d’un texte alt à une image.
Ne vous préoccupez pas de cette méthode si vous débutez votre site Web. Vous pouvez créer un texte alt sans connaître le langage HTML si vous utilisez la solution la plus simple décrite ci-dessus. Sinon, vous devez au minimum connaître le code HTML nécessaire pour mettre en forme l’image une fois que vous l’aurez importée dans un article de votre blog.
Apprendre le code de la balise HTML alt s’adresse principalement aux personnes qui souhaitent développer un site Web à partir de zéro. Dans ce cas, elles doivent l’insérer dans un fichier de bloc-notes et l’importer sur leur site à 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’aurez probablement pas besoin de le faire si vous commencez tout juste à construire votre site. Cependant, vous savez maintenant qu’il s’agit d’une option afin d’optimiser les images pour le Web.
Optimisez les dimensions des fichiers
Il est plus facile d’optimiser les dimensions des fichiers si vous ne les avez pas encore importés sur le Web. Dans ce cas, vous pouvez les enregistrer dans votre programme de retouche photo préféré à la taille voulue. Pour les en-têtes, il s’agit d’environ 1024 pixels de large x 786 pixels de haut.
Vos images d’arrière-plan doivent avoir une taille d’environ 1920 x 1080 pixels. La largeur des images de logo varie entre 100 et 400 pixels, et leur hauteur est généralement comprise entre 50 et 100 pixels. N’oubliez pas, surtout pour les images d’arrière-plan, que la taille que vous pouvez utiliser dépend de la taille du fichier de l’image.
Compressez vos images
Les images du site Web qui peuvent le plus affecter vos temps de chargement sont les images d’en-tête et d’arrière-plan.
Pour les images d’en-tête et d’arrière-plan, vous voudrez généralement utiliser la compression GIF ou JPEG. Veillez à ce que leur taille soit la plus petite possible afin de donner à votre site Web l’aspect professionnel dont vous avez besoin.
Utiliser des outils d’optimisation d’images et des plugins
Un moyen d’éviter de passer d’innombrables heures à optimiser manuellement les images pour le Web est d’utiliser des outils d’optimisation d’images. Ces plugins sont généralement fournis avec la plupart des grandes plateformes de blog, et ils redimensionnent vos images automatiquement.
Les plugins et outils d’optimisation d’images offrent également un moyen rapide d’ajouter des balises alt. En général, il vous suffit de sélectionner les images de la bibliothèque multimédia que vous souhaitez compresser. Cela se fait en quelques clics et réduit leur taille tout en conservant leur qualité.
Outils d’optimisation des images
Si vous deviez tenter d’optimiser les images des pages Web une par une, cela vous demanderait des connaissances avancées en matière de programmation. Les outils d’optimisation d’images automatisent le processus. Ils vous évitent également de devoir supprimer et télécharger à nouveau des dizaines, voire des centaines d’images ou de fichiers multimédias.
Au lieu de faire tout le travail de modification des types et tailles de fichiers d’image, les plugins le font pour vous. Parmi les exemples, citons LazyLoad, TinyPNG ou Shortpixel. Toutefois, cela dépend de la plateforme de blog que vous utilisez.
La quatrième étape que vous voyez ci-dessus concerne les cas où un plugin de compression d’images ne reconnaît pas les fichiers images importés. Cela dépend du plugin 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 dernières à l’aide de certains plugins de compression d’images.
Types de fichiers pour l’optimisation des images Web
Comme nous l’avons mentionné plus haut, vous avez le choix entre plusieurs types de fichiers lorsque vous optimisez des images pour le Web. Les plus courants sont le JPG (JPEG), le PNG, le GIF et, dans certains cas, le SVG.
Un autre que vous remarquerez peut-être est le format Web Picture (.webp), qui est devenu de plus en plus utile pour universaliser les images sur tous les écrans d’appareils. Certaines versions de Chrome, d’Android, de Microsoft Edge, d’Opera ou de Firefox le prennent en charge.
Optimisation des images pour mobile
De nombreuses personnes surfent sur Internet à l’aide de leur téléphone. Il est donc essentiel pour les utilisateurs mobiles d’obtenir des images de bonne qualité. Les appareils mobiles sont souvent confrontés à des connexions plus lentes et à des forfaits de données limités, ce qui signifie que chaque octet de la taille du fichier compte lorsqu’il s’agit de vos images JPG et PNG.
Imaginez quelqu’un qui essaie de parcourir votre site Web alors qu’il se trouve dans le métro ou dans un café où le Wi-Fi est irrégulier. Si vos images ne sont pas correctement optimisées pour les mobiles, avec des fichiers inutilement volumineux, cette personne abandonnera probablement et se tournera vers le site d’un concurrent qui se charge plus rapidement.
La bonne nouvelle, c’est qu’il existe plusieurs moyens efficaces d’optimiser les images pour les utilisateurs mobiles. L’une des approches les plus efficaces est celle des images réactives, qui ajuste automatiquement les dimensions du fichier en fonction de la taille de l’écran de l’utilisateur et des capacités de son appareil.
Vous pouvez également utiliser des images adaptatives, qui vous permettent de créer différentes versions de l’image en fonction de l’appareil et de la taille de la fenêtre. Contrairement aux images réactives qui s’adaptent de manière fluide, les images adaptatives affichent des versions prédéfinies et de largeur fixe de chaque image en fonction de points d’interruption spécifiques de l’appareil. Lorsque quelqu’un visite votre site Web, le serveur détecte son type d’appareil et fournit la version d’image prédéfinie appropriée.
Cela diffère des images réactives, qui utilisent une seule image qui s’adapte de manière flexible. Les images adaptatives peuvent offrir de meilleures performances puisque chaque fichier est spécifiquement adapté à l’appareil qu’il cible, bien qu’il soit nécessaire de conserver plusieurs versions de chaque image.
L’utilisation de la compression sans perte pour les images PNG permet de maintenir la qualité tout en réduisant la taille des fichiers, ce qui est particulièrement important pour les logos et les illustrations avec du texte. Pour les photographies, la compression JPG peut être plus agressive sur les appareils mobiles, car les écrans plus petits n’affichent pas les détails aussi clairement.
Voici quelques conseils pratiques pour mettre en œuvre l’optimisation des images mobiles :
- Détection des appareils : faites attention aux dimensions des images et utilisez les requêtes multimédia CSS et JavaScript pour détecter les tailles d’écran. Cela permet d’éviter que les appareils mobiles ne téléchargent des fichiers inutilement volumineux.
- Chargement progressif : mettez en œuvre des stratégies où les fichiers d’images se chargent par étapes. Cela permet aux utilisateurs d’avoir un retour visuel immédiat pendant qu’ils attendent l’image complète.
- Choix de compression : sélectionnez la bonne méthode de compression pour chaque type d’image. Utilisez la compression sans perte pour les illustrations avec du texte ou des bords nets, et la compression standard pour les photographies où une certaine perte de qualité ne sera pas visible sur les écrans mobiles.
L’impact d’une bonne optimisation des images mobiles peut être spectaculaire. Des images judicieusement optimisées, avec des tailles de fichiers et des dimensions appropriées, peuvent réduire considérablement le temps de chargement des pages mobiles tout en conservant une bonne qualité visuelle.
Techniques avancées d’optimisation d’images
Après avoir maîtrisé les principes de base de l’optimisation des images, certaines techniques plus sophistiquées peuvent encore améliorer les performances de votre site Web.
Le lazy loading est une technique astucieuse qui permet d’améliorer considérablement les temps de chargement des pages. Au lieu de charger toutes les visuels en même temps lorsque quelqu’un visite votre page, le lazy loading ne charge les images que lorsqu’elles sont sur le point d’apparaître.
Imaginez que vous ayez un long article de blog contenant 20 images. Sans le lazy loading, le navigateur d’un visiteur doit télécharger les 20 images immédiatement, même s’il n’a lu que le premier paragraphe et qu’il quitte la page. Cela représente beaucoup de bande passante gaspillée et des chargements plus lents. Avec le lazy loading, le navigateur ne télécharge que les premières images, ce qui accélère considérablement le chargement de la page.
Outre le lazy loading, vous pouvez également utiliser l’attribut srcset pour proposer des images de taille appropriée à différents appareils. Au lieu d’une approche unique, srcset vous permet de fournir plusieurs versions d’une même image et laisse le navigateur choisir la meilleure option. Ainsi, les utilisateurs mobiles ne téléchargent pas d’images inutilement volumineuses, et les utilisateurs d’ordinateurs bénéficient toujours de visuels de haute qualité.
Conclusion
Lorsque vous apprenez à optimiser les images pour les pages Web, n’oubliez pas ceci : vous pouvez réduire leur taille tout en conservant une qualité aussi proche que possible de celle d’origine.
Il est possible de redimensionner automatiquement toutes vos images à l’aide de plugins. Les meilleurs résultats sont obtenus lorsque vous utilisez des outils qui savent comment traiter vos types de fichiers. Tant que vous êtes satisfait de l’image avec laquelle vous commencez, l’optimisation pour l’affichage sur le Web ne devrait pas être trop difficile.
Principaux points à retenir
- L’optimisation des images est essentielle pour les performances des sites Web, car elle influence directement la rapidité de chargement des pages et l’expérience utilisateur.
- Une optimisation efficace des images consiste à réduire la taille des fichiers tout en maintenant la qualité, en utilisant des techniques telles que le choix du bon format de fichier, la compression et l’ajout de texte alt pour améliorer le référencement et l’accessibilité.
- De multiples outils et techniques sont disponibles pour optimiser les images, notamment des plugins de compression automatique, la conception d’images réactives et des stratégies telles que le lazy loading, qui peuvent améliorer considérablement les temps de chargement des sites Web et l’engagement des utilisateurs sur différents appareils.
Foire aux questions
Comment puis-je compresser des images pour mon site Web ?
Pour compresser des images pour votre site Web, vous pouvez les redimensionner à la résolution idéale avant de les importer sur le serveur. Sinon, vous pouvez utiliser un plugin automatisé pour le faire à votre place. Il est préférable d’installer ce dernier sur votre site Web ou votre blog avant d’ajouter de nouvelles images, afin qu’elles soient compressées automatiquement. Vous pouvez réduire manuellement la taille des images après les avoir importées et avant d’avoir installé un plugin de compression. Cette opération n’est nécessaire que si le plugin ne détecte pas certains fichiers plus anciens.
Comment optimiser un fichier JPEG pour le web ?
La compression des images JPEG permet de réduire le temps de chargement des pages. En général, elle vous permet également de conserver la qualité de l’image originale. Toutefois, pour obtenir les meilleurs résultats, vous devez commencer par une image de haute qualité.
Pour compresser rapidement un JPEG pour le Web, pensez à utiliser des outils et des plugins d’optimisation d’images. 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 idéale d’une image varie en fonction de l’usage que vous en faites. Par exemple, la taille idéale d’un logo est généralement d’environ 100 pixels de large et s’adapte à l’écran. La taille idéale de l’image d’arrière-plan de l’en-tête est d’au moins 1024 pixels, mais peut aller jusqu’à 2500 pixels.
N’oubliez pas que cela ne tient pas compte du niveau de qualité après la compression. Cependant, les compresseurs automatiques vous aideront à obtenir la meilleure qualité avec le moins d’efforts possible.