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 - dimensionnement des images pour un plugin' ; s écrans d'administration, exportation de la vidéo au format Reels, travailler sur ce que devrait être réellement une image OpenGraph Donc 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 à partir 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 hauteur/largeur est la relation proportionnelle entre une image' ; s largeur et sa hauteur Il s'écrit comme deux nombres séparés par deux points - 16 :9, 4 :3, 1 :1 - et ce qu'il décrit est forme, pas de taille.
Cette distinction est tout le jeu. 1280.720, 1920.1080, et 3840.1160 sont trois résolutions différentes avec un rapport hauteur/largeur Ils ont la même forme à trois tailles, c'est pourquoi l'un d'entre eux évolue dans n'importe quelle autre sans distorsion ni recadrage Entre-temps 1920.1080 et 1920.1200 ont presque la même largeur, diffèrent de 120 pixels de hauteur et sont des formes fondamentalement différentes - l'un est 16 :9, l'autre est 16 :10, et mettre le contenu conçu pour une boîte à recadrer ou un autre moyen construit pour un autre.
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 en pratique : " ; J'ai besoin d'une image 16 :9 et mon conteneur fait 1280 pixels de large - quelle hauteur ?" ;
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 souhaitez connaître sa forme - généralement pour vérifier que deux actifs correspondent ou pour déterminer ce qu'est réellement un client et n°39 ; l'exportation de dimension mystère.
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 favorable au marketing Un moniteur ultra-large de 3440.1440 réduit à 43 :18. un 2560. 1080 un réduit à 64 :27. Les deux sont vendus comme " ;21 :9" ; et aucun des deux n'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 sonne bien rangé à côté de 16 :9. La calculatrice vous donne le vrai rapport de spécification réduit et la réalité peut donc partir de la réalité.
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 préserve le rapport - une échelle de 50 % de 1920.1080 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 4000.3000 est de 12 MP, et doubler ses dimensions quadruple cela à 48 MP, pas le double Si vous générez des jeux d'images réactifs, cette relation quadratique est la chose à garder dans votre tête Quand vous avez fini de dimensionner, 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ésultat, dessiné selon le rapport que vous venez de calculer Cela semble décoratif et ce n'est pas - le moyen le plus rapide d'attraper que vous avez tapé 9 :16 quand vous vouliez dire 16 :9 est de regarder une grande boîte quand vous vous 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 de 1200.630 OpenGraph se réduit à 40 :21, une décimale de 1.905 - suffisamment proche de 1.91 :1 pour que tout le monde l'appelle ainsi, et c'est la taille que Facebook, LinkedIn et X rendent tous proprement 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'image, et ils sont d'accord l'un avec l'autre 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 pixels pour l'actif lui-même.
Exportation de vidéos pour une plate-forme spécifique
Vous avez tourné 16 :9 et avez besoin d'une coupe verticale de 9 :16 La hauteur reste à 1920, donc la largeur est de 1920. 9 ÷ 16 = 1080. c'est votre taille d'exportation - et la raison pour laquelle les chiffres semblent familiers est que 1080.1920 est simplement 1920.1080 avec les axes échangés, ce qui est ce que " ; vidéo verticale" ; signifie.
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 à 1440.1800 et demande pourquoi ils recadrent mal sur la page d'accueil Réduisez-le : GCD de 1440 et 1800 est 360, donnant 4 :5. vos emplacements de page d'accueil sont 16 :9. ces deux formes ne peuvent pas toutes deux être satisfaites sans recadrer - maintenant vous avez 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 rapport ne se posent 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 au lieu de 1,7778 :1, une différence d'environ un dixième de un pour cent, et invisible Ne le poursuivez pas. Notez cela en arrondissant systématiquement 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. En vidéo diffusée, ceux-ci peuvent différer : les anciennes séquences DV stockées 720.1.480 pixels mais les affichaient comme 4 :3 en rendant chaque pixel non carré Presque rien de ce que vous touchez aujourd'hui ne fait cela - tout est en pixels carrés - mais si vous travaillez avec des séquences 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èrent, 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 largeur par rapport à la hauteur La résolution est le nombre réel de pixels. 1280.1020 et 1920.1080 sont des résolutions différentes avec le même rapport d'aspect 16 :9, c'est pourquoi l'une évolue vers l'autre 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 de flux Instagram, 9 :16 pour les rouleaux, les histoires, TikTok et les courts métrages YouTube, 16 :9 pour la vidéo YouTube standard et 1,91 :1 pour ouvrir le graphique images d'aperçu des liens 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 cible à partir de votre largeur cible en utilisant le rapport d'origine au lieu de taper les deux nombres à la main - c'est exactement à cela que sert le mode de résolution pour côté manquant.
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 en pratique Les codeurs vidéo sont plus stricts : H.264 nécessite des dimensions paires, donc arrondir le côté impair vers le bas 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étrécissez le fichier une fois que la forme est correcte
- Calculateur de pourcentage- pour la moitié du travail, échelle par pourcentage
- 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.
