Proportions et tailles des images pour le web

Publié le : 18 juin 2024

Même si la forme des images utilisées pour un site internet est à peu près connue de tous, les bonnes proportions à adopter son parfois difficiles à déterminer.
Voici un petit guide qui résulte des pratiques constatées et d'une certaine logique de placement.

Proportions

A partir des dimensions d'une images, nous pouvons calculer son rapport largeur hauteur. Mais il existe des rapports, ou proportions types, utilisés dans le domaine de la publication (web), de la photographie, du cinéma… En voici une liste non exhaustive.

• Proportion 1 par 1  : c'est tout simplement un carré,
• Proportion 1,25 par 1  : c'est le format 5÷4 (cinq quarts) utilisé pour certains anciens écrans d'ordinateurs et moniteurs CRT. Proche du 4÷3 mais légèrement plus carré,
• Proportion 1,333 par 1  : c'est le format 4÷3 (quatre tiers) qui correspond à l'ancien format des écrans (tube à rayons cathodiques) de télévision, ordinateur et pellicule du cinéma 35 mm,
• Proportion 1,5 par 1  : format 3÷2 aussi utilisé principalement pour les photographies et certains écrans d'ordinateurs portables,
• Proportion 1,6180339 par 1  : c'est un format appelé nombre d'or ; traditionnellement utilisé pour les cartes postales, de visites et documents sur mesures…
• Proportion 1,777 par 1  : c'est le format 16÷9 (seize neuvième) qui correspond souvent à une taille d'écran de PC, TV ou de vidéos en ligne,
• Proportion 2 par 1  : format « d'affiche » ou « demi-bannière » intermédiaire entre une image d'illustration et une bannière (type grand angle),
• Proportion 2,666 par 1  : c'est le format 8÷3 (huit tiers) qui correspond au double du format 4÷3,
• Proportion 5,333 par 1  : c'est le format 16÷3 (seize tiers) qui correspond au quadruple du format 4÷3,
• Proportion 10,666 par 1  : c'est le format 32÷3 (trente-deux tiers) qui correspond à l'octuple du format 4÷3,

Ces divers formats reflètent aussi l'évolution des technologies de support d'affichage et des pratiques de consommation ; chaque format offre des avantages spécifiques en termes d'expérience visuelle et d'utilisation pratique.

Utilisations

Format carré

C'est la forme des favicons d'une page web. Le format carré peut être utilisé pour des petits logos, des boutons cliquables.

La forme carrée convient aussi pour des illustrations d'un produit (sous forme de vignette) dans un site e-commerce. Nous pouvons ainsi avoir une vue « plus aménagée » sur l'objet en y intégrant des espaces esthétiques et des ombres portées.

Format 3÷2

Ce format rectangulaire peut être utilisé pour la première illustration sur le haut d'une page web, juste sous le titre de niveau 1. Ainsi, il n'empiète pas trop sur le contenu à venir et laisse apparaître les premières lignes de texte de l'article.

Cette proportion de 1,5 de largeur par 1 de hauteur est aussi très pratique pour les vignettes de page de site.
Ces imagettes sont souvent intégrées dans un lien hypertexte avec un titre au dessus ou sur le côté (cela dépend du format d'écran) et un petit texte résumé accrocheur (incitation au clic), situé sous l'image.

Le format 3÷2 est aussi utilisé pour présenté des schémas électriques ou des vues techniques (proche du format papier dont la proportion est 1,414 par 1).

Format pour vision étendue

Nous utiliserons ici les format 16÷9 et la proportion issue du nombre d'or 1,618.

Pour une vision type « grand angle », la proportion 2 par 1 peut être utilisée.

Format bannière

Souvent utilisé pour des blocs rectangulaires d'annonces publicitaires, de promotions d'évènements, c'est aussi un format d'illustration employé dans les tutoriels pour une copie d'écran, ou du code…

Format inversé

Il est possible d'inversé les formats ; par exemple si nous désirons afficher un rectangle publicitaire sur la barre latérale d'une page web.
Une image de 300 pixels de large et de 450 pixels de hauteur, correspondra au format 3÷2 inversé, soit 2÷3 qui correspond à la proportion 1 par 1,5 (1÷1,5=2÷3≈0,6666).

Dans un article ou contenu

D'une manière générale rien n'est fixé mais il faut tenir compte de la façon dont l'oeil humain perçoit les choses.
L'auteur d'une page web, adaptera les formats d'image en fonction du contexte ou du thème traité.

Un botaniste qui publie des photographies de plantes sauvages ou d'arbres isolés, sera peut-être contraint d'utiliser des formats inversés (plus hauts que larges).

Une auteure de recettes de cuisine utilisera des formats « photo » pour illustrer l'environnement de sa cuisine, mais pourra employer le format carré pour illustrer un plat ou des ingrédients.

Dimensions en pixels

La liste suivante vous indique les largeurs préférentielles à utiliser. Elles sont issues des dimensions des écrans et des pratiques de présentation d'une page web.

Exemple : une largeur de 1024 pixels induira une hauteur de 768 pixels dans le format 4÷3 ; c'est aussi la dimension utilisée dans la fabrications de nombreux écrans.

• 120, 160,
• 200, 240,
• 300, 320, 360,
• 400, 480,
• 640,
• 720,
• 800,
• 960, 980,
• 1024, 1080, 1280, 1500, 1600, 1920…

Il conviendra de calculer la hauteur de l'image associée à sa largeur, en prenant en compte la proportion désirée (revoir la liste).

Exemples pour des images en 300, 640 et 800 pixels de larges dans le tableau suivant.

Dimensions particulières

Exemple, vous avez une image qui fait 375 pixels de large et 285 pixels de hauteur. Vous désirez absolument garder toute sa largeur. Voici une solution :

Si vous divisez 375 par 275, vous obtenez un résultat de 1,3157894 qui est proche de 1,3333 (format 4÷3). Vous allez donc tronquez l'image juste sur sa hauteur.
Vous divisez 375 par 1,3333 et vous obtenez comme résultat 281,25.
Avec un logiciel comme PaintNet, vous recadrez l'image en 375 px de largeur (comme à l'origine) et 281 px de hauteur ; vous obtenez une image au format 4÷3.

Pour cette implémentation « hors normes » vous créer une class CSS dans une ligne de style embarqué.

<html>
<head>
...
<style>
.image_375_281{width:100%;max-width:375px;height:auto;}
</style>
...
</head>
<body>
...
<img class="image_375_281" width="375" height="281" src="mon_image.png" title="mon image" atl="text alternatif">
...
</body>
</html>

Notes

1. La valeur exacte du nombre d'or est : φ=1+√5÷2 soit φ≈1,618033988749895…