Comprendre et travailler avec le format d'image

Chaque image, chaque toile, chaque image a une forme. Et souvent cette forme est un rectangle. Encore plus commun est un rectangle d'une proportion particulière basée sur le support.

Des appareils photo à la télévision en passant par les films et les écrans d’ordinateur, chaque support a une forme presque distincte. Cela peut constituer un défi pour les concepteurs, en particulier lorsque vous devez recadrer et convertir le contenu et les informations pour les adapter à une variété de supports. En raison de toutes ces formes différentes, la compréhension des ratios d’aspect peut vous aider à déplacer facilement des images et des dessins d’un support à un autre.

Ratio d'aspect défini

Simplement, un rapport d'aspect est la relation proportionnelle entre la largeur et la hauteur d'un rectangle. Lorsque vous travaillez avec des formats d'image dans la plupart des projets de conception modernes, un format d'image a une orientation horizontale, car la plupart des écrans sont plus larges que grands. (Et nous concevons sur des écrans et souvent sur des écrans.) Mais tous les formats ne doivent pas nécessairement avoir une largeur supérieure à la hauteur.

Un rapport d'aspect est défini dans un rapport mathématique, avec deux nombres séparés par deux points.

  • largeur hauteur
  • Alors que, 4 pouces de large par 3 pouces de haut est 4: 3

Le rapport hauteur / largeur n'est cependant pas simplement une mesure de largeur et de hauteur. Il est réduit au plus petit rapport utilisable (utilisant les concepts de mathématiques de l'école primaire). Ainsi, pour un rectangle de 12 pouces de largeur sur 9 pouces de hauteur, le rapport de format est également de 4: 3 (un rapport de format commun à la photographie immobile).

Ratio d'aspect et photos

La photographie est l’un des endroits où il est le plus facile de voir et d’expliquer les proportions. Même votre caméra iPhone vous permet de sélectionner un rapport de format spécifique avant de prendre une photo, puis de modifier le rapport de format lors du rognage.

Les proportions en photographie sont souvent liées à la manière dont une photo sera utilisée. Le format de l'image est déterminé par les contraintes du support. La publication de photos sur Instagram, par exemple, n'autorise que les images au format 1: 1 (carré).

Traditionnellement, les photographies étaient généralement prises avec un rapport d'aspect de 3: 2, car les tirages étaient de 3 pouces sur 2 pouces, de 6 pouces sur 4 pouces et ainsi de suite. Traditionnellement, cette formule courante entraînait des capteurs d'appareil photo et des pratiques d'impression pour les photos maillées, ce qui le rendait extrêmement facile à prendre et à imprimer des images.

C’est un peu plus compliqué de nos jours avec plus d’options pour la manipulation numérique. Mais le concept fonctionne toujours et il existe encore une poignée de tailles les plus couramment utilisées. Hormis les photographes professionnels, les concepteurs et les artistes, peu de personnes découpent une photo en un format autre que celui utilisé pour les proportions habituelles.

Mais pourquoi couper en dehors d'un ratio commun? Pour créer un intérêt visuel spectaculaire. Considérons une image panoramique pour un moment. Il a un sens du drame et de l'excitation une? Normale? la forme n'en a pas. L'utilisation d'une forme standard implique l'harmonie et l'équilibre alors qu'une forme non standard peut être dramatique et excitante.

Ratio d'aspect et vidéo

Les proportions en vidéo ressemblent beaucoup à la photographie. La forme est tout à fait différente pour les écrans vidéo modernes, alors que les images historiquement fixes et animées étaient basées sur des ratios d'aspect similaires.

Les écrans vidéo appartiennent à deux catégories assez distinctes en termes de format d'image: les écrans de cinéma ou de cinéma et les écrans de télévision ou d'ordinateur de bureau. Les formes de ces écrans commencent à se rapprocher du même rapport d'aspect, de plus en plus d'écrans domestiques rentrant dans la catégorie des écrans larges, mais il existe toujours une différence importante entre eux, raison pour laquelle le format Letterboxing est couramment utilisé.

  • Les écrans de cinéma sont souvent de 1,85: 1 ou 1,43: 1 (IMAX)
  • Les écrans de télévision sont souvent au format 4: 3 ou 1,33: 1 (ancien format) ou à la proportion la plus récente d'écran large 16: 9 ou 1,77: 1.

Sur le Web, la conception de vidéos pour la taille d’écran varie beaucoup, mais le format 16: 9 est fréquemment utilisé. Une autre option courante pour les concepteurs Web, à moins d'utiliser une vidéo en plein écran, consiste à utiliser le format 16: 9 par défaut, car il s'agit du standard utilisé par la plupart des lecteurs et des applications Web, y compris YouTube.

