La taille et la qualité d’une image dédiée à l’utilisation sur une page web sont déterminées par divers éléments.

La taille physique

La taille physique d’une image est basée sur deux choses : la taille de l’image à l’écran et la taille du fichier. Généralement, la taille du fichier est traitée comme un problème différent.

La taille du fichier

C’est la taille du fichier sur votre disque dur ou serveur.

Résolution

La résolution se réfère aux nombre de pixels contenus dans une image. La résolution est parfois identifiée par la largeur et la hauteur de l’image ainsi que par le nombre total de pixels dans l’image.

Le type de fichier

Il existe plusieurs types d’images que l’on peut couramment trouver sur internet : jpeg,gif,png et ico pour les favicons (l’icône à coté de l’adresse du site ou dans l’onglet de votre navigateur).

La taille physique d’une image est l’information que nous avons besoin de connaître afin de déterminer la quantité « d’espace » que l’image occupera sur une page web. Si votre thème WordPress dispose d’une zone de contenu à largeur fixe de 600 pixels et que l’image que vous souhaitez utiliser est de 800, l’image repoussera la barre latérale et la mise en page de votre page web, gâchant ainsi votre conception. Les images dans cette largeur de 600 pixels doivent être limitées à cette largeur maximale afin de protéger la mise en page de votre page. C’est à vous de déterminer la taille qu’elles doivent avoir à partir de là, en faisant correspondre l’image à votre disposition et à vos styles généraux.

La taille du fichier détermine le temps nécessaire au chargement de votre page, la taille du fichier, souvent augmentée en raison de la qualité d’une image en haute résolution, rendra le chargement plus long. Les gens n’ont souvent pas la patience d’attendre un long temps de chargement des pages de site web, donc le fait de garder une taille de fichier faible accélère le temps d’accès à votre page. En règle générale, les grandes images de haute qualité doivent être conservées entre 100K et 60K. Les images plus petites devraient être plus proches de 30K et moins.

La résolution de l’image dicte sa clarté. Cependant, plus la résolution est élevée, plus la taille du fichier est grande, vous devez donc faire un compromis entre la qualité et la taille du fichier.

Heureusement, les différents types de fichiers les plus utilisés sur internet disposent de fonctions de compression. Lorsque vous enregistrez le fichier sous l’un de ces types, il condense ou compresse les informations contenues dans le fichier image. Les navigateurs internet peuvent décompresser ces informations pour afficher l’image à l’écran. Certains logiciels graphiques vous permettent de régler le taux de compression pour contrôler la qualité de l’image (et donc la taille du fichier) au moment où vous l’enregistrez. En fonction de l’utilisation que vous faites des images de votre site, vous devrez peut-être faire des essais pour obtenir le bon ratio qui maintiendra une bonne qualité de résolution tout en conservant une petite taille de fichier.

Les sites web utilisent quatre types de fichiers courants. La fin d’un nom de fichier (appelée extension) indique de quel type il s’agit. L’un des types, ico, consiste à créer un fichier favicon — mais cela n’est généralement fait que lors de la création d’un site web. Les trois autres types sont utilisés pour les images classiques :

• jpg (JPEG) est utilisé pour les photos. L’enregistrement d’une photo en jpg supprime des détails de la photo. Les bons éditeurs d’images vous permettent de contrôler la quantité de détails supprimés (la “compression”). Différentes photos nécessitent une compression différente; en faisant cela avec soin et en regardant le résultat, vous pouvez obtenir une photo utilisable avec une petite taille de fichier.
• gif peut être néfaste pour les images. Il est préférable de l’utiliser pour les dessins au trait, comme les logos, avec des zones solides de la même couleur. Ou, bien entendu, pour les images animées.
• png est utilisé pour les photos et le dessin au trait. Il compresse les photos sans perdre les détails, mais produit généralement des fichiers photo plus volumineux que les JPEG. Cependant, certains navigateurs plus anciens ne prennent pas complètement en charge le format png.

Si vous n’êtes pas sûr du type de fichier qui convient le mieux à une image particulière, essayez d’enregistrer l’image dans plusieurs types et de comparer les tailles des fichiers. Utiliser le bon type peut faire une grande différence ! Vous trouverez plus d’informations dans l’article de Sitepoint : GIF-JPG-PNG – Quelle est la différence ? (en anglais).

Redimensionner les images # Redimensionner les images

Tous les logiciels graphiques ne permettent pas de redimensionner les images, mais la plupart le font. Consultez la table des matières ou l’index de votre logiciel graphique pour trouver le redimensionnement, la taille, la transformation, la réduction, l’agrandissement ou tous les synonymes pour la même choses. S’il ne dispose pas de cette fonction, vous devrez peut-être trouver un autre logiciel.

Le processus de redimensionnement des images est assez simple. Il existe généralement deux méthodes :

1. Vous pouvez redimensionner une image en utilisant les outils fournis qui vous permettent de déplacer manuellement les bords d’une image pour la déformer ou la redimensionner. Le meilleur moyen est de saisir un coin, et non le bord, pour redimensionner l’image. La « poignée » de coin redimensionnera généralement l’image en maintenant le rapport hauteur-largeur global. Consultez votre manuel pour des instructions spécifiques.
2. L’autre méthode consiste simplement à spécifier la taille finale de l’image. Les logiciels graphiques avancés vous permettent de la définir par des dimensions exactes ou un pourcentage de réduction ou d’agrandissement.

Après avoir redimensionné l’image, celle-ci peut être plus petite, mais elle peut aussi être légèrement floue. Vous pouvez affiner la mise au point de l’image réduite en utilisant la fonction de réglage fin de votre logiciel.

Lorsque vous avez réglé votre image réduite ou une nouvelle vignette, exportez l’image en jpg, gif ou png.

Haut ↑

Ressources # Ressources

• Formats de fichiers graphiques sur le Web (en anglais)
• GIF, JPG and PNG – Quelle est la différence? (en anglais)

Traduit par Laurent MILLET
Relu par Jenny Dupuy & Jb Audras
Dernière mise à jour le 22 Avril 2020