Rechercher

Comment optimiser les images pour un site internet

Mis à jour : mars 17

Pourquoi il est important de travailler les images de son site


Chaque site internet a pour contenu du texte, cependant des pages et des pages de lignes peuvent vous faire perde l’attention de votre lecteur assez facilement. En effet, de longs paragraphes peuvent tout de suite effrayer et désintéresser votre audience.

Les infographie fonctionne très bien pour véhiculer l'information.

On relève également que 90% des informations enregistrées par le cerveau sont du format visuel, il s’agit dès lors d’un avantage à utiliser des documents visuels pour votre plateforme web. De plus, un contenu visuel est 40 fois plus susceptible d’être partagé sur les réseaux sociaux. L’utilisation d'images est donc indéniablement un énorme avantage pour l’acquisition de prochains acheteurs/clients.


Les 4 formats d'image principaux à privilégier


Il existe un vaste panel de formats d'image. Quatre grandes familles se trouvent ici confrontées, le format JPEG, le format PNG, le format SVG et le format GIF.


Le format JPEG s’est développé fin des années 1980, il est celui qui reste le plus utilisés malgré ses quelques inconvénients. En effet, on ne peut parler de transparence/d’opacité ici, ce format ne permet pas l’insertion en arrière-plan d’une pellicule et perd énormément de sa qualité lors de la compression. Mais il possède un choix de couleurs très large, approximativement 16 millions de couleurs gérées.


Le format GIF s’est implanté dans l’informatique en 1987, puis est revenu plus fort dans les années 2000 suite à la création d’image animés. Son éventail de couleur très limitée réduit fortement le choix de ce format par les utilisateurs, seulement environ 256.


Le format PNG, lui, se trouve à mi-chemin entre le JPEG et le GIF, il est le plus récent, il est apparu au milieu des années 1990, il permet une compression d’image sans aucune perte de qualité. Il est quant à lui connu pour son effet de transparence/d’opacité on peut faire glisser une image en arrière-plan sans aucun problème.


Le format SVG est un format plus orienté dessin. Son but est d'offrir des images sous forme vectoriels, c'est-à-dire des images avec une qualité qui ne bouge pas si sa taille change. On aura tendance à l'utiliser pour des icônes, quelques illustrations, des cartes, des diagrammes, etc. Son utilisation peut être très pratique lorsque l'on souhaite intégrer de simples créations avec un poids très léger.


Utilisez des images de haute qualité !

Il est important de présenter des visuels de qualités pour mieux présenter à vos clients, vos prestations, votre savoir faire, vos articles.

Ce qui semble être une évidence est parfois ardu à mettre en place dans les faits. Pourtant, pas besoin d’être un photographe pour avoir de superbes images sur votre site ! il existe beaucoup de banques d’images qui offrent gratuitement leur catalogue au téléchargement.

Unsplash propose une liste complète de ces banques d’images sur notre aide en ligne ! Cependant restez vigilant, elles ne fonctionnent pas toutes de la même manière : certains catalogues ne sont pas entièrement gratuits, d’autres nécessitent de créditer les auteurs.




Maîtrisez la taille et la résolution de vos images


Lorsque vous publiez une image sur internet, vous devez trouver un équilibre entre taille et résolution. Une haute résolution signifie une meilleure qualité d’image, mais aussi un poids plus lourd. Des images trop lourdes ralentissent votre site, sa vitesse de chargement est plus lente, ce qui est mauvais pour vos visiteurs, et pour votre référencement !

Par contre si vous souhaitez utiliser les images de fond proposées par Jimdo, vous aurez besoin d’images plus grandes. Si vous utilisez des images de qualité inférieure, elles apparaîtront floues et pixelisées.

