Comment redimensionner des images pour votre site internet ?

Lorsque vous intégrez des images à votre site web, il est extrêmement important de réduire la taille du fichier autant que possible, sans pour autant compromettre la résolution globale (qualité de l’image). 

En effet, la taille (ou le poids) influe sur la vitesse de chargement de votre site. Plus un site est lourd, moins il va vite. Et les images ou le contenu vidéo représentent la majorité du poids de votre site web. 

Dans cet article, nous vous apprendrons comment redimensionner vos images. Il s’agit de réduire la taille des fichiers tout en s’assurant que la qualité de l’image ne soit pas perdue au cours du processus.

Table des matières

Pourquoi redimensionner les images pour le Web ?

Les images doivent être téléchargées à la bonne taille sur votre site internet, pour s’adapter à l’espace où elles apparaîtront sur la page. Si vous ne le faites pas, vous risquez d’avoir plusieurs surprises :

  • Des images qui ne s’adaptent pas à l’espace et qui, de ce fait, peuvent perturber une zone entière.
  • Les images de grande taille qui ralentissent le chargement de votre site et compromettent l’expérience globale de l’utilisateur.
  • Les petites images qui ont l’air floues et déformées.

Tous ces éléments donnent à votre site web un aspect moins professionnel et ont un impact négatif sur l’expérience de l’utilisateur. Mais alors, comment pouvez-vous résoudre ces problèmes ? Dans cet article, nous vous présentons nos solutions.

Il existe plusieurs options. La plupart d’entre elles consistent à redimensionner vos images à la bonne taille pour la zone de votre site web où elles seront affichées. Nous les passerons en revue ci-dessous. Mais commençons par le début et voyons quelle taille doit avoir l’image ?

Si vous avez d’abord besoin de trouver de belles images à utiliser sur votre site, vous pouvez consulter cet article :  7 astuces pour trouver les bonnes images pour votre site web. 

Comment connaître la taille d’une image sur WordPress ?

La première étape est déjà de savoir si vous avez besoin de redimensionner les images de votre site.

Sur votre interface WordPress, vous pouvez facilement trouver la taille de votre image. Il vous suffit de vous rendre dans la section « média » et de cliquer sur l’image concernée. 

Redimensionner les images avec WordPress

Sur l’administration :

Oui, vous pouvez redimensionner votre image directement sur WordPress. Dans vos “médias“ vous avez juste à cliquer sur l’image à redimensionner, puis modifier. Vous entrez alors sur l’interface d’édition. Entrez vos nouvelles dimensions et validez-les pour réduire la taille de votre image. 

NB : Sur cette interface vous pouvez également rogner une image.

Avec un plug-in :

Chez Wemove Studio, nous utilisons souvent le plug-in Imagify. C’est notre baguette pour réduire le poids d’un site. En ouvrant votre image, il vous propose la taille optimale qu’elle devrait avoir, et le poids est toujours considérablement réduit, sans toucher à la qualité ! 

On adore : la prévisualisation avant/après

Redimensionner les images avec des outils en ligne

Il existe beaucoup (trop?) d’outils en ligne pour redimensionner des images, mais nous avons nos préférés. C’est ceux-là qu’on a décidé de vous présenter.

Canva

Vous connaissez peut-être Canva pour créer des visuels simplement (et si ce n’est pas le cas, je vous invite à aller y faire un tour). Mais vous pouvez aussi utiliser l’outil pour redimensionner vos images. 

Une fois votre image téléchargée, rendez-vous sur Canva.fr.

Au lieu de choisir un modèle de visuel ou un format prédéfini, vous pouvez entrer vos propres dimensions juste au-dessus  :

Pour vous aider, voici formats les plus utilisés sur le web : 

  • Image d’en-tête en plein écran : 1920px x 1080 px
  • Bannière sur toute la largeur de votre site : 1920px x 700px
  • Image moyenne : 500px de largeur max.
  • Miniature : 200px de largeur max.

