Comment déterminer la meilleure taille d’image pour les sites web

Lors de la création d’un site web, l’optimisation des images est essentielle. C’est un peu comme l’histoire de Boucle d’Or : ni trop petites, ni trop grandes.

Si les concepteurs choisissent une image trop petite, elle risque d’être pixelisée et d’avoir une mauvaise qualité d’affichage.

Mais si l’image est trop grande, cela peut ralentir le temps de chargement de la page, obligeant les utilisateurs à attendre – surtout sur les appareils mobiles. Ignorer la vitesse de votre site peut être fatal !

Un bon développeur sait trouver le bon équilibre pour chaque image. Les images optimisées permettent d’accélérer le temps de chargement, même sur des appareils mobiles utilisant la 3G.

Suivez ce guide simple pour vous aider à choisir la taille idéale des images pour votre site web.

Étape 1 : Comprendre les 2 types de mesures de la taille des images

La “taille d’image” peut être comprise de différentes manières dans le monde digital.

Parlez-vous de la taille de l’image en octets ou en pixels ?

Taille de l’image – Mesurées en pixels

Les images physiques sont mesurées en pouces ou en centimètres, non ?

Dans le cas des images numériques, la taille est mesurée en “nombre de pixels en largeur” x “nombre de pixels en hauteur”. Par exemple, 150 x 150 est la taille typique d’une petite image carrée, souvent utilisée comme miniature.

Plus le nombre de pixels est faible, plus la taille du fichier sera petite. Mais si vous affichez une image trop petite à une taille plus grande que sa résolution, les utilisateurs risqueront de la voir déformée.

Ratio d’aspect

Un autre point important lors de l’optimisation des images est le ratio d’aspect. Si vous modifiez la largeur ou la hauteur d’une image sans ajuster l’autre dimension de manière proportionnelle, l’image sera déformée.

Ne vous en faites pas, de nombreux outils automatisent ce réglage, y compris l’outil d’optimisation mentionné à la fin de cet article.

Rappelez-vous simplement de modifier uniquement l’une des deux dimensions – la largeur ou la hauteur – et laissez l’outil ajuster l’autre pour conserver un bon ratio.

Comment trouver la taille en pixels d’une image sur un site web

Si vous avez une image sur votre site que vous souhaitez optimiser, voici la démarche :

1. Faites un clic droit sur l’image et sélectionnez “Inspecter” dans le menu. (Sur Chrome, vous devrez peut-être cliquer sur “Outils de développement” > “Inspecter”)

2. Sélectionnez la balise image dans le code HTML et vous verrez les paramètres de largeur et de hauteur auxquels l’image est affichée.

Taille du fichier de l’image – Mesurée en Ko

Un bit est un 1 ou un 0, et un octet est constitué de 8 bits, n’est-ce pas ?

Ensuite, 1 000 octets correspondent à un kilooctet (Ko). 1 000 kilooctets font un mégaoctet (Mo), et 1 000 mégaoctets font un gigaoctet (Go).

Plus vos images sont petites, plus votre site sera rapide à charger. C’est aussi simple que cela.

Pour les sites web, il est préférable que la taille de vos fichiers n’excède pas 1 Mo ou 1 Go.

Écrans haute résolution

Pour garantir des images optimales sur tous les types d’écran, y compris les écrans “Retina” d’Apple, vous voudrez peut-être doubler la qualité de votre image.

Cependant, cela n’est généralement pas nécessaire, sauf si les images sont essentielles pour votre activité, par exemple sur un site de photographie ou pour un portfolio d’artiste.

Comment trouver la taille du fichier d’une image sur un site web

1.  Faites un clic droit sur l’image et sélectionnez “Ouvrir l’image dans un nouvel onglet”. L’onglet nouvellement ouvert affichera l’image dans sa taille réelle.

2.  Faites un clic droit sur l’image et sélectionnez “Propriétés”. La fenêtre des propriétés vous montrera la taille de l’image en octets.

Quelle taille d’image choisir lors de l’achat d’images libres de droits ?

La première question à vous poser est : “Comment allez-vous utiliser cette image ?”

Allez-vous l’imprimer ? Dans ce cas, vous aurez probablement besoin d’une image haute résolution avec de grandes dimensions (largeur x hauteur) et 300 DPI (points par pouce). Plus votre impression est grande, plus la taille en pixels doit être grande.