Comment trouver le bon équilibre ? Il faut tout d’abord comprendre qu’en terme d’image, la taille est un terme très relatif. Quand vous imprimez, par exemple, vous aurez besoin d’une résolution 4 fois plus importante que pour votre site internet. On se perd facilement dans les termes, donc voilà pour vous un aperçu rapide des trois aspects principaux de la taille d’une image :

  • Taille de fichier : l’espace occupé par le fichier sur votre ordinateur. Une taille de fichier trop importante ralenti votre site internet. 15Mo est une taille de fichier énorme pour une image, sur un site internet on utilise des images dont la taille varie habituellement entre 50Ko et 500Ko pour les plus grandes. Si la taille de votre fichier est trop importante, cela peut signifier que la taille d’image est trop élevée, ou que la résolution est trop élevée, ou les deux !

  • Taille d’image : la largeur et la hauteur de votre image exprimées en pixels. En photographie, vous êtes probablement plutôt habitué aux formats 4×6, 5×7, ou 8×10. Sur votre site internet, on parle plutôt de pixels ! L’image en en-tête de cet article mesure par exemple 750 sur 421 pixels.

  • Résolution : il s’agit de la qualité ou de la densité de votre image, exprimé en pixels par pouce (dpi ou ppi). La plupart des écrans affichent 72 pixels par pouce, donc une résolution supérieure est inutile et rend le fichier plus lourd que nécessaire !

Comment trouver la taille de fichier, la taille d’image et la résolution de votre image ?

Vous trouverez ces informations sur votre ordinateur. Avec un PC : clic droit sur l’image puis choisissez le menu « Propriétés ». Avec un Mac : clic droit sur l’image puis choisissez le menu « Lire les informations ».

Trouver la résolution est plus compliqué, et n’est pas forcément nécessaire : la plupart des logiciels d’édition d’image proposeront par défaut des fichiers en résolution basse, pour internet. De plus, Jimdo convertit automatiquement les images que vous chargez sur votre site pour qu’elles soient à la bonne résolution.

Données clées : poids, taille et résolution de vos images

Maintenant que vous en savez un peu plus sur les images, voilà quelques règles basiques que vous pourrez réutiliser :

  • Une grande image, comme un fond de site, ne doit pas dépasser une taille de fichier de 1Mo.

  • La plupart des autres images ne doivent pas dépasser 300Ko.

  • Pour une image de fond d’écran, nous recommandons une largeur d’image de 2000pixels.

  • Si vous utilisez l’option « sauvegarder pour internet » vous obtiendrez une image dont la résolution est adaptée au web.

  • Il est possible de diminuer la taille d’une image, le contraire n’est pas vrai : étirer une image la rend floue et pixelisée.En générale les images ne doivent pas dépasser 2 Mo cela permettra à votre site de charger plus vite.

Réduire la résolution :

un logiciel photo en ligne tel que Canva ou Pixlr réduira automatiquement votre résolution à un niveau compatible avec internet. Vous pouvez aussi réduire cette résolution grâce à la fonction « sauvegarder pour le web » de la plupart des autres logiciels de traitement d’images.

Voici quelques références que nous utilisons pour optimiser vos visuels de haute qualité :


  • Utiliser TinyPNG et TinyJPG, les deux sont capables de réduire fortement le poids de vos images sans en diminuer la qualité.



Nommer son images


Primordial pour un bon référencement (SEO). pensez que Google ne lit pas les images mais bien le texte qui se trouve derrière et son nom. Plus le nom de votre image est en lien avec son contenu, meilleur sera le référencement de cette dernière aux yeux des robots du géant du web !

Les balises, une des clés du référencement

Le nom de l’image …mais aussi son texte alternatif, sa description au besoin. Voici ce qu’il vous faut remplir pour un référencement optimum. Toutes ces données peuvent être mises à jour directement dans l’interface de votre WordPress ! D’autres systèmes sensiblement identiques existent pour d’autres types de système de management de contenu (CMS) tel que Joomla ou encore Magento.



Conclusion

On dit souvent qu'une image vaut mille mots. En effet, une image participer à la compréhension plus rapide du contenu aide à partager vos idées et à présenter votre activité sur votre site web. Néanmoins, il est primordial de respecter quelques règles afin de ne pas utiliser vos images n'importe comment.

Ayez des images qui sortent du lot, originales et qui correspondent parfaitement avec les valeurs et l'identité de votre marque. En respectant cela, vous allez pouvoir mettre en place des séries d'images efficaces pour votre site web.


6 vues0 commentaire

Posts récents

Voir tout
  • behance
  • Blanc Pinterest Icône
  • https://www.instagram.com/unity.com33/
  • LinkedIn - White Circle
  • Facebook - White Circle

© 2020 UNITYCOM/ Bordeaux

Copyrights