Rentrez les dimensions souhaitées et “créez votre design“. Cela ouvrira une page blanche où vous pourrez importer l’image téléchargée précédemment. Ajustez-là, recadrez-la selon vos envies puis téléchargez votre visuel au format que vous souhaitez. Votre image est redimensionnée.

I love img

I love img est aussi un outil à utiliser sans modération. Il est très facile à utiliser, peut-être même plus facile que Canva (pour cette fonctionnalité en tout cas).  Ici, rien de plus simple, glissez ou téléchargez votre image et modifiez les dimensions via la colonne de droite : 

La fonctionnalité hyper pratique de cet outil est la modification en masse. Vous pouvez importer plusieurs images, les redimensionner et télécharger, le tout en quelques clics. Vous pouvez aussi choisir de modifier la taille en pixel ou en pourcentage. Pensez à laisser cocher l’option “garder les proportions“ car une image disproportionnée, ce n’est pas ce qu’il y a de plus beau. 

Bref, c’est aussi un outil puissant, que vous devriez essayer.

On adore : Les noms de fichiers inchangés après le téléchargement des images redimensionnées. Parce qu’il n’y a rien de plus chronophage que de supprimer le “_compressed“ sur 36 fichiers, un par un… 

Photoshop

En traitement d’image, la suite Adobe en générale est forcément la solution la plus puissante. Photoshop ne déroge pas à la règle, c’est sûrement le logiciel phare de cette suite de logiciels. 

Le redimensionnement d’image sur Photoshop est super simple et rapide : 6 clics, de l’import à l’export (oui, j’ai compté). 

Mais l’inconvénient de la suite Adobe, c’est son prix. Surtout si vous n’êtes pas dans le domaine de l’image en général, vous n’avez pas besoin d’avoir ces outils. Vous pouvez néanmoins télécharger les logiciels gratuits comme Adobe Express Editor qui sera peut-être même plus intuitif grâce aux outils simplifiés.

Alors voici comment procéder pour redimensionner une image dans Adobe Express Editor :

  • Ouvrez l’outil en cliquant sur ce lien 
  • Glisser ou téléchargez votre image 
  • Dans la colonne de gauche cliquez sur “Resize image“
  • Puis dans la colonne de droite entrez vos nouvelles dimensions (en verrouillant, ou non, les proportions)
  • Téléchargez l’image redimensionnée, au format de votre choix.

Télécharger l’image directement à la bonne taille

Enfin, la dernière solution est presque la plus logique mais on n’y pense pas forcément : télécharger l’image à la bonne taille, oui c’est possible !

Dans le cas où vous téléchargez vos images sur des banques d’images libres de droits, vous pouvez le faire très simplement. Les propositions ne sont pas infinies mais vous trouverez quelques tailles standards qui pourront vous être utiles. 

En général, il suffit de cliquer sur la flèche à droite du bouton télécharger : 

Compresser une image pour le web

Vous avez maintenant différentes solutions pour réduire la taille de votre image. Vous avez sûrement déjà remarqué qu’elle est bien plus légère à présent, mais savez-vous que vous pouvez encore aller au-delà ? 

Sans toucher à sa taille, vous pouvez réduire son poids en la compressant. Encore une fois, attention à ne pas exagérer, cela pourrait détériorer sa qualité. 

Pour cela, vous trouverez différents outils en ligne, dont :

Après avoir compressé votre image, pensez tout de même à vérifier sa qualité. Cela vous évitera d’avoir des surprises une fois en ligne.

Vous avez maintenant toutes les cartes en mains pour réduire la taille et le poids de vos images et optimiser la vitesse de chargement de votre site web. Enfin, vous pouvez aussi faire appel à nous si vous voulez réaliser de beaux visuels pour votre site web !

Vous avez aimé cet article ? Partagez le ! :

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur whatsapp
Partager sur email
Partager sur print