L'utilisation d'un format d'image commun facilite le déplacement d'un élément d'un endroit à l'autre et entre les projets. Une vidéo recadrée au format 16: 9, par exemple, sera lue de manière transparente sur un écran de télévision, un écran d’ordinateur (ordinateur de bureau ou mobile) et un lecteur vidéo en ligne. Cela vous fait gagner du temps, car vous n'avez pas besoin de rééditer ou de rogner la vidéo pour différents formats ou appareils, ni de vous inquiéter des parties de la zone d'image qui ne seront pas vues en raison des différences de taille d'écran.

Rapport d'aspect et conception sensible

Les ratios d'aspect entrent également en ligne de compte lorsque l'on réfléchit à la conception réactive de sites Web. Cela est particulièrement vrai si vous souhaitez que les images et les vidéos conservent une forme spécifique sur plusieurs périphériques.

Le fait de conserver un rapport hauteur / largeur spécifique pour les images dans le fichier CSS garantit que la signification de votre contenu ne change pas en raison du rognage d'une image. (Imaginez à quel point une photo est différente si deux personnes sont entourées l'une de l'autre et que la version recadrée ne contient qu'une seule personne et une partie des bras de l'autre. Les photos ont des significations très différentes.)

Lorsque vous travaillez sur des sites Web réactifs, vous avez quelques décisions à prendre concernant les images, les proportions et la façon dont vous voulez que les choses apparaissent sur différents écrans. Les concepteurs peuvent redimensionner chaque image à la main pour différents appareils ou utiliser un peu de code pour faire l'affaire. Craig Buckler propose un excellent didacticiel sur la procédure à suivre pour savoir comment gérer les formats d'image dans une conception Web réactive.

C'est une mathématique supplémentaire qui peut également jouer. Vous aurez probablement besoin de penser aux ratios d'aspect en termes de pourcentages. Voici quelques conversions courantes:

  • 4:3 = 75%
  • 3:2 = 66.66%
  • 16:9 = 56.25%
  • 8:5 = 62.5%

Rendre la vie facile

Alors, pourquoi tout cela est-il important? Pourquoi ne pouvons-nous pas simplement rogner les images comme bon nous semble et avancer dans nos vies? Vous pouvez le faire, mais la compréhension des ratios d'aspect vous facilitera la vie.

Pensez au nombre de projets qui incluent plusieurs conceptions sur plusieurs toiles: conception de cartes de visite, cartes postales, sites Web, affiches, publicités vidéo. Si vous travaillez dans un format d'image commun ou si vous concevez des éléments à l'aide de cette échelle, il est facile de mélanger et assortir des pièces et vous n'avez pas à réinventer le design pour chaque nouvel élément.

Pensez au temps que vous pouvez économiser.

Un autre gain de temps? Essayez cette calculatrice de format d'image. C'est particulièrement utile si vous ne vous sentez pas bien de faire des calculs vous-même.

Ratio d'aspect commun

Bien que les normes de format d'image aient tendance à évoluer avec le temps - il suffit de regarder la forme radicalement différente des écrans de télévision des années 1950 et d'aujourd'hui - vous pouvez planifier certaines des formes et tailles les plus courantes.

  • 4: 3 (1,33: 1) - Ancien format d'écran de télévision et d'ordinateur (1024? 768 pixels)
  • 3: 2 (1.5: 1) - Format d'impression de photo courant, également utilisé pour les cartes postales, les cartes de visite et les mailings standard
  • 1: 1 - Standard d'image carrée (courant dans les médias sociaux et la conception de sites Web)
  • 16: 9 (1,77: 1) - norme vidéo HD, la norme d'écran d'ordinateur se rapproche mais est imprécise (1366? 768 pixels)
  • 5: 3 (1.66: 1) - norme européenne grand écran
  • 1.618: 1 - Ratio d'or

Conclusion

Comprendre les ratios d'aspect peut vous faire économiser du temps et des retouches en tant que concepteur. Considérez toutes les applications courantes de savoir qu'une pièce ou un travail ou un projet a la même proportion que quelque chose d'autre. Cela peut également vous aider à comprendre où rogner et quelles parties d'une image ou d'un projet devront être abandonnées ou coupées en fonction du support.

Bien que cela puisse sembler beaucoup de calculs et de calculs au début, de nombreux projets sur lesquels vous travaillez sont susceptibles d'utiliser des ratios d'aspect courants. Utilisez la liste de contrôle ci-dessus pour voir quelles pièces et quels dessins complets vous pouvez mélanger et assortir.