Dans ce cas, téléchargez la taille requise et réduisez la taille de l’image pour votre site (voir les étapes ci-dessous).

Sinon, ne téléchargez jamais une image avec une largeur supérieure à 2000 pixels, car c’est plus grand que la plupart des écrans. Même si le prix est le même sur le site de photographie, cela ne vous sera d’aucune utilité. Vous n’aurez tout simplement pas besoin de fichiers image aussi volumineux, et ils prendront juste plus de place sur votre disque dur.

Sera-t-elle utilisée comme une image pleine largeur, couvrant tout l’écran ? Ou bien sera-t-elle un petit graphique à côté d’un encadré d’informations ?

Si l’image doit occuper tout l’écran et que vous voulez qu’elle soit de bonne qualité sur la plupart des écrans, vous pouvez opter pour une largeur de 1920 px.

Cependant, une largeur maximale de 1280 px est une bonne référence pour presque toutes les utilisations, y compris pour une image pleine largeur.

Étape 2 : Comprendre les formats de fichiers pour les images

.jpg vs. .png vs. MOZjpeg vs. .webp vs. .avif

Un résumé des formats de fichiers :

Les images JPG que vous obtenez de votre téléphone ou appareil photo sont magnifiques, mais elles ont tendance à être trop volumineuses (généralement en Mo, pas en Ko) pour se charger rapidement sur un site web.

Les fichiers PNG supportent les arrière-plans transparents, mais ils restent assez lourds.

Pour les sites web, il est conseillé d’utiliser :

• MOZjpeg (les fichiers ont toujours l’extension .jpg, ce qui les rend compatibles avec les formats .jpg requis)
• .webp – un format récent, pas pris en charge par les anciens navigateurs comme Internet Explorer
• .avif – un format encore plus récent, pris en charge par la plupart des navigateurs mais pas encore compatible avec WordPress nativement (fin 2022).

Quand WordPress prendra-t-il en charge le format de fichier .avif (AVIF) ?

Aucune information officielle des responsables de WordPress pour le moment. Nous mettrons à jour cet article dès qu’ils feront une annonce à ce sujet. Si le support des images .avif a déjà été annoncé et que vous en avez entendu parler, laissez un commentaire !

Quel est le meilleur format de fichier pour les images sur les sites web ?

Chaque format a ses avantages et inconvénients :

• .png est difficile à optimiser, il ne doit donc pas être utilisé pour un site web.
• MOZjpeg est compatible avec presque tout, mais n’accepte pas les arrière-plans transparents.
• .webp est compatible avec la plupart des navigateurs modernes et les CMS comme WordPress. Il supporte aussi les arrière-plans transparents.
• .avif est l’option la plus optimisée, mais il n’est pas encore très répandu.

Notre politique interne : utilisez MOZjpeg lorsque c’est possible pour garantir une compatibilité large, et utilisez .webp lorsque vous avez besoin de fonds transparents.

Règles pour la meilleure taille d’image sur un site web

• Essayez toujours de garder les dimensions des images proches de la taille à laquelle elles seront affichées sur le site.
• Gardez la taille du fichier en dessous de 100 Ko pour les images classiques.
•  Vous pouvez aller jusqu’à 200 Ko pour les images plus grandes, comme les images de fond pleine page.
•  Plus l’image est petite, mieux c’est. Assurez-vous que l’image reste nette et lisible.

Il existe de nombreuses façons d’optimiser vos images. Voici l’outil préféré des professionnels pour y parvenir.

Comment optimiser les images de votre site web pour obtenir la meilleure taille d’image ?

Optimisez les dimensions de vos images et réduisez leur taille avec Squoosh.app, un outil gratuit !

Cet outil vous permet de modifier à la fois la taille du fichier et les dimensions de l’image simultanément.

1. Coupez votre image avant de l’exporter dans Squoosh, car il n’y a pas d’outil de découpe sur le site.
2. Allez sur Squoosh.app et faites glisser votre image.
3. L’outil optimise automatiquement le fichier en format MOZjpeg.
4. Déplacez la barre pour comparer l’image avant et après optimisation.
5. Activez l’option de redimensionnement et ajustez la largeur pour réduire la taille de l’image. (La hauteur se redimensionne automatiquement en respectant le ratio d’aspect.)
6. Sélectionnez le format de fichier que vous souhaitez utiliser (voir les formats recommandés ci-dessus).

Voici une petite vidéo montrant comment cela se fait :