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

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

Les tailles exactes en pixels de chaque plateforme sont dans les tailles d’images pour les réseaux sociaux. 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. 1

   Partez de la taille

   Par exemple 1080×1350, un post Instagram en portrait.

2. 2

   Trouvez le plus grand diviseur commun

   Le plus grand nombre qui divise exactement 1080 et 1350 est 270.

3. 3

   Divisez les deux côtés

   1080 ÷ 270 = 4 et 1350 ÷ 270 = 5. Le ratio est 4:5.

4. 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.

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

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.

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 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 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.

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 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.

.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 */
}

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, et pour le lien entre nombre de pixels et taille physique, DPI et PPI.