Comment mieux compresser les images pour votre site web

Nous comprenons que l’agencement de votre site Web est précieux et que vous souhaitez attribuer le meilleur espace pour le meilleur contenu. Les images sont une des meilleures manières de commercialiser vos produits ou votre entreprise, mais elles peuvent peser et impacter sur les performances de votre site Web. Nous avons quelques conseils qui peuvent vous aider à utiliser des images de haute qualité sans sacrifier les performances de votre site.

Réduire la taille de votre page Web

Certains des fichiers les plus importants de votre page Web seront les images. Avec une meilleure compression d’image, vous allez créer moins d’octets pour le téléchargement du navigateur et donc un temps de chargement plus rapide pour vous. Nous voulons tous des images de haute qualité, mais nous devons nous assurer qu’elles sont optimisées pour les écrans d’ordinateur et les appareils mobiles. Une des façons les plus simples d’y parvenir est d’accéder au logiciel de compression d’image, dont beaucoup sont disponibles en ligne. Mashable a rassemblé une liste de 18 compresseurs d’image, mais nous allons en nommer quelques-uns ici.

JPEGMini peut vous aider à réduire la taille du fichier jusqu’à 5 fois tout en conservant la qualité d’origine. Cette application a une interface utilisateur très intuitive, vous permettant de glisser et de déposer des images dans l’application pour la compression automatique. Il existe une version gratuite limitée, mais vous pouvez en profiter pleinement avec l’édition premium.

Un autre choix est Smush.it, qui provient de Yahoo! Réseau de développeurs. Il emploie une compression sans perte, de sorte que la taille du fichier est réduite sans perte de qualité visuelle. Il convient toutefois de noter qu’il n’acceptera que des fichiers maximums de 1 Mo. Des programmes comme ceux-ci sont faciles à utiliser et peuvent être consultés par n’importe qui, quel que soit le développement Web ou l’expérience de manipulation d’image !

Le format d’image est important

L’un des formats les plus populaires pour les images sur le Web est JPEG, mais les artistes et les retouches numériques restent loin de cela pour diverses raisons. Malgré son manque de popularité dans la communauté de manipulation d’images, il peut être le meilleur choix pour votre site. Avant d’aborder cela, parlons de certaines de vos autres options.

• GIF —Le GIF devrait vraiment être utilisé uniquement lorsque l’animation est nécessaire. Cela peut être génial pour les didacticiels et montrer comment naviguer dans une page Web, mais la palette de couleurs est relativement petite en 256 couleurs. Cela étant dit, si vous souhaitez ajouter une animation rapide et répétitive à votre page, un GIF est le chemin à parcourir.
• PNG —Le PNG compressera l’image sans perte, mais cela signifie que vous finirez généralement par une plus grande taille de fichier. Cela permettra une image de grande qualité, mais si la compression est ce que vous cherchez, ce n’est pas un excellent choix. Utilisez ce format avec modération, et seulement lorsque vous souhaitez vraiment faire apparaître une image sur une page.
• JPEG —Le format JPEG, par définition, est déjà compressé, et vous pouvez le compresser encore plus avec certaines des applications mentionnées ci-dessus. En combinant les deux, vous aurez une certaine perte de qualité d’image, alors assurez-vous de regarder l’image dans son intégralité pour voir comment elle s’affiche sur la page Web avant de la diffuser au public. Malgré la perte de qualité, cependant, JPEG reste l’un de vos meilleurs choix.
• WebP — Google a créé ce format d’image en 2010, mais ne vous sentez pas mal si vous n’en avez pas entendu parler. Il est capable de compresser les fichiers pour être plus petit que les JPEG tout en conservant une qualité élevée. Le grand revers, cependant, est que de nombreux navigateurs ne supportent pas encore WebP. Chrome et Opera le supportent nativement, mais jusqu’à présent, Firefox et Internet Explorer ne le font pas.

Gardez à l’esprit que certains CDN offrent une optimisation d’image en tant que service. Si vous utilisez un CDN pour votre site Web, il pourrait être utile d’examiner les services qu’ils pourraient fournir.

Limite de saturation des pixels

Toujours choisir une image qui a autant de pixels que possible est comme si John Steinbeck avait soumis The Grapes of Wrath à toutes les compétitions littéraires de sa vie. Dans certains cas, peut-être même le plus souvent, cela irait assez bien ; mais les paramètres de ce que vous essayez d’accomplir doivent être pris en compte, puis une approche calculée.

Pour obtenir les meilleures performances, vous souhaitez optimiser le nombre d’octets dans l’image ainsi que le nombre de pixels. Déterminez combien de pixels vous avez besoin pour afficher l’image à la qualité souhaitée dans le navigateur, et partez de là. Dans de nombreux cas, le navigateur réduira l’image à une taille de pixel appropriée de toute façon. Vous pouvez aider à éviter cette étape via les outils de Chrome DevTools. Il vous montrera la taille naturelle (ce que vous avez téléchargé) et la taille de l’affichage (comment cela apparaîtra sur la page). Toute différenciation entre les deux tailles est un travail supplémentaire que le navigateur doit effectuer, ajoutant du temps de chargement à votre site.

La performance affecte les revenus, la fiabilité et la réputation

L’optimisation de vos images est une étape essentielle sur la voie d’une excellente performance du site. Votre vitesse affecte votre classement Google, combien de visiteurs visualiseront votre site Web et, au final, le revenu que vous en dégagerez. Nous avons abordé quelques exemples ici, mais c’est un sujet aussi important que les développeurs de Google ont eux-mêmes consacré une page à l’optimisation de l’image.

Êtes-vous au courant de la façon dont votre présence en ligne affecte vos utilisateurs finaux ? Connaissez-vous les performances des différents aspects de votre site Web ? Ne laissez rien au hasard. Surveillez les performances de votre site Web 24/7 avec Uptrends. Vous pouvez commencer aujourd’hui avec un essai gratuit de 30 jours !