Taille de l’image : conseils et outils pour redimensionner vos images et booster votre site

Comprendre comment identifier correctement la taille de vos images et comment les redimensionner est fondamental pour améliorer les performances de votre site web.
Une page Web rapide et optimisée contient toujours des images qui ont été préalablement redimensionnées et compressées.

Toutes les images que vous souhaitez ajouter à votre site Web ne seront pas toujours de la taille exacte dont vous avez besoin : la plupart du temps, vous devrez utiliser un éditeur de photos pour redimensionner vos images.

Les éditeurs de photos peuvent également compresser vos images, mais nous aborderons ce point plus en détail dans un article séparé consacré à la compression d’images.

Dans cet article, nous allons nous pencher sur les secrets du redimensionnement des images : vous apprendrez ce qu’est la taille de fichier pour les images et comment déterminer la bonne taille de vos images.
Nous vous proposerons également quelques outils que vous pourrez utiliser pour modifier les dimensions de vos images. 

Qu’est-ce que le redimensionnement d’une image signifie vraiment ?

Les dimensions (hauteur et largeur) d’une image sont mesurées en pixels : un pixel est l’unité de mesure permettant d’identifier l’espace occupé par une image à l’écran. 

La taille du fichier, par contre, est la quantité d’espace de stockage que votre image occupera : elle est mesurée en kilo-octets (Ko) et/ou en méga-octets (Mo), où 1 Mo = 1000 Ko.

Les dimensions et la taille du fichier sont directement liées : plus les dimensions d’une image sont grandes, plus la taille du fichier sera grande. 

Les images pour le Web peuvent également être définies par leur résolution en pixels, qui indique en général la qualité d’une image. Cette mesure est exprimée par deux nombres, par exemple 1024 × 768 (où le premier est le nombre de colonnes de pixels et le second le nombre de lignes de pixels).

Redimensionner une image pour le web signifie réduire sa largeur et sa hauteur, ce qui finira aussi par réduire la taille du fichier. 

Lorsque la taille d’une image est réduite, l’éditeur de photos de votre choix supprimera automatiquement les informations de pixels inutiles et modifiera la dimension du fichier. 

Nous pouvons donc définir le redimensionnement comme la prise en compte des dimensions physiques d’une image.

Comment déterminer la bonne taille pour une image ?

Pour que vos images soient prêtes à être téléchargées sur le Web, vous devez vous assurer qu’elles ont la bonne hauteur et la bonne largeur pour la zone de contenu de la page où vous allez les placer.

Il est très important de déterminer à l’avance la largeur de la zone de contenu de votre page Web : pour économiser des ressources et ainsi optimiser le temps de chargement de la page, évitez toujours de télécharger des images plus larges que cette partie de la page. 

Il existe plusieurs outils qui vous permettent d’évaluer la bonne largeur de votre zone de contenu. Les plus rapides sont les suivants :

• Depuis le navigateur (Chrome, Firefox ou Safari), vous pouvez cliquer avec le bouton droit de la souris sur n’importe quel élément de la page et choisir Inspecter l’élément pour ouvrir Developers Tools. Il indiquera instantanément les dimensions de la zone de contenu qui vous intéresse :

• Pour les utilisateurs Apple, vous pouvez profiter de l’outil de capture intégré de Mac, Grab : vous pouvez l’activer avec Command+Shift+4. Lorsque vous dessinez une zone à l’écran, vous verrez les pixels de cette zone.

Quel outil utiliser pour redimensionner vos images ?

Il existe une grande variété de logiciels et d’outils en ligne qui peuvent vous aider à redimensionner vos images. Il n’y a pas vraiment d’outil meilleur que les autres pour changer les dimensions d’un fichier : l’important est de localiser la fonction de redimensionnement, ajouter la largeur souhaitée et laisser l’outil faire son travail ! 

Voici quelques suggestions sur les outils de redimensionnement que vous pouvez utiliser :

• Photoshop : le logiciel de retouche photo le plus connu
• GIMP : très similaire à Photoshop, c’est un logiciel gratuit d’édition d’images
• IrfanView : logiciel gratuit d’édition d’images pour Windows
• High Quality Photo Resizer : logiciel gratuit d’édition d’images pour Windows
• Preview app : la solution intégrée pour chaque version de macOS et OS X

Si vous préférez un outil de redimensionnement d’image en ligne, en voici quelques-uns que vous pouvez essayer :

• Squoosh.app: gratuit, développé par Google

• Picmonkey.com : premium, essai gratuit disponible
• Fotor.com : freemium, également disponible comme application mobile
• BeFunky.com : gratuit, également disponible sous forme d’application mobile
• Pixlr.com : gratuit, également disponible comme application mobile 
• Picozu.com : gratuit, il supporte aussi les fichiers images SVG

Choisir le bon format d’image

Une fois les dimensions de votre fichier image redimensionnées, il est temps de leur donner un nom et un format ! Choisir le bon format d’image est important pour garder vos pages légères et rapides.

Les graphiques du site Web sont souvent construits à l’origine au format SVG (Scalable Vector Graphics files) : ils utilisent un format texte basé sur XML qui décrit l’image et donne des indications sur son affichage.
Comme ils dépendent du texte à décrire, les fichiers SVG peuvent être mis à l’échelle à différentes tailles sans perdre en qualité : ils peuvent être définis comme indépendants de la résolution.

En raison de cette caractéristique, les concepteurs Web préfèrent construire leurs graphiques en SVG, afin de pouvoir les redimensionner plus tard pour les adapter à d’autres designs dans le futur.
Les trois formats d’image les plus appropriés pour le web sont : 

• .jpg 
• .png
• .gif

Images en JPEG

Ce format est idéal pour les images non planes, comme les images photographiques. Il ne convient pas aux vecteurs ou aux images contenant du texte et ne supporte pas les transparences. Les images JPEG peuvent être compressées assez facilement et leur taille de fichier est adaptée aux pages Web.

Images en PNG

En revanche, s’il s’agit d’illustrations ou d’exportation à partir d’un fichier vectoriel, le PNG est la solution la plus appropriée. Contrairement aux JPEG, les PNG utilisent pleinement la transparence. De plus, ce format traite les teintes différemment, ce qui permet d’obtenir des ombres plus homogènes et des informations d’image plus riches. Pour cette raison, il génère généralement des fichiers de plus grande taille : son utilisation n’est suggérée que si vous avez besoin de garder la transparence.

Images en GIF

Contrairement au JPEG, les GIF ne peuvent exporter que des images contenant jusqu’à 256 couleurs. Si l’image originale contient un plus grand nombre de couleurs, la perte de qualité sera significative. Le format GIF supporte la transparence et les cadres multiples, donc de nos jours, il est surtout utilisé pour créer des GIF animés.

Tout ce que vous devez savoir sur l’optimisation des images dans WordPress

Dans cet article, vous avez appris :

• Les définitions des dimensions de l’image et de la taille du fichier
• Qu’est-ce que le redimensionnement d’image et comment déterminer la bonne taille pour vos images ?
• Quel type d’outils vous devriez utiliser pour redimensionner vos images
• Quel format de fichier choisir pour vos images

Maintenant que vous savez tout sur la réduction de la taille des images, il est temps d’aller de l’avant et d’apprendre d’autres choses sur l’optimisation des images :

• Comment compresser vos images ?
• Compresser une image en ligne
• LazyLoading vos images
• Optimisation d’images avec Imagify : qu’est-ce que c’est et comment l’utiliser ?