Redimensionner ses images pour le web – Tutoriel

par | 12 mars 2022

Vous êtes ici : Accueil » Tutoriels » Redimensionner ses images pour le web – Tutoriel

Au-delà de renommer ses images pour le web, il faut aussi très souvent les redimensionner, pour éviter de se retrouver avec des images qui font 5000px de large et qui alourdissent inutilement les pages, provoquant des lenteurs dans les temps de chargement. Tout comme le renommage des images, l’opération est fastidieuse, mais ô combien essentielle. Dernière précision : « px » signifie pixels, la taille d’une image se définissant en pixels. Essayons de rendre une tâche chiante pénible la plus intéressante possible à travers ce tutoriel 😉

Les formats d’images à utiliser sur le web

Très rapidement, voici les formats que je recommande d’utiliser sur un site Internet :

  • .jpg
  • .png
  • éventuellement le .gif, avec parcimonie (sous peine de déclencher une crise d’épilepsie chez vos internautes)

Exit les fichiers .jpeg, .bmp, .raw, .tiff. Dans certains cas, les fichiers .svg peuvent être utilisés mais je n’en parlerai pas ici, ce n’est pas le sujet.

Différence entre .jpg et .png

Super simple : si votre image ou illustration possède une zone de transparence, il faut du .png. Dans tous les autres cas, privilégiez le .jpg, plus léger par défaut

Peluche le chat

Peluche le chat : l’image n’a pas de transparence, il s’agit d’un fichier .jpg

Le logo de Perspectives Marketing : le premier est juste « posé » sur fond blanc, le second sur fond gris très foncé. Il possède des zones de transparence : il s’agit d’un .png

Mes tailles d’images idéales pour le web

En résumé, pour vraiment faire simple :

  • images plein écran : 1920px de large,
  • images au format paysage : 1024px de large,
  • images produits (WooCommerce) : 800px de large,
  • images au format portrait : 700px de haut,
  • icônes ou logos entre 100px et 180px de large,

Néanmoins, je vous invite à poursuivre la lecture, de cet article, vous ne serez pas déçus…

Mes tailles d’images préférées pour un site web

Disclaimer : il s’agit ici de mes tailles d’images préférées, celles que j’utilise sur les sites que nous construisons car j’estime qu’elles présentent le meilleur compromis entre qualité de l’image et poids acceptable. Ce qui va suivre va probablement s’adapter à 99% des sites, mais il y aura forcément le 1% d’exceptions pour lesquelles ces tailles ne fonctionneront pas.

Précision : l’idée est quand même de choisir une image de bonne qualité : si vous redimensionnez une image dégueulasse pixellisée, elle restera pixellisée à l’arrivée.

Pour les images plein écran : 1920px de large

Je me sens obligé d’expliquer ce qu’est un plein écran : c’est lorsque votre image touche les bords droit et gauche de votre écran (du plein écran quoi !). Pour le plein écran, je recommande d’avoir des images de 1920px de large (la hauteur n’est pas pertinente, elle s’ajustera de manière proportionnelle une fois que la largeur aura été définie).

Ci-dessus un exemple d’image en plein écran (1920px de large), sur laquelle j’ai appliqué un effet parallaxe, parce que c’est stylé !

Pour les images au format paysage : 1024px de large

Pour les illustrations qui viennent accompagner un texte sur une page ou un article de blog, j’utilise généralement des images de 1024px de large, surtout si l’image peut être zoomée. Allez-y, essayez, on peut zoomer sur l’image !

Cas particulier : les images de produits sur WooCommerce : 800px de large

C’est généralement la taille que j’utilise, d’autant que WooCommerce crée une vignette carrée de la photo au moment de l’import (soit 800px par 800px). De cette façon, l’image n’est pas trop lourde à charger et permet encore d’obtenir zoom correct.

Pour les images au format portrait : 700px de haut

Pour les images au format portrait, je choisis généralement de les redimensionner à 700px de haut, sinon l’image s’affiche de manière beaucoup trop grande, et il faudrait remplir avec beaucoup de texte pour obtenir un équilibre entre les deux colonnes.

C’est d’ailleurs le cas ici, où je n’ai pas assez de texte pour atteindre le bas de l’image ci-contre. Ce n’est pas si grave, l’image se passe aisément de tout commentaire 😉

