Il m’arrive parfois de travailler sur des sites Web déjà en ligne où mon mandat consiste à conseiller sur leur maintenance, leur référencement, leur optimisation etc. Le problème le plus récurrent que je rencontre sur ces sites est souvent relié à la dimension des images.

Pourquoi est-il important de redimensionner ses images?

On le sait, Google pénalise, dans son classement, les sites avec un temps de chargement élevé. Plus les images sont volumineuses, plus le chargement de votre page sera long. Il est donc primordial de bien redimensionner les images, selon vos besoins avant de les téléverser sur WordPress.

Si vous utilisez des photos prises avec votre caméra semi-professionnelle, vos photos sont probablement de très grande qualité, donc très volumineuses. Si vous poussez en ligne une image de 3300 x 2000 pixels pour ensuite que l’afficher par 330 x 200 pixels, le fureteur va tout de même télécharger l’image de 3300 x 2000 pixels.

Même chose sur les banques d’images : assurez-vous de télécharger un format adéquat pour son utilisation.

Évaluez la grandeur d’image dont vous avez besoin, redimensionner et téléverser ensuite sur WordPress.

Quelle est la grandeur de mon image?

Partons de la base pour ceux d’entre-nous qui sont moins familier avec la gestion de fichiers images. Voici comment vérifier la grandeur de vos images sur votre PC ou votre MAC :

Comment évaluer la grandeur d’image dont j’ai besoin?

Vous avez une grande bannière sur votre page d’accueil qui fait la largeur de votre écran et vous ne savez pas quelle grandeur celle-ci doit mesurer? Il est fort probable que ce type d’image soit la plus grande de votre site et un petit coup d’oeil à ceci va vous éclairer :

Statistiques de largeur minimum d’écran (résolution d’affichage) (source) :

1024px : 96%
1280px : 93%
1366px : 84%
1920px : 49%
2560px : 8%

Donc, si votre image fait 1280px de large, elle sera affichée correctement sur 93% des écrans de vos visiteurs. C’est très raisonnable comme pourcentage! De plus, il est fort possible que le % de visiteurs sur votre site qui navigue sur leur cellulaire soit plus élevé que celui sur ordinateur : ils visionnent donc votre site sur un plus petit écran qui n’a pas besoin de très grandes images pour un résultat optimal.

Pour les autres images, logiquement, celles-ci ne devraient pas dépasser 1280px de large. Si l’image s’affiche sur la moitié de l’écran, elle doit mesurer 1280 divisé en 2 de large… et ainsi de suite.

TRUC RAPIDE : rendez-vous sur le démo de votre thème WordPress afin de voir quelle grandeur d’image est utilisée selon le contexte. Les types d’images qui vous intéresseront surement seront : les images « mise de l’avant » dans un article, les images à l’intérieur d’un article, un produit de votre boutique, une photo dans votre portfolio, etc. Sauvegarder une de ces images et regardez quelle grandeur elle fait avec le petit truc un peu plus haut.

Ne virez pas fou à essayer de tomber sur la grandeur d’image parfaite au pixel près : s’assurer de ne pas mettre des photos beaucoup trop large sur son site est déjà un bon début!

PAGE RULER REDUX – extension de Chrome

Un autre petit truc : si vous utilisez le navigateur Web Chrome, installer l’extension PAGE RULER REDUX. Ce dernier vous permet de mesurer n’importe quel élément dans une page Web – dont les images!

Une fois installée, un icône de règle à mesurer sera rajouté à l’interface de votre navigateur en haut à droite.

Pour voir l’extension en action, visionnez le court vidéo ci-dessous :

«Oui Julie mais je n’ai pas Photoshop!…»

Si vous n’avez pas de logiciel d’édition d’image sur votre ordinateur, je vous recommande de vous créer un profil sur CANVA. Il s’agit d’une application totalement en ligne qui vous permet de non seulement redimensionner vos images, mais de créer une foule d’images selon des canevas précis (image couverture pour votre page Facebook pro, image pour votre fil Instagram, etc.).