Calculateur de ratio d'image : comprendre et utiliser les rapports d'aspect
Qu'est-ce qu'un ratio d'image et pourquoi est-il important
Le ratio d'image (ou rapport d'aspect) exprime la relation proportionnelle entre la largeur et la hauteur d'une image ou d'un écran. Noté sous la forme largeur:hauteur (par exemple 16:9), il détermine la forme visuelle d'un contenu indépendamment de sa taille en pixels.
Maitriser les ratios est essentiel pour les designers, développeurs et créateurs de contenu. Un ratio incorrect provoque des déformations (image étirée ou écrasée), des bandes noires ou un recadrage automatique qui coupe des éléments importants de la composition.
Les ratios les plus utilisés dans le web et la vidéo
Chaque plateforme et chaque usage possède ses ratios de prédilection. Le 16:9 domine le web et la vidéo depuis l'adoption de la HD, tandis que le 1:1 s'est imposé avec les réseaux sociaux.
Répartition des ratios d'image les plus courants
Source : données agrégées des plateformes web et réseaux sociaux, 2026
16:9
Ratio d'image standard dominant pour le web, la vidéo HD et les écrans modernes
Comment calculer un ratio à partir des dimensions
Pour trouver le ratio simplifié d'une image, il suffit de diviser la largeur et la hauteur par leur Plus Grand Commun Diviseur (PGCD). L'algorithme d'Euclide permet de calculer ce PGCD efficacement.
Ratio = (Largeur / PGCD) : (Hauteur / PGCD) avec PGCD calculé par l'algorithme d'Euclide
Exemple concret : trouver le ratio d'une image 1920x1080
Prenons une image de 1920 x 1080 pixels, résolution standard Full HD :
Identifier les dimensions
1920x1080Largeur = 1920 px, Hauteur = 1080 px
Calculer le PGCD
PGCD = 120PGCD(1920, 1080) = 120 (algorithme d'Euclide)
Diviser par le PGCD
16 et 91920 / 120 = 16, 1080 / 120 = 9
Obtenir le ratio
16:9Le ratio simplifié est 16:9 (format HD standard)
La propriété CSS aspect-ratio pour le responsive design
Depuis 2021, CSS propose la propriété native aspect-ratio qui simplifie considérablement le maintien des proportions en design responsive. Avant cette propriété, les développeurs devaient recourir au "padding-bottom hack" pour maintenir un ratio.
Ancien padding hack
4 lignes
position: relative + padding-bottom + absolute
CSS aspect-ratio
1 ligne
aspect-ratio: 16 / 9
La propriété aspect-ratio est aujourd'hui supportée par 96 % des navigateurs (Chrome 88+, Firefox 89+, Safari 15+). Elle accepte la syntaxe aspect-ratio: 16 / 9 et fonctionne avec toutes les unités CSS, y compris les conteneurs flexbox et grid.
Astuce pour les images responsive
aspect-ratio avec object-fit: cover sur vos balises img pour éviter la déformation tout en remplissant le conteneur. L'image sera recadrée plutôt qu'étirée.Erreurs fréquentes à éviter
- Confondre ratio et résolution : 1920x1080 et 1280x720 ont le même ratio (16:9) mais des résolutions très différentes. Le ratio concerne la forme, la résolution concerne la quantité de pixels.
- Négliger le ratio des vidéos embarquées : un iframe YouTube sans ratio défini provoque des sauts de mise en page (CLS). Utilisez
aspect-ratio: 16 / 9sur le conteneur. - Oublier les ratios des réseaux sociaux : publier une image 16:9 sur Instagram feed (1:1 ou 4:5) entraine un recadrage automatique qui peut couper des éléments essentiels.
- Ne pas tester en mobile : un ratio 21:9 magnifique sur desktop devient minuscule en hauteur sur un écran portrait 9:16.
- Utiliser des pixels non entiers : lors du calcul inverse (ratio vers dimension), arrondissez toujours au pixel entier pour éviter le sous-pixel rendering.
Sources et références
- MDN Web Docs, CSS aspect-ratio : documentation de la propriété CSS.
- Google Developers, web.dev : guide sur l'utilisation d'aspect-ratio en responsive design.
- CSS-Tricks : exemples pratiques d'aspect-ratio.
- ITU-R BT.709 : standard international pour la vidéo HD (ratio 16:9).