# Calculateur de ratio d'aspect image et vidéo : Architecture technique et guide approfondi

L'ingénierie d'affichage, la cinématographie numérique, l'infographie et le web responsive reposent sur des proportions géométriques rigoureuses. Qu'il s'agisse d'étalonner un master cinéma (DCI), d'encoder des flux adaptatifs (HLS/DASH), d'éliminer le décalage d'agencement cumulatif (CLS) ou de régler des moniteurs ultra-larges (ultrawide), calculer les ratios d'aspect est indispensable.

Le ratio d'aspect définit le rapport entre largeur et hauteur d'une matrice de pixels ou d'un écran. Cependant, convertir des dimensions réelles (1920×1080 ou 3840×2160) en ratios simplifiés (16:9, 4:3, 21:9) sous contraintes vidéo (macroblocs en mod 2 ou mod 16) cause fréquemment des anomalies de rendu et des échecs d'encodage.

Le Calculateur de ratio d'aspect ToolsAA réunit un calculateur de ratio d'aspect interactif, un calculateur de résolution 16:9 précis, un redimensionneur pour codecs et un inspecteur hors ligne de métadonnées. Conçu selon une architecture 100 % exécutée côté client ("use client"), tous les calculs mathématiques, approximations par fractions continues et prévisualisations Canvas s'exécutent en mémoire locale dans votre navigateur. Aucun fichier média et aucune télémétrie ne quittent votre appareil, garantissant une confidentialité totale conforme au RGPD.

# Présentation générale et cas d'usage en production

Sur le plan mathématique, le ratio d'aspect exprime la relation géométrique fondamentale :

