Une fois, j'ai livré un thème WordPress où chaque image sur mobile semblait avoir été à travers un mutil. Visages tendus, logos écrasés. La cause était de trois caractères dans un fichier CSS : un height: 240px Assis à côté d'un width: 100%. Sur un téléphone de 375 pixels qui produisait un rapport d'environ 1,56:1, et les images étaient de 16:9 à 1,78:1. Pas une énorme différence sur le papier. Très évident sur un visage humain.
Le rapport d'aspect est l'une de ces choses qui semble trop simple à se tromper, donc personne ne le vérifie. C'est une seule division. Et pourtant, cela ruine tranquillement les exportations de vidéos, les aperçus OpenGraph qui sont recadrés au mauvais endroit, les vignettes avec des barres noires et les images de héros qui ont l'air bien sur votre moniteur de 27 pouces et terribles sur un téléphone. Les mathématiques sont insignifiantes, le coût d'une erreur d'arrondissement n'est pas.
je construis toolz.dev Et je fais ce calcul constamment - dimensionner des images pour les écrans d'administration d'un plugin, exporter une vidéo au format Reels, déterminer ce que devrait réellement être une image OpenGraph. Alors j'ai construit le Calculateur de rapport d'aspect Pour le faire dans un seul domaine et montrer son fonctionnement. Donnez-lui un rapport et une dimension, il vous donne l'autre. Donnez-lui une taille, il le réduit au rapport et vous indique comment ce rapport est appelé.
tl;dr : Le rapport d'aspect est la largeur divisée par la hauteur, écrite en deux nombres avec un deux-points. Pour trouver une hauteur manquante :
width × (ratioHeight ÷ ratioWidth). Pour trouver une largeur manquante :height × (ratioWidth ÷ ratioHeight). Pour obtenir le rapport d'une taille, divisez les deux nombres par leur plus grand diviseur commun - 1920 et 1080 partagent un GCD de 120, ce qui donne 16:9. le Calculateur de rapport d'aspect Les trois sont-ils dans votre navigateur, avec des préréglages pour 16 : 9, 9 : 16, 1 : 1, 4 : 3, 3 : 2, 21 : 9, 1,91 : 1 et 2,39 : 1.
Qu'est-ce qu'un rapport d'aspect ?
Un rapport d'aspect est la relation proportionnelle entre la largeur d'une image et sa hauteur. Il est écrit en deux nombres séparés par un côlon — 16:9, 4:3, 1:1 — et ce qu'il décrit est forme, pas de taille.
Cette distinction est le jeu entier. 1 280 × 720 1 920 × 1 080 et 3 840 × 2 160 sont trois résolutions différentes avec un rapport d'aspect. Ils ont la même forme à trois tailles, c'est pourquoi l'un d'eux s'écaille en un autre sans déformation ni recadrage. Pendant ce temps, 1920 × 1080 et 1920 × 1200 ont presque la même largeur, diffèrent par 120 pixels de hauteur et sont des formes fondamentalement différentes - l'une est de 16:9, l'autre est de 16:10 et de mettre du contenu conçu pour un conteneur construit pour l'autre moyen de boxer ou de recadrer.
Le rapport est juste la largeur ÷ hauteur exprimée en fraction en termes les plus bas. 1920 ÷ 1080 = 1,777…, et la fraction 1920/1080 se réduit à 16/9. Les deux sont les mêmes faits énoncés de deux manières : la forme décimale est plus facile à comparer (est-ce que 1,78 est plus large que 1,5 ? Évidemment), et la forme du côlon est plus facile à dire.
Les trois calculs dont vous avez réellement besoin
Résolution d'une dimension manquante
Vous connaissez la forme et un côté. C'est le cas le plus courant dans la pratique : "J'ai besoin d'une image 16:9 et mon conteneur mesure 1 280 pixels de largeur - quelle taille ?"
height = width × (ratioHeight ÷ ratioWidth)
= 1280 × (9 ÷ 16)
= 720
Et dans l'autre sens :
width = height × (ratioWidth ÷ ratioHeight)
= 1080 × (16 ÷ 9)
= 1920
Dans la calculatrice, choisissez un préréglage ou tapez votre ratio, remplissez la dimension que vous connaissez, laissez l'autre vide et appuyez sur Calculer. Il remplit le champ vide et montre l'arithmétique en dessous.
Réduire une taille à son ratio
Vous avez une taille et vous voulez connaître sa forme - généralement pour vérifier que deux actifs correspondent ou pour déterminer ce qu'est réellement l'exportation d'un client dimensionné.
La méthode est le plus grand diviseur commun. Trouvez le plus grand nombre qui divise les deux dimensions uniformément et divisez-les. Pour 1920 et 1080, ce nombre est 120 : 1920 ÷ 120 = 16, 1 080 ÷ 120 = 9. Rapport 16:9.
C'est là que les réponses deviennent intéressantes, car les tailles du monde réel le font souvent non Réduire à un ratio marketing-consommable. Un moniteur ultra-large 3 440 × 1 440 réduit à 43 18 18 18 18 18 18 18 18 188 Un 2560 × 1080 on réduit à 64:27. Les deux sont vendus comme "21:9", et ni l'un ni l'autre ne l'est réellement - 21:9 serait 3360 × 1440. L'étiquette est un arrondi de la décimale (≈2,39:1 et ≈2,37:1) en quelque chose qui semble rangé à côté de 16:9. La calculatrice vous donne le vrai rapport réduit et la décimale, vous pouvez donc dimensionner à partir de la réalité plutôt qu'à partir d'une fiche technique.
Mise à l'échelle et ajustement
Deux variantes de la même idée. escalade Multiplie les deux dimensions par le même facteur, ce qui, par définition, conserve le rapport - une échelle de 50 % de 1 920 × 1 080 est de 960 × 540, toujours 16 : 9. essayage Réduit la taille de la source jusqu'à ce qu'il se trouve à l'intérieur d'une boîte de délimitation sans distorsion : prenez le plus petit de boxWidth ÷ sourceWidth et boxHeight ÷ sourceHeight et à l'échelle par cela. Une photo 4000 × 3000 incorporée dans une boîte 1200 × 1200 devient 1200 × 900. C'est exactement ce que CSS object-fit: contain Le fait, et exactement ce qu'un CDN d'image fait lorsque vous demandez un redimensionnement maximum.
Principales caractéristiques du calculateur de rapport d'aspect
Dix préréglages, étiquetés avec l'endroit où ils sont réellement utilisés
16:9 pour la vidéo standard et la plupart des écrans. 9:16 pour les bobines, les courts métrages, les tiktoks et les histoires. 1:1 pour les posts sociaux et les avatars carrés. 4:3 pour les écrans plus anciens et iPad. 3:2 pour la photographie DSLR et le film 35 mm. 2:3 pour les impressions portrait. 5:4 pour les impressions 8×10. 21:9 pour l'ultra-large. 1,91:1 Pour les images OpenGraph Link-Preview. 2.39:1 Pour un écran large anamorphique. Le survol d'un préréglage vous indique à quoi il sert, ce qui importe plus que le nombre lorsque vous essayez de vous rappeler de quel Instagram veut.
La formule sous chaque réponse
Le panneau de résultats montre l'arithmétique exacte — 1280 × (9 ÷ 16) = 720. Vous pouvez en partie le vérifier, en partie afin que vous puissiez le soulever dans une feuille de calcul ou un script. Si vous allez coder en dur une dimension dans un fichier CSS ou une configuration Tailwind, vous devriez pouvoir voir d'où vient le numéro.
Le rapport réduit, la décimale et le nom
Chaque résultat rapporte les trois représentations : le rapport entier réduit (16 : 9), sa forme décimale (1,778 : 1) et un nom commun s'il en a un. La décimale est ce que vous comparez ; le nom est ce que vous tapez dans un brief de conception.
Mégapixels et nombre total de pixels
Chaque résultat inclut le nombre de pixels en mégapixels. C'est le nombre qui prédit réellement l'utilisation de la mémoire et la taille du fichier lorsque vous redimensionnez les images - une photo de 4 000 × 3 000 est de 12 MP, et double ses dimensions quadruples de 48 MP, et non de double. Si vous générez des ensembles d'images réactifs, cette relation quadratique est la chose à garder dans votre tête. Lorsque vous avez terminé le dimensionnement, Redimensionnement d'images et Compresse d'images Faites le travail réel, dans le navigateur.
Un aperçu de la forme en direct
Un rectangle dans le panneau de résultats, tiré du rapport que vous venez de calculer. Cela semble décoratif et ce n'est pas le cas - le moyen le plus rapide d'attraper que vous avez tapé 9:16 lorsque vous vouliez dire 16:9 est de regarder une boîte haute lorsque vous en attendiez une large.
Côté client, hors ligne, pas d'inscription
Arithmétique JavaScript simple dans votre navigateur. Rien n'est envoyé n'importe où, rien n'est enregistré et la page continue de fonctionner avec le réseau désactivé.
Quel rapport d'aspect dois-je utiliser ?
| proportion | décimal | où il est utilisé | Taille de pixel typique |
|---|---|---|---|
| 16:9 | 1.778 | YouTube, Vidéo HD/4K, la plupart des moniteurs, des téléviseurs | 1920 × 1080, 3840 × 2160 |
| 9:16 | 0.563 | Reels Instagram, TikTok, Short YouTube, Stories | 1080 × 1920 |
| 1:1 | 1.0 | Posts, avatars, vignettes de produits Instagram | 1080 × 1080 |
| 4:5 | 0.8 | Poste de flux de portraits Instagram (plus grand empreinte de flux) | 1080 × 1350 |
| 1.91:1 | 1.91 | Aperçus des liens de la carte OpenGraph / Twitter | 1200 × 630 |
| 4:3 | 1.333 | iPad, moniteurs plus anciens, nombreux capteurs de caméra | 2048 × 1536 |
| 3:2 | 1.5 | DSLR et images sans miroir, film 35 mm, tirages photo | 6 000 × 4 000 |
| 21:9 (Vraiment ~2,37–2,39:1) | ~2,38 | Moniteurs ultra-larges, cultures cinématographiques | 3 440 × 1440 |
| 2.39:1 | 2.39 | Cinéma grand écran anamorphique | 4096 × 1716 |
Deux notes pratiques. La taille Opengraph 1200 × 630 est réduite à 40:21, une décimale de 1,905 - assez proche de 1,91:1 pour que tout le monde l'appelle ainsi, et c'est la taille que Facebook, LinkedIn et X sont tous rendus propres. Vérifiez le résultat avec le Ouvrir un aperçu du graphique Outil avant de l'expédier, car une image d'aperçu mal recadrée est le bogue le plus visible sur un lien que personne ne clique. Et 4:5 vaut la peine de savoir pour Instagram spécifiquement : il occupe plus d'espace vertical dans le flux que 1:1, ce qui est une attention gratuite.
Cas d'utilisation courants
Dimensionnement des images réactives sans distorsion
Vous construisez une grille de cartes et la conception demande des vignettes 16:9 à une largeur de conteneur de 384 pixels. Calculez : 384 × 9 ÷ 16 = 216. Vous avez maintenant une taille de béton pour votre CSS aspect-ratio: 16 / 9 Déclaration et votre exportation d'images, et ils sont d'accord les uns avec les autres. Le CSS moderne rend cela plus facile qu'avant - aspect-ratio Dans CSS prend le ratio directement et laisse le navigateur faire l'arithmétique, mais vous avez toujours besoin des dimensions de pixel pour l'actif lui-même.
Exportation de vidéos pour une plate-forme spécifique
Vous avez tiré 16:9 et avez besoin d'une coupe verticale de 9h16. La hauteur reste à 1920, donc la largeur est de 1920 × 9 ÷ 16 = 1080. C'est la taille de votre exportation - et la raison pour laquelle les chiffres vous semblent familiers est que 1 080 × 1 920 est simplement de 1 920 × 1 080 avec les axes échangés, ce qui signifie "vidéo verticale".
Une chose que la calculatrice ne fera pas pour vous : H.264 nécessite des dimensions uniformes. Si vos calculs arrivent sur un nombre impair, arrondissez le côté impair d'un pixel ou votre encodeur refusera le travail.
déterminer ce qu'est réellement un atout mystérieux
Un client envoie des actifs à 1 440 × 1 800 et demande pourquoi il est mal recolté sur la page d'accueil. Réduisez-le : GCD de 1 440 et 1 800 est de 360 ans, ce qui donne 4 : 5. Les créneaux de votre page d'accueil sont de 16:9. Ces deux formes ne peuvent pas être satisfaites sans avoir à couper, vous avez maintenant une réponse concrète et une décision à prendre, plutôt qu'un vague sentiment que quelque chose ne va pas.
Vérification qu'un ensemble d'actifs est cohérent
Avant un lancement, exécutez les dimensions de chaque image de héros via le mode de ratio. Si l'un des trente revient à 1,6:1 alors que les autres sont de 1,778:1, vous avez trouvé l'actif qui semblera subtilement faux sur le site en direct, et vous l'avez trouvé avant un utilisateur.
Notes techniques à connaître
arrondi. La plupart des calculs de ratio n'atterrissent pas sur des pixels entiers. 16:9 à une largeur de 1000 donne une hauteur de 562,5. La calculatrice arrondit au pixel entier le plus proche, vous obtenez donc 563 - une forme qui est de 1,7762:1 plutôt que 1,7778:1, une différence d'environ un dixième de un pour cent, et invisible. Ne le poursuivez pas. Remarquez que arrondir de manière cohérente en bas Un jeu d'images peut cumuler une dérive visible si vous empilez des éléments, à chaque fois, à partir de la dimension source plutôt qu'à partir du résultat précédent.
Rapport d'aspect pixel par rapport à l'affichage du rapport d'aspect. Dans la vidéo de diffusion, ces images peuvent différer : les anciennes séquences DV stockées 720 × 480 pixels, mais affichées en 4:3 en rendant chaque pixel non carré. Presque rien de ce que vous touchez aujourd'hui ne le fait - tout est en pixels carrés - mais si vous travaillez avec des images héritées et que les mathématiques refusent de s'additionner, c'est pourquoi.
aspect-ratio en CSS. Depuis 2021, vous pouvez écrire aspect-ratio: 16 / 9 Et laissez le navigateur tenir la forme alors qu'une dimension est fluide. Utilisez-le. Il supprime toute une classe de hacks de rembourrage en pourcentage le plus élevé qui s'imposaient auparavant, et cela signifie que votre mise en page reste correcte à des largeurs que vous n'avez jamais testées. Vous voulez toujours la calculatrice pour l'exportation d'actifs, car le fichier image doit être un nombre réel de pixels.
Le recadrage n'est pas à l'échelle. Si un rapport source et cible diffère, vous ne pouvez pas redimensionner entre eux - vous devez recadrer, boîte aux lettres ou déformer. Choisissez délibérément. object-fit: cover cultures (et c'est généralement ce que vous voulez pour les photos), contain boîtes aux lettres (généralement ce que vous voulez pour les logos), et fill Déforme (presque jamais ce que vous voulez, et la cause de mon bug de visages mutilés en haut de cet article).
FAQ
Comment calculer le rapport d'aspect à partir de la largeur et de la hauteur ?
Divisez les deux nombres par leur plus grand diviseur commun. Pour 1920 × 1080, le GCD est de 120, donc le rapport est réduit à 16:9. Changez cette calculatrice pour obtenir le mode de rapport, entrez les deux dimensions, et il fait la réduction et nomme le rapport pour vous.
Quelle hauteur ai-je besoin pour une image 16:9 à 1280 pixels de large ?
Multipliez la largeur par 9 et divisez par 16 : 1 280 × 9 ÷ 16 = 720. Ainsi, une image 16:9 de 1280 pixels de large est de 720 pixels de haut. Entrez le préréglage 16:9 et une largeur de 1280 pour le confirmer.
Quelle est la différence entre le rapport d'aspect et la résolution ?
Le rapport d'aspect est la forme - la proportion de la largeur à la hauteur. La résolution est le nombre réel de pixels. 1280 × 720 et 1920 × 1080 sont des résolutions différentes avec le même rapport d'aspect 16:9, c'est pourquoi l'un se met à l'échelle sans distorsion ni recadrage.
Quel rapport d'aspect dois-je utiliser pour les réseaux sociaux ?
Utilisez 1:1 ou 4:5 pour les publications sur le fil d'Instagram, 9:16 pour les bobines, les histoires, les courts métrages TikTok et YouTube, 16:9 pour la vidéo YouTube standard et 1,91:1 pour les images d'aperçu de lien de graphe ouvert sur Facebook, LinkedIn et X. Les préréglages de cet outil incluent tous ces éléments.
Pourquoi mon image redimensionnée semble-t-elle étirée ?
La nouvelle largeur et la nouvelle hauteur ne correspondent pas au rapport d'origine, de sorte que l'image est écrasée le long d'un axe. Calculez la hauteur de la cible à partir de votre largeur de cible en utilisant le rapport d'origine au lieu de taper les deux numéros à la main, c'est exactement à cela que sert le mode de résolution des problèmes.
Que signifie réellement 21:9 ?
C'est une étiquette marketing pour les écrans ultra-larges. Le vrai rapport d'un moniteur 3 440 × 1 440 est de 43 :18, soit environ 2,39 : 1 et un panneau de 2 560 × 1 080 est de 64 : 27. Les deux sont arrondis à "21:9" dans les listes de produits. Si vous avez besoin de dimensions exactes en pixels, calculez à partir de la résolution réelle du panneau plutôt que de l'étiquette.
Comment conserver un rapport d'aspect lorsque le résultat n'est pas un nombre entier ?
La calculatrice arrondit au pixel entier le plus proche, ce qui introduit au plus un demi-pixel de dérive - invisible dans la pratique. Les encodeurs vidéo sont plus stricts : H.264 nécessite des dimensions uniformes, donc arrondissez le côté impair d'un pixel si un codeur rejette votre taille.
Cette calculatrice fonctionne-t-elle hors ligne ?
Oui. Chaque calcul est un simple arithmétique JavaScript en cours d'exécution dans votre navigateur. Aucune dimension n'est envoyée à un serveur, rien n'est enregistré et l'outil continue de fonctionner sans connexion Internet une fois la page chargée.
Outils connexes
- Redimensionnement d'images — Appliquez les dimensions que vous venez de calculer, dans le navigateur
- Compresse d'images — Réduisez le fichier une fois que la forme est correcte
- Calculateur de pourcentage — pour la moitié de l'emploi
- Ouvrir un aperçu du graphique — Vérifiez cette image 1,91:1 avant d'expédier le lien
- Convertisseur de format — WebP et AVIF pour les actifs que vous venez de dimensionner
Lectures complémentaires : Le guide complet de la compression d'images et Outils d'image essentiels pour le Web.
