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 : 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 (1280px max.),
- images produits (WooCommerce) : 800px de large (1200px max.),
- images au format portrait : 1024px de haut,
- icônes ou logos entre 100px et 180px de large,
Images et référencement naturel / SEO
Encore plus simple :
- renommer ses images correctement,
- vider le champ titre (dans la bilbiothèque de media de WordPress),
- renseigner le texte alternatif (ou attribut alt) avec des mots clefs pertinents sans faire de remplissage.
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 : 1024px de haut
Pour les images au format portrait, je choisis généralement de les redimensionner à 1024px 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.
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.
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.
Redimensionner une image avec Paint
Vous ne l’aviez pas vue venir celle-là hein ? Pour redimensionner, avec Paint :
- Ouvrez le menu démarrer, Accessoires Windows, et cliquez sur Paint,
- 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,
- Cliquez sur Redimensionner (dans la barre supérieure),
- Une fenêtre flottante s’ouvre : changez la valeur par défaut Pourcentages en Pixels
- 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,
- Cliquez ensuite sur Fichier, Enregistrer sous et enfin Image au format JPEG,
- 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 :
- 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,
- Cliquez sur Image (dans la barre supérieure) puis Echelle et taille de l’image,
- 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,
- Pour enregistrer, cliquez sur Fichier et Exporter sous,
- Renommez votre image correctement, choisissez l’endroit où vous voulez enregistrer l’image et cliquez sur Exporter,
- 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
- Cliquez enfin sur Exporter
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 !
Vous pourriez aussi être intéressé(e) par
Renommer ses images pour le web – Tutoriel
Depuis que je m’essaie à la création de sites Internet, je rage (intérieurement) contre tous les sites que je vois et sur lesquels les images ne sont pas renommées. Pourquoi me direz-vous ? Parce que c’est mal. Ok, ça nécessite un peu plus d’explications que ça (je vous les donne juste après, avec les bonnes pratiques) mais sérieusement, si vous avez la main sur l’administration de votre site Internet, renommez vos images ! (même si c’est chiant fastidieux).
Vider le cache navigateur – Tutoriel
Pour surfer sur Internet, vous utilisez un navigateur web (Google Chrome, Mozilla Firefox, Opera, Brave, Microsoft Edge, Safari. Pour accélérer votre navigation sur le web, chaque navigateur emploie différentes technologies, l’une d’entre elles étant l’utilisation du “cache” ou “cache navigateur”. Si l’intention d’origine est bonne, nous allons voir que le cache peut poser problème. Et nous allons donc apprendre à vider le cache…
Comment ajouter un contact technique chez OVHcloud ? – Tutoriel
Pour les manipulations techniques sur votre votre domaine, votre hébergement ou vos emails (dans le cas d’un transfert de domaine par exemple), vous pourriez être amené à déléguer la gestion technique de votre nom de domaine. L’hébergeur français OVH Cloud propose cela, mais la démarche n’est pas toujours aisée, alors suivez le guide !