$$\text{Ratio d'aspect} = \frac{\text{Largeur } (W)}{\text{Hauteur } (H)}$$

Historiquement, le cinéma a fixé des ouvertures fixes, du $4:3$ muet au format Academy ($1,375:1$). Les pipelines actuels traitent des géométries variées sur tout type d'écran.

+-----------------------------------------------------------------------------------------+
|                  Pipeline moderne de géométrie d'affichage et de vidéo                  |
|  32:9 Super Ultrawide (5120x1440)       | 16:9 Standard Panoramique (3840x2160, 1920x1080) |
|  21:9 Cinéma Ultrawide (3440x1440)      | 16:10 Écran Portable (2560x1600, MacBook)        |
|  4:3 Standard Classique (1024x768)      | 9:16 Vidéo Verticale (1080x1920, TikTok/Reels)   |
+-----------------------------------------------------------------------------------------+

# Cas d'usage majeurs en ingénierie logicielle

• Responsive Web Design (Prévention du CLS) : Sous W3C CSS Box Sizing 4, la propriété aspect-ratio: 16 / 9 réserve l'espace de mise en page avant le téléchargement des images, éliminant le Cumulative Layout Shift (CLS).
• Streaming adaptatif (HLS / DASH) : Les grilles d'encodage imposent à chaque palier (de 1080p à 360p) de préserver la géométrie en respectant les macroblocs (mod 2 ou mod 16).
• Réseaux sociaux multi-plateformes : Adaptation de masters 4K UHD (3840×2160, $16:9$) en formats verticaux (1080×1920, $9:16$) ou carrés (1080×1080, $1:1$) sans distorsion.
• Affichage d'écran et jeux vidéo : Le réglage du ratio d'aspect d'écran synchronise champ de vision (FOV) et résolutions personnalisées sur dalles physiques ($16:9$, $21:9$, $32:9$).
• Cinématographie anamorphique : Désanamorphose optique (de-squeeze) pour convertir le format capteur (SAR) en format d'affichage (DAR).

# Traitement 100 % client pour une confidentialité souveraine

Les convertisseurs en ligne classiques téléversent les fichiers vers des serveurs tiers. ToolsAA s'exécute intégralement dans le navigateur via les API Web standard, assurant une étanchéité absolue des données sans transfert réseau.

# Architecture technique et fonctionnement interne

Calculer, simplifier et redimensionner des médias repose sur l'arithmétique euclidienne, les fractions continues et les contraintes des codecs vidéo.

# 1. PGCD et algorithme d'Euclide

Pour réduire $(W, H)$ en ratio canonique $(w:h)$, les dimensions sont divisées par leur PGCD en temps logarithmique $O(\log(\min(W, H)))$ :

$$\gcd(a, b) = \begin{cases} a & \text{si } b = 0 \\ \gcd(b, a \bmod b) & \text{si } b > 0 \end{cases}$$

Pour le Full HD ($1920 \times 1080$), modulo donne $\gcd(1920, 1080) = 120$. En divisant par 120, on obtient $16$ et $9$, confirmant le ratio canonique 16:9.

# 2. Approximations rationnelles et fractions continues

Les formats cinéma comme le CinemaScope ($2,39:1$) sont décimaux. Le label commercial « 21:9 » n'est pas $21/9 \approx 2,333$ ; il désigne $64:27$ ($2,37037$) ou $43:18$ ($2,3888$). ToolsAA utilise les fractions continues pour convertir les réels en réduites $pk / qk$ :

$$x = a0 + \cfrac{1}{a1 + \cfrac{1}{a_2 + \dots}}$$

Sous tolérance $\epsilon \le 10^{-5}$, la valeur $2,3704$ correspond fidèlement à la fraction matérielle $64:27$.

# 3. Macroblocs vidéo et contraintes de divisibilité

En encodage vidéo, des dimensions arbitraires provoquent des erreurs critiques :

• Chroma YUV 4:2:0 et Mod-2 : Les plans ($U, V$) ont une résolution divisée par deux. Les dimensions doivent être paires ($\text{mod } 2$).
• Macroblocs H.264 et Mod-16 : Les profils AVC découpent les trames en blocs de $16 \times 16$. Si la hauteur n'est pas divisible par 16, les encodeurs ajoutent un rembourrage à 1088 lignes.
• HEVC / AV1 et Mod-8 : Ces codecs regroupent les pixels en blocs de $64 \times 64$, exigeant un alignement en $\text{mod } 8$.

# 4. DAR, SAR et PAR : Transformation anamorphique

L'ingénierie vidéo distingue trois ratios : $$\text{DAR} = \text{SAR} \times \text{PAR} = \left(\frac{W{\text{stockage}}}{H{\text{stockage}}}\right) \times \left(\frac{\text{PAR}x}{\text{PAR}y}\right)$$ Pour du métrage anamorphique, appliquez le facteur optique ($1,33\times$, $1,5\times$, $2,0\times$) pour éviter tout étirement horizontal.

# 5. API Web du navigateur pour l'analyse des métadonnées

• URL d'objets (URL.createObjectURL) : Pointeurs mémoire éphémères (blob:...) sans transfert réseau.
• Éléments multimédias HTML5 : Capture des dimensions via loadedmetadata d'Image et HTMLVideoElement.
• HTML5 Canvas : Rendu des prévisualisations avec bandes noires (letterbox / pillarbox) sans reflow DOM.
• Gestion mémoire : Révocation immédiate des URL d'objets via URL.revokeObjectURL().

# Guide d'utilisation pratique étape par étape

# Étape 1 : Saisir les dimensions ou choisir un format

Dans l'onglet Calculateur, entrez largeur et hauteur (ex. 1920 et 1080), ou choisissez un format : 16:9 (HD), 9:16 (TikTok), 21:9 (Ultrawide), 4:3 (Rétro), 16:10 (MacBook), 1:1 (Carré) ou 2.39:1 (Scope).

# Étape 2 : Verrouiller une dimension et calculer la cible

1. Activez le verrouillage de largeur ou de hauteur.
2. Entrez votre dimension cible (ex. largeur à 1280).
3. Le moteur calcule la dimension proportionnelle ($1280 \times 720$), les mégapixels ($0,92\text{ MP}$) et le ratio décimal ($1,7778$).

# Étape 3 : Configurer le mode d'arrondi selon le codec

Sélectionnez le mode d'arrondi requis :

• Arrondi pair (mod 2) : Obligatoire pour la vidéo en $YUV 4:2:0$.
• Mod-4 / Mod-8 : Recommandé pour l'encodage mobile.
• Mod-16 : Requis pour les profils H.264 classiques.

# Étape 4 : Inspecter des fichiers locaux en toute sécurité

Dans l'onglet Inspecteur de fichiers, déposez une image ou vidéo. Le navigateur extrait les dimensions via un Blob local, calcule le ratio irréductible et affiche un aperçu sans transfert réseau.

# Étape 5 : Exporter le code et les règles CSS responsives

Le panneau Exporter propose :

• CSS : aspect-ratio: 16 / 9; width: 100%; object-fit: cover;
• Tailwind : aspect-video ou aspect-[16/9]
• FFmpeg : -vf "scale=1920:1080:forceoriginalaspect_ratio=decrease,pad=1920:1080:(ow-iw)/2:(oh-ih)/2"

# Implémentations de code prêtes pour la production

Ces implémentations autonomes réalisent la réduction par PGCD et la mise à l'échelle selon les codecs sans dépendance externe.

# Implémentation moderne en TypeScript / JavaScript

export type CodecMode = "none" | "even" | "mod16";

export function calcGCD(a: number, b: number): number {
  let [x, y] = [Math.abs(Math.round(a)), Math.abs(Math.round(b))];
  while (y) [x, y] = [y, x % y];
  return x || 1;
}

export function calcAspectRatio(w: number, h: number) {
  const d = calcGCD(w, h);
  return { ratio: `${w / d}:${h / d}`, decimal: Number((w / h).toFixed(4)), gcd: d };
}

export function scaleDimension(
  targetW: number | null, targetH: number | null,
  rw: number, rh: number, mode: CodecMode = "even"
) {
  const align = (v: number) => {
    const r = Math.round(v);
    if (mode === "even") return r % 2 === 0 ? r : r + 1;
    if (mode === "mod16") return Math.round(r / 16) * 16;
    return r;
  };
  const w = targetW !== null ? align(targetW) : align((targetH! * rw) / rh);
  const h = targetH !== null ? align(targetH) : align((w * rh) / rw);
  return { width: w, height: h, pixels: w * h };
}

# Implémentation moderne en Python 3.10+

import math
from typing import Literal, Optional

CodecMode = Literal["none", "even", "mod16"]

def calc_aspect_ratio(w: int, h: int) -> tuple[str, float, int]:
    d = math.gcd(w, h)
    return f"{w // d}:{h // d}", round(w / h, 4), d

def scale_dimension(
    target_w: Optional[int], target_h: Optional[int],
    rw: int, rh: int, mode: CodecMode = "even"
) -> tuple[int, int, str]:
    def align(v: float) -> int:
        r = round(v)
        if mode == "even": return r if r % 2 == 0 else r + 1
        if mode == "mod16": return round(r / 16) * 16
        return r
    w = align(float(target_w)) if target_w else align((float(target_h) * rw) / rh)
    h = align(float(target_h)) if target_h else align((float(w) * rh) / rw)
    return w, h, f"scale={w}:{h}:flags=lanczos"

# Pièges courants, cas limites et guide de dépannage

# 1. Plantage FFmpeg : « Width / Height not divisible by 2 »

• Symptôme : -vf "scale=720:-1" échoue avec l'erreur height not divisible by 2.
• Cause : Le format $YUV 4:2:0$ exige des dimensions paires.
• Correction : Utilisez -2 au lieu de -1 (scale=720:-2) pour forcer une hauteur paire ($406$).

# 2. Rendu sous-pixel et liseré de 1px en CSS

• Symptôme : Une ligne de 1px scintille le long d'un élément avec aspect-ratio: 16 / 9.
• Cause : Les coordonnées fractionnaires créent des approximations lors du rendu.
• Correction : Ajoutez transform: translateZ(0) ou backface-visibility: hidden pour forcer l'alignement GPU.

# 3. Confusion entre format commercial « 21:9 » et ratios réels

• Symptôme : Rendre en $21/9$ affiche des bandes noires sur écran ultrawide.
• Cause : Les dalles adoptent $64:27$ ($2560\times1080$) ou $43:18$ ($3440\times1440$), distincts de $21/9$ ($2,333$).
• Correction : Ciblez directement les fractions réelles ($64:27$ ou $43:18$) dans vos calculs.

# 4. Décalage d'agencement cumulatif (CLS) sans dimensions

• Symptôme : Les blocs de texte sautent brutalement au chargement des images.
• Cause : Le navigateur ignore les dimensions avant de recevoir l'image.
• Correction : Déclarez les attributs HTML width et height en plus de la règle CSS aspect-ratio: 16 / 9.

# 5. Distorsion anamorphique : Confusion entre SAR et DAR

• Symptôme : Une vidéo anamorphique apparaît tassée horizontalement au montage.
• Cause : La compression optique du capteur exige une désanamorphose ($\text{DAR} = \text{SAR} \times \text{PAR}$).
• Correction : Définissez le multiplicateur d'étirement optique ($1,33\times$, $1,5\times$, $2,0\times$) dans votre logiciel.

# Foire aux questions technique (FAQ)

# Q1 : Comment calculer le ratio d'aspect d'une résolution personnalisée ?

Réponse : Divisez largeur et hauteur par leur PGCD (algorithme d'Euclide). Pour $1200 \times 800$, $\gcd(1200, 800) = 400$, soit 3:2 ($1,5$). Pour $2560 \times 1440$, $\gcd=160$, soit 16:9 ($1,7778$).

# Q2 : Pourquoi FFmpeg génère-t-il l'erreur « width not divisible by 2 » ?

Réponse : Les codecs H.264 et HEVC utilisent le sous-échantillonnage chroma $YUV 4:2:0$, exigeant des dimensions paires. Remplacez -1 par -2 (scale=720:-2) pour forcer une dimension paire.

# Q3 : Un écran ultrawide « 21:9 » est-il mathématiquement égal à 21 divisé par 9 ?

Réponse : Non. « 21:9 » est un label commercial. Les dalles exploitent $64:27$ ($2560\times1080$, $2,370:1$) ou $43:18$ ($3440\times1440$, $2,388:1$), alors que $21 / 9 \approx 2,333:1$.

# Q4 : Quelle est la différence entre DAR, SAR et PAR en vidéo ?

Réponse : Le DAR (Display Aspect Ratio) est le format à l'écran ($16:9$). Le SAR (Storage Aspect Ratio) est le ratio brut des pixels stockés ($W/H$). Le PAR (Pixel Aspect Ratio) est la géométrie du pixel unitaire ($\text{DAR} = \text{SAR} \times \text{PAR}$).

# Q5 : Comment éliminer le Cumulative Layout Shift (CLS) avec CSS aspect-ratio ?

Réponse : Déclarez aspect-ratio: 16 / 9; width: 100%; object-fit: cover; en CSS avec les attributs HTML width et height. Le navigateur alloue l'espace requis avant le téléchargement.

# Q6 : Quelles sont les résolutions standards en format 16:9 ?

Réponse : Les formats 16:9 standards incluent $720\text{p}$ ($1280\times720$), $1080\text{p}$ Full HD ($1920\times1080$), $1440\text{p}$ Quad HD ($2560\times1440$), $4\text{K}$ UHD ($3840\times2160$) et $8\text{K}$ ($7680\times4320$).

# Q7 : Le Calculateur ToolsAA transfère-t-il des images ou vidéos vers un serveur distant ?

Réponse : Non. ToolsAA fonctionne à 100 % côté client ("use client"). Calculs, lecture via Blob et aperçus Canvas s'exécutent en mémoire dans le navigateur, sans transmission réseau.

# Matrice de référence technique : Ratios d'aspect standards et résolutions

# Conclusion

L'ingénierie visuelle exige une grande rigueur lors de la manipulation des proportions d'images, des formats de cinéma et des éléments web adaptatifs. Une mauvaise gestion des dimensions ou de la divisibilité d'un codec peut engendrer des erreurs d'encodage, des artefacts sous-pixel ou des dégradations SEO via le Cumulative Layout Shift.

En associant la réduction par le PGCD euclidien et les alignements de macroblocs (mod 2, mod 8, mod 16), les ingénieurs dimensionnent leurs médias avec fiabilité. Le Calculateur de ratio d'aspect ToolsAA met à disposition un calculateur de ratio d'aspect interactif, un calculateur de résolution 16:9 précis et un inspecteur multimédia au sein d'une interface rapide.

Grâce à son architecture 100 % client ("use client"), tous les calculs s'effectuent en mémoire locale dans votre navigateur, garantissant une confidentialité absolue pour vos productions.