Le zoom est désactivé cette fois car je considère qu’elle illustre pleinement mon propos sans avoir besoin de l’avoir en gros plan. On peut aussi rajouter un call-to-action pour meubler.

image au format portrait

Les icônes (ou les logos) : quelque part entre 100px et 180px

Pour les icônes, ou les logos des partenaires par exemple, je recommande des tailles allant de 100px à 180px, en fonction des besoins. Pour vous donner une idée de ce que ça représente, je mets les différentes tailles ci-dessous, entourées d’une bordure pour que vous puissiez voir où s’arrête l’icône.

Bien sûr, pour l’harmonie de l’affichage, je recommande de redimensionner les icônes/logos à la même taille.

100px

120px

150px

180px

Les outils pour redimensionner les images

C’est bien beau d’indiquer quelle taille doivent faire les images, mais l’idée c’est quand même de vous montrer comment on fait concrètement. Personnellement, j’utilise GIMP, un logiciel de retouche d’images, mais on peut trouver plus simple et surtout déjà installé sur un ordinateur tournant sous Windows.

Vous pouvez zoomer sur le diaporama si vous le souhaitez.

Redimensionner une image avec Paint

Vous ne l’aviez pas vue venir celle-là hein ? Pour redimensionner, avec Paint :

  1. Ouvrez le menu démarrer, Accessoires Windows, et cliquez sur Paint,
  2. Faites glisser l’image que vous voulez redimensionner dans Paint ou cliquez sur Fichier puis Ouvrir et aller rechercher l’image ciblée dans votre ordinateur,
  3. Cliquez sur Redimensionner (dans la barre supérieure),
  4. Une fenêtre flottante s’ouvre : changez la valeur par défaut Pourcentages en Pixels
  5. Modifiez la valeur qui vous intéresse, en l’occurrence, je souhaite modifier le 1920px de large par 1024px, car il s’agit d’une image au format paysage, puis cliquez sur OK,
  6. Cliquez ensuite sur Fichier, Enregistrer sous et enfin Image au format JPEG,
  7. Renommez votre image correctement et sauvegardez la dans votre ordinateur, avant de l’envoyer sur votre site web.

Redimensionner une image avec GIMP

GIMP est un logiciel de retouche d’image, libre (open-source) et gratuit. Il n’est pas installé par défaut dans votre ordinateur, il faut donc le télécharger avant de pouvoir l’utiliser. Téléchargez GIMP depuis le site officiel.

Une fois qu’il est installé, lancez GIMP :

  1. Faites glisser l’image que vous voulez redimensionner dans GIMP ou cliquez sur Fichier puis Ouvrir et aller rechercher l’image ciblée dans votre ordinateur,
  2. Cliquez sur Image (dans la barre supérieure) puis Echelle et taille de l’image,
  3. Une fenêtre flottante s’ouvre : modifiez la valeur qui vous intéresse, en l’occurrence 1920px, à modifier en 1024px puis cliquez sur Mise à l’échelle,
  4. Pour enregistrer, cliquez sur Fichier et Exporter sous,
  5. Renommez votre image correctement, choisissez l’endroit où vous voulez enregistrer l’image et cliquez sur Exporter,
  6. une nouvelle fenêtre s’ouvre. J’applique généralement les réglages suivants :
    • Qualité : 90
    • Laisser coché Enregistrer le profil colorimétrique, décocher tout le reste
    • effacer le contenu du champ Commentaires
  7. Cliquez enfin sur Exporter
Vous pouvez zoomer sur le diaporama si vous le souhaitez.

Redimensionner une image en ligne

Si l’installation de logiciel vous rebute, il existe aujourd’hui une multitude d’outils pour redimensionner ses images en ligne. Je précise également que je n’ai pas testé les outils listés ci-dessous.

Voici ceux que j’ai trouvés grâce à la requête « redimensionner une image en ligne » sur notre moteur de recherche préféré :

Redimensionner une image sous Mac

N’utilisant pas les produits Apple, c’est toujours difficile pour moi de sortir un tutoriel pour Mac. Fort heureusement, d’autres l’ont fait. Je vous invite donc à suivre l’un de ces tutoriels :

C’est terminé pour ce tutoriel. Dites-moi dans les commentaires quel outil de redimensionnement d’images vous utilisez, si vous préférez les outils de redimensionnement en ligne, ou simplement si ce tuto vous a plu. Surfez sur le web, videz le cache !

0 Partages
Partagez
Tweetez
Partagez