# Les ratios d’image : 1:1, 4:5, 9:16, 16:9 et plus

[Canonical HTML page](https://gradiently.design/fr/guide/aspect-ratios-explained)

Les tailles en pixels changent d’une plateforme à l’autre, mais il n’existe qu’une poignée de formes. Apprenez-les, avec le calcul qui les relie, et vous n’écraserez plus jamais un design.

## The short version

- Un ratio d’image est le rapport proportionnel entre la largeur et la hauteur d’une image, écrit largeur:hauteur.
- Pour trouver le ratio de n’importe quelle taille, divisez les deux nombres par leur plus grand diviseur commun : 1920×1080 devient 16:9.
- Pour obtenir une nouvelle taille au même ratio, multipliez la nouvelle largeur par la hauteur du ratio et divisez par sa largeur.
- Les ratios les plus importants pour les réseaux sociaux sont 1:1, 4:5, 9:16, 16:9 et 1,91:1.
- Passer une image à un autre ratio veut toujours dire recadrer, ajouter de l’espace ou recomposer le design ; l’étirer la déforme.

Un **ratio d’image** est la forme d’une image : sa largeur comparée à sa hauteur, écrite avec deux nombres comme 16:9. Une vidéo 1920×1080 et une miniature 1280×720 ont des tailles différentes mais le même ratio 16:9 : l’une se met à l’échelle de l’autre sans recadrage. La plupart des problèmes de « mauvaise taille » sont en réalité des problèmes de mauvaise forme.

## Les ratios courants et leurs usages

- 1:1 carré: 1080 × 1080
- 4:5 portrait: 1080 × 1350
- 2:3 épingle: 1000 × 1500
- 9:16 vertical: 1080 × 1920
- 4:3 classique: 1600 × 1200
- 16:9 écran large: 1920 × 1080
- 1,91:1 carte de lien: 1200 × 630
- 3:1 en-tête: 1500 × 500

Huit formes couvrent presque tout ce que vous créerez. Dessinées à l’échelle, du carré à l’en-tête fin.

| Ratio | Forme | Taille type | Utilisé pour |
| --- | --- | --- | --- |
| 1:1 | Carré | 1080×1080 | Carré Instagram, posts Facebook et LinkedIn, pochettes de playlist |
| 4:5 | Portrait | 1080×1350 | Posts portrait Instagram, Threads, Facebook et X |
| 3:4 | Portrait | 1080×1440 | Le recadrage des posts dans la grille de profil Instagram |
| 2:3 | Grand portrait | 1000×1500 | Épingles Pinterest |
| 9:16 | Vertical | 1080×1920 | Stories, Reels, TikTok, Shorts, statut WhatsApp |
| 4:3 | Paysage classique | 1600×1200 | Anciennes slides, shots Dribbble, posts Google Business en 1200×900 |
| 16:9 | Écran large | 1920×1080 | Miniatures YouTube, slides, héros de site web, posts X et Bluesky |
| 1,91:1 | Carte large | 1200×630 | Aperçus de lien et images Open Graph |
| 3:1 et 4:1 | Bannière | 1500×500, 1584×396 | En-têtes X, bannières LinkedIn |

Un ratio, plusieurs plateformes. Quand deux formats partagent un ratio, un seul design sert aux deux par simple mise à l’échelle.

Les tailles exactes en pixels de chaque plateforme sont dans [les tailles d’images pour les réseaux sociaux](https://gradiently.design/fr/guide/social-media-image-sizes). Notez le peu de formes qui existent : si vous créez bien en 1:1, 4:5, 9:16 et 16:9, vous couvrez l’essentiel de la présence sociale d’une marque.

## Comment calculer un ratio d’image

Prenez la largeur et la hauteur et divisez-les par le plus grand nombre qui divise exactement chacune, le plus grand diviseur commun. Ce qui reste est le ratio sous sa forme la plus simple.

1. **Partez de la taille** Par exemple 1080×1350, un post Instagram en portrait.
2. **Trouvez le plus grand diviseur commun** Le plus grand nombre qui divise exactement 1080 et 1350 est 270.
3. **Divisez les deux côtés** 1080 ÷ 270 = 4 et 1350 ÷ 270 = 5. Le ratio est 4:5.
4. **Ou utilisez un décimal** Divisez la largeur par la hauteur : 1080 ÷ 1350 = 0,8. Les décimaux sont pratiques pour les formes bancales comme 1200×630, soit environ 1,91, d’où 1,91:1.

Si vous préférez ne pas le faire à la main, ces quelques lignes de JavaScript font la même chose dans la console d’un navigateur.

```js
const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

function aspectRatio(width, height) {
  const d = gcd(width, height);
  return `${width / d}:${height / d}`;
}

// Height for a new width, keeping the same shape
const heightFor = (newWidth, w, h) => Math.round((newWidth * h) / w);

aspectRatio(1920, 1080); // "16:9"
aspectRatio(1080, 1350); // "4:5"
heightFor(1280, 16, 9);  // 720
```

L’algorithme d’Euclide pour le diviseur, puis une simple mise à l’échelle. Collez-le dans n’importe quelle console de navigateur.

## Convertir les tailles sans changer la forme

Pour mettre une image à l’échelle en gardant son ratio, une seule formule : **nouvelle hauteur = nouvelle largeur × hauteur du ratio ÷ largeur du ratio**. Pour un cadre 16:9 large de 1280 pixels, cela donne 1280 × 9 ÷ 16 = 720. Pour un cadre 4:5 large de 1600 pixels, 1600 × 5 ÷ 4 = 2000.

Dans l’autre sens, c’est tout aussi simple : nouvelle largeur = nouvelle hauteur × largeur du ratio ÷ hauteur du ratio. Une vidéo 9:16 qui doit faire 1280 de haut fait 1280 × 9 ÷ 16 = 720 de large. Si le résultat a une décimale, arrondissez au pixel entier le plus proche ; la différence est invisible.

## Ce qui se passe quand vous changez le ratio

La mise à l’échelle garde la forme. Changer le ratio, non, et il n’existe que trois options honnêtes : rogner une partie de l’image, ajouter de l’espace autour, ou réorganiser le design pour la nouvelle forme. La quatrième option, l’étirement, déforme chaque lettre et chaque cercle, et cela se voit tout de suite.

### Recadrer ou étirer

- Rapide, mais le titre est souvent coupé
- L’étirement écrase le texte
- Les logos atterrissent au mauvais endroit
- Les fonds perdent leur point lumineux
- Chaque format paraît un peu faux

### Recomposer

- Les mots se réorganisent selon la forme
- Le texte garde ses vraies proportions
- Le logo va où chaque format l’attend
- Le fond est recréé pour le cadre
- Chaque format semble pensé pour sa place

Un post portrait 4:5 pour un atelier de poterie annonçant l’ouverture des cours de printemps

Le design en 4:5 pour le feed : mots empilés, de l’air au-dessus et en dessous.

La même annonce de l’atelier de poterie composée dans un cadre 16:9 écran large

Le même design en 16:9 pour un héros de site web : les mots s’étalent, le fond est redessiné pour le cadre.

C’est ce que fait le redimensionnement dans Gradiently avec Pro : choisissez les tailles voulues et chaque copie est recomposée pour sa forme, tandis que le Mark derrière est recréé à chaque ratio au lieu d’être recadré dans une seule image. [Un seul look, toutes les tailles](https://gradiently.design/fr/guide/one-look-every-size) en fait la visite.

## Quel ratio choisir pour un post

Quand une plateforme accepte plusieurs formes, choisissez celle qui occupe le plus de place sur un écran de téléphone. Sur Instagram, c’est le 4:5, plus haut qu’un carré et qui résiste le mieux au recadrage de la grille de profil ; [la taille d’un post Instagram](https://gradiently.design/fr/guide/instagram-post-size) explique pourquoi. Sur Pinterest, l’épingle 2:3 est la norme ; des épingles plus longues existent mais peuvent être coupées dans le feed, comme l’explique [la taille d’une épingle Pinterest](https://gradiently.design/fr/guide/pinterest-pin-size).

Pour tout ce qui se regarde sur une télévision ou un ordinateur portable, le 16:9 est le choix sûr, c’est pourquoi [les miniatures YouTube](https://gradiently.design/fr/guide/youtube-thumbnail-size) et les slides l’utilisent. Pour tout ce qui se regarde en plein écran sur un téléphone, le 9:16 est la seule forme qui le remplit. Dans le doute, créez d’abord les versions verticale et écran large : le carré et le portrait se placent confortablement entre les deux.

## Le ratio d’image en CSS

Sur le web, la propriété CSS `aspect-ratio` garde une boîte en forme à toute largeur, ce qui évite que les mises en page sautent pendant le chargement des images et vidéos. Elle est prise en charge par tous les navigateurs actuels ; voir [la référence aspect-ratio de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).

```css
.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%);
}

.card-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover; /* crops to fill rather than stretching */
}
```

Écrivez le ratio avec une barre oblique. Associez-le à object-fit: cover sur les images pour qu’elles se recadrent au lieu de se déformer.

Les ratios comptent aussi pour l’impression et la vidéo, avec leurs propres conventions. Pour les formats vidéo, voir [les tailles de vidéo sociale](https://gradiently.design/fr/guide/social-video-sizes), et pour le lien entre nombre de pixels et taille physique, [DPI et PPI](https://gradiently.design/fr/guide/dpi-vs-ppi).

## FAQ

### Qu’est-ce qu’un ratio d’image ?

C’est la forme d’une image, exprimée par sa largeur comparée à sa hauteur, comme 16:9 ou 4:5. Les images de même ratio se mettent à l’échelle l’une de l’autre sans recadrage.

### Comment calculer un ratio d’image ?

Divisez la largeur et la hauteur par leur plus grand diviseur commun. Pour 1920×1080, le diviseur est 120, ce qui donne 16:9.

### Quel est le ratio de 1080×1350 ?

4:5, la forme portrait utilisée pour les posts portrait d’Instagram, Threads, Facebook et X.

### Quelle différence entre 16:9 et 9:16 ?

C’est la même forme couchée sur le côté. Le 16:9 est un paysage, utilisé pour YouTube et les slides ; le 9:16 est vertical, utilisé pour Stories, Reels et TikTok.

### Comment changer un ratio sans étirer ?

Recadrez l’image, ajoutez de l’espace autour, ou recomposez le design pour la nouvelle forme. Réorganiser donne le meilleur résultat pour les designs avec du texte.