Le ratio d’aspect désigne la proportion entre la largeur et la hauteur d’un espace visuel qu’il s’agisse d’une image, d’un cadre (frame), d’un écran, d’une vidéo ou d’une interface.
Il s’exprime sous la forme largeur : hauteur (ex. : 16:9) et reste indépendant de la résolution réelle (en pixels) ou de l’unité de mesure (points, centimètres, etc.).
| Ratio | Usage typique |
|---|---|
| 16:9 | Télévision HD/Full HD/UHD, vidéos YouTube, présentations modernes |
| 4:3 | Anciens écrans CRT, appareils photo compacts, certaines tablettes |
| 3:4 ou 4:5 | Photographie portrait (Instagram, tirages photo) |
| 1:1 | Réseaux sociaux (carré Instagram classique) |
| 21:9 | Cinéma ultrawide, moniteurs immersifs |
| 9:19.5 ≈ 19.5:9 | Écrans smartphones modernes (ex. : iPhone X : 375 × 812 points → 812÷375≈2,165 → ratio ≈ 9:19.5 ou plus couramment arrondi à 19.5:9) |
Note sur l’iPhone X :
Bien que ses dimensions soient de 375 × 812 points (ou 1125 × 2436 pixels), le ratio exact est :
375812≈2,165⇒Ratio≈9:19,5 (ou 19,5:9 en mode paysage)
Ce format allongé permet d’afficher plus de contenu vertical, adapté à la navigation mobile.
Pourquoi le ratio d’aspect compte-t-il ?
- Adaptation multi-écran : Un design responsive doit anticiper différents ratios (mobile, tablette, desktop, TV).
- Cadrage et composition : En photo ou vidéo, le ratio influence l’équilibre visuel et la narration.
- Expérience utilisateur : Un contenu mal adapté au ratio de l’écran entraîne des bandes noires (letterboxing), des coupes (cropping) ou une distorsion.
- Design d’interface : Dans Figma ou SwiftUI, les composants doivent souvent conserver leur ratio (ex. : avatars, vignettes vidéo).
Attention aux confusions
- Ratio ≠ Résolution :
Deux images peuvent avoir le même ratio (16:9) mais des résolutions très différentes (1920×1080 vs 1280×720). - Ratio ≠ Orientation :
Un ratio de 3:4 est portrait, tandis que 4:3 est paysage même proportion, orientation inversée.
Liste des frames recommandés (nom + dimensions de référence)
| Nom du Frame | Ratio | Dimensions de référence (px) | Usage typique |
|---|---|---|---|
| Mobile – Standard | 9:16 | 1080 × 1920 | Smartphones (paysage inversé) |
| Mobile – iPhone 14 Pro | 9:19.5 ≈ 19.5:9 | 1179 × 2556 | iPhone récent (portrait) |
| Mobile – Android Large | 10:19 | 1440 × 2736 | Écrans Android hauts |
| Tablette – Portrait | 3:4 | 1536 × 2048 | iPad, tablettes |
| Tablette – Paysage | 4:3 | 2048 × 1536 | Présentations, kiosques |
| Desktop – Standard | 16:9 | 1920 × 1080 | Moniteurs, Full HD |
| Desktop – Ultrawide | 21:9 | 2560 × 1080 | Moniteurs immersifs |
| Desktop – MacBook | 16:10 | 2560 × 1600 | Ordinateurs Apple récents |
| Social – Instagram Feed | 4:5 | 1080 × 1350 | Publications portrait |
| Social – Instagram Story / Reels | 9:16 | 1080 × 1920 | Stories, TikTok, Reels |
| Social – YouTube Thumbnail | 16:9 | 1280 × 720 | Miniatures vidéo |
| Carré | 1:1 | 1080 × 1080 | Instagram classique |
Astuce : Utilisez des multiples de 12 ou 8 pour rester aligné avec les systèmes de grille modernes.
Couleurs & annotations
- Ajoutez une bordure subtile (ex. : 1 px, gris 30 %) autour de chaque frame.
- Incluez un badge texte en haut à gauche avec le ratio (ex. :
9:16en petit texte blanc sur fond noir semi-transparent). - Utilisez des fond pastel différents pour distinguer rapidement les catégories (mobile, social, desktop).
Utilisation dans votre workflow
- Lorsque vous concevez une maquette responsive, dupliquez votre design dans plusieurs frames de ratios différents.
- Pour les prototypes interactifs, testez le comportement de votre UI en mode 9:16 (mobile) et 16:9 (desktop).
- Partagez cette page avec vos développeurs : elle sert de spécification visuelle pour les points de rupture (breakpoints).
Explorer les thématiques : Figma