Vous utilisez sans doute beaucoup d'images pour illustrer vos articles. Sachez que ces dernières influencent considérablement la vitesse de chargement de vos pages par leur poids important (en moyenne plus de 50 % du poids total de la page).
Par conséquent, il est nécessaire de les optimiser avant de les intégrer dans vos articles afin de minimiser leur impact sur le temps de chargement de votre blog. Sachez que le temps de chargement est un paramètre de référencement pris en compte sérieusement par les algorithmes des moteurs de recherche d’où l’importance de redimensionner et de réduire la taille de vos images (compresser).
Pour augmenter la vitesse de chargement, je vous recommande en plus de l'optimisation de vos images d'installer le script Lazy Load (cela consiste à différer l'affichage des images dans vos pages).
Créer et éditer vos images en ligne avec Canva
Canva est un outil en ligne qui permet de créer et d'éditer les images sans installer quoi que ce soit sur votre ordinateur ou smartphone. C'est une plateforme fiable, gratuite et complète.
Grâce à son interface simple et intuitive, la prise en main est très facile et ne nécessite pas de connaissances techniques préalables.
Vous pouvez facilement personnaliser et manipuler vos images par le procédé glisser-déposer.
Ainsi, vous aurez la possibilité de réaliser plusieurs retouches telles que : insérer du texte ou des graphiques, changer les couleurs, flouter une photo, etc. Et cela quel que soit votre support de travail (ordinateur, tablette, smartphone).
Pour créer un nouveau design plus rapidement, vous pouvez démarrer à partir d’un modèle ou un thème que vous choisirez dans la base de données gratuite Canva (Cover YouTube ou Facebook, Carte de visite, dépliants, menus, CV, couverture de magazine, etc.).
Sinon, vous pouvez commencer avec une page blanche, choisir vos propres dimensions, intégrer vos propres images et élaborer votre propre design.
Seul inconvénient, l'offre gratuite ne vous permet pas de redimensionner les images que vous avez éditées. Pour faire ce job, vous pouvez opter pour l'excellent outil BeFunky !
Redimensionner vos images en ligne gratuitement à l'aide de BeFunky
Après l'étape d'édition, il est nécessaire de redimensionner vos images selon leur destination (blog, Facebook, YouTube, Instagram, etc.).
Le meilleur outil en ligne pour redimensionner facilement vos images est BeFunky. Il vous permettra d’ajuster la largeur et la hauteur de vos images en pixel ou en pourcentage.
En plus, il propose d'autres fonctionnalités d'édition de photo comme Canva, mais moi je l'utilise essentiellement pour redimensionner mes images.
Les dimensions d’image idéales pour votre blog et vos réseaux sociaux
Dimensions des images pour votre blog
Concernant les images à l’intérieur de vos articles, il est recommandé d’utiliser des images de dimensions 800 pixels en largeur et 450 pixels en hauteur ou 800x450px.
Dans la majorité des blogs, la largeur de votre image sera dictée par la largeur maximum de votre bloc d’articles qui varie entre 700 et 800 pixels. Donc même si vous ajoutez une image de 1200 pixels en largeur, elle sera certes de meilleure qualité, mais sera automatiquement redimensionnée selon la largeur maximum de votre bloc d’articles.
Pour les images téléchargées sur le Web, je vous recommande de fixer une largeur de 800 pixels et de laisser la hauteur s’ajuster automatiquement pour ne pas déformer l’image.
Souvenez-vous que lorsque vous réduisez les dimensions de votre image vous réduisez sa taille en même temps.
Pour les images de votre blog, une dimension de 800x450px est largement suffisante.
Cependant, si vous ne souhaitez pas rechigner sur la qualité, optez pour des dimensions 1200 en largeur et 630 pixels en hauteur.
Les dimensions du favicon sont de 16 pixels en largeur et 16 pixels en hauteur (16x16px) ou 32x32 pixels. Cela permet son affichage à côté de votre nom de domaine dans la barre de recherche du navigateur. Les dimensions 16x16px ou 32x32px conviennent également pour tous les navigateurs internet sur le marché.
Dimensions des images pour Facebook
- Photo de couverture : 851 pixels en largeur et 315 pixels en hauteur, 851x315px
- Photo de profile: 180 pixels en largeur et 180 pixels en hauteur, 180x180 px
- Images ou photos partagées dans le fil d’actualité : 1200 pixels en largeur et 630pixels en hauteur, 1200x630 px
Dimensions des images pour Twitter
- Image d’entête : 1500 pixels en largeur et 500 pixels en hauteur, 1500x500 px
- Photo de profile: 400 pixels en largeur et 400 pixels en hauteur, 400x400 px
- Images ou photos partagées dans le fil d’actualité : 440 pixels en largeur et 440 pixels en hauteur, 440x440 px
Dimensions des images pour Instagram
- Photo de profile : 110 pixels en largeur et 110 pixels en hauteur, 110x110 px
- Images ou photos : 1080 pixels en largeur et 1080 pixels en hauteur, 1080x1080 px
Dimensions des images pour Pinterest
- Photo de profile: 165px en largeur et 165px en hauteur
- Affichage dans votre tableau de bord : 222px en largeur et 150px en hauteur
- Aperçu image: 51px en largeur et 51px en hauteur
- Taille des "Pin": 236px en largeur
Dimensions des images pour YouTube
Photo de couverture de la chaine YouTube : 2560 pixels en largeur et 1440 pixels en hauteur, 2560x1440px
Dimensions de la photo de profil de votre compte Google
La photo de profil de votre compte Google peut être sous format JPG, JPEG ou PNG et sera automatiquement redimensionnée quel que soit ces dimensions de base. Cependant, la taille maximale de l'image ne doit pas dépasser 5 Mo.
Les meilleurs outils gratuits pour compresser vos images en ligne
Après avoir édité et redimensionné vos images, il ne vous reste plus qu'à les compresser afin de réduire leur poids.
Voici un comparatif de 4 outils gratuits en ligne pour diminuer la taille de vos images pour qu'ils prennent le moins de place possible dans votre blog et préserver ainsi un temps de chargement satisfaisant.
Optimizilla (interface en français)
Cet outil vous permet de réduire la taille de vos images JPEG et PNG en réglant le niveau de qualité souhaité. Optimizilla dispose d'un mode "Aperçu" pour comparer la qualité de votre image originale à celle qui est compressée.
Vous pouvez compresser jusqu’à 20 images à la fois.
Test: pour une image en format JPEG ou JPG, vous obtiendrez une réduction de 71% de sa taille sans baisse de qualité flagrante.
Vous pouvez également régler le degré de compression à votre guise.
Kraken.io (interface en anglais)
Cet outil vous permettra d'optimiser les formats d'image suivants : JPEG, PNG et GIF. Vous pouvez réduire la taille de plusieurs images à la fois. Cependant, l'offre gratuite de Kraken ne permet pas de compresser une image dont la taille est supérieure à 1 Mb par image.
Test: pour une image en format JPEG ou JPG, vous obtiendrez une réduction de 15% de sa taille en sélectionnant le mode "Lossless" et 73% avec l’option "Lossy".
Tiny PNG (interface en anglais)
Tini PNG dispose d'une interface simple et intuitive. Cet outil en ligne permet la compression de deux formats d'image JPEG et PNG.
Vous pouvez compresser jusqu'à 20 images en même temps.
La taille maximum est limitée à 5 Mb par image.
Après la compression, vous pouvez soit télécharger les images dans votre ordinateur ou les stocker directement dans votre Dropbox.
Test: pour une image en format JPEG ou JPG, vous obtiendrez une réduction de 35% de sa taille.
On obtient un meilleur résultat avec le format PNG en économisant jusqu’à 75% de la taille originale.
JPEG Optimizer (interface en anglais)
Si vous souhaitez optimiser des images en format JPEG ou JPG, l'outil en ligne le plus efficace et JPEG Optimizer. Il vous offre également une option pour redimensionner vos images.
Vous pouvez régler le degré de compression de 0 à 99 et attribuer une largeur à votre image, la hauteur sera calculé automatiquement.
Test: pour une image en format JPEG ou JPG, vous obtiendrez une réduction de 69% de sa taille sans baisse de qualité flagrante.
D'autres outils que vous pouvez tester :
- Squoosh : un outil de compression d'image JPEG et PNG très intéressant conçu par Google
- Compressor.io
- ImageRecycle : dispose d'une interface en français. En plus des images, il permet aussi de réduire la taille des fichiers PDF.
Voilà ! C’est tout pour ce tutoriel consacré à l'optimisation des images pour le Web.
Merci à vous et n'hésitez surtout pas à le partager sur les réseaux sociaux si vous jugez qu'il pourrait être utile pour d'autres personnes.