Tailles d'images sociales, et le seul cadrage qui survit partout

Les plateformes recadrent, elles n'ajoutent pas de bandes

Un lecteur vidéo qui reçoit la mauvaise forme ajoute des bandes noires autour. Un fil social ne le fait pas, car des bandes ont l'air cassées dans une colonne qui défile et gaspillent la ressource la plus rare de l'écran. Il remplit l'emplacement à la place, ce qui signifie qu'une partie de ton image n'est pas montrée. L'endroit de la coupe dépend de la plateforme : certaines recadrent au centre, d'autres tirent vers le haut en supposant que les visages y sont, d'autres utilisent un modèle de saillance. Tu ne contrôles pas laquelle, et tu ne devrais concevoir contre aucune en particulier.

C'est l'argument en faveur d'une zone sûre. Si ton sujet — un visage, un titre, un logo, un prix — se trouve dans la région qui survit à tous les recadrages que l'image rencontrera, le choix de la plateforme cesse d'importer. Reste à savoir quelle est la taille de cette région, et il se trouve qu'elle a une réponse assez nette pour être retenue par cœur.

L'aire sûre vaut le ratio le plus étroit divisé par le plus large

Écris le ratio de la source comme largeur sur hauteur, appelle-le r. Un emplacement cible de ratio t le recadre. Si t est plus large que r, le recadrage garde toute la largeur et prend une bande horizontale de la hauteur ; la fraction verticale qui survit vaut r divisé par t. Si t est plus étroit que r, le recadrage garde toute la hauteur et prend une bande verticale de la largeur ; la fraction horizontale qui survit vaut t divisé par r. Sur tout un ensemble de cibles, seuls les extrêmes contraignent : horizontalement tu es limité par la cible la plus étroite, verticalement par la plus large.

La fraction de largeur qui survit vaut donc la cible la plus étroite divisée par r, et la fraction de hauteur qui survit vaut r divisé par la cible la plus large — chacune plafonnée à un, un recadrage ne pouvant pas montrer plus que l'image entière. Multiplie-les pour l'aire et le r s'annule exactement : l'aire sûre vaut le ratio cible le plus étroit divisé par le plus large, et elle ne dépend pas du tout de la forme de la source, pourvu que celle-ci se situe entre les deux extrêmes. Voilà le résultat à retenir, et il n'est publié nulle part.

Mets-y des nombres. Un ensemble réaliste, pour une marque qui publie en format vidéo vertical, en fil portrait, en carré, en vidéo paysage et en aperçu de lien, va de 9:16 côté étroit à 1,91:1 côté large. Cela fait 0,5625 divisé par 1,91, soit 29,45 %. Moins de trois pixels sur dix de ce que tu as conçu sont garantis d'être vus. Retire le format vidéo vertical et la plage devient 4:5 à 1,91:1, soit 41,88 %. Ne conçois que pour le carré et les aperçus de lien et tu obtiens 52,36 %. Dans l'autre sens, prends une source cinéma en 2,35:1, plus large que toutes les cibles, et tu tombes à 23,94 % ; une bannière en 3:1 tombe à 18,75 %.

Le même résultat en pixels

Sur un carré de 1080 pixels de côté, la boîte sûre pour toute la plage 9:16 à 1,91:1 mesure 608 sur 565 pixels — 29,45 % de l'aire, exactement comme le dit la formule. Sur un portrait 4:5 de 1080 sur 1350, elle mesure 759 sur 565. Sur un aperçu de lien de 1200 sur 628, elle mesure 353 sur 628. Sur un vertical de 1080 sur 1920, elle mesure 1080 sur 565. Quatre toiles différentes, quatre boîtes différentes, et les mêmes 29,45 % à chaque fois.

Le 565 récurrent n'est pas une coïncidence. La hauteur sûre vaut la largeur de la toile divisée par le ratio cible le plus large, et 1080 divisé par 1,91 fait 565,4. Tout ce que tu veux voir survivre à un recadrage en 1,91:1 doit tenir dans une bande horizontale de 565 pixels de haut, quoi que tu fasses par ailleurs. De même, la largeur sûre vaut la hauteur de la toile multipliée par le ratio cible le plus étroit, ce qui explique que la toile verticale ne perde rien horizontalement.

Un corollaire élégant : le ratio de la boîte sûre elle-même vaut la cible la plus étroite multipliée par la plus large, divisé par le ratio source. Pose-le égal à un et tu obtiens une zone sûre carrée exactement quand la source se trouve à la moyenne géométrique des deux extrêmes — la racine de 0,5625 fois 1,91, soit 1,0365 pour 1, essentiellement un carré. Donc si tu veux la plus grande zone sûre carrée sur la plus large gamme d'emplacements, conçois sur une toile très légèrement plus large que haute.

Dimension d'upload, dimension d'affichage, et le multiplicateur retina

Trois nombres différents s'appellent « la taille ». La dimension d'upload est ce que tu envoies. La dimension d'affichage est la largeur de l'emplacement en pixels CSS sur l'écran du lecteur. Le rapport de pixels de l'appareil multiplie la seconde pour donner le nombre de pixels réels dont l'écran dispose. Un emplacement de 360 pixels CSS de large réclame 720 pixels d'appareil sur un écran à deux fois et 1 080 sur un écran à trois fois — c'est précisément pourquoi 1080 revient sans cesse dans les recommandations, et pourquoi envoyer moins produit quelque chose de visiblement mou sur un téléphone moderne.

Les dimensions publiées qui existent méritent d'être connues et datées. La documentation de partage de Meta recommande des images d'au moins 1200 sur 630 pixels pour les appareils haute résolution, donne 200 sur 200 comme dimension minimale autorisée, demande de rester aussi proche que possible d'un ratio 1,91:1 pour que l'image ne soit pas recadrée dans le fil, et plafonne le fichier à 8 Mo. L'aide d'Instagram documente qu'une photo de 320 à 1080 pixels de large conserve sa résolution d'origine à condition que le ratio se situe entre 1,91:1 et 4:5. Les deux sont à jour au moment de l'écriture et les deux changeront ; les ratios qu'elles contiennent sont la partie durable.

La compression, et ce qu'elle fait au texte dans une image

Chaque plateforme réencode ce que tu téléverses, à un réglage de qualité qu'elle ne publie pas et qu'elle change sans prévenir. La compression avec perte est la plus dure précisément sur le contenu que les marketeurs mettent dans les images : des arêtes nettes entre deux aplats, c'est-à-dire du texte. Une photographie perd un détail que tu ne regardais pas ; une légende gagne un halo que tu vois.

L'étape de redimensionnement aggrave le tout, et cette partie relève de l'arithmétique et non de l'intuition. Dessine une légende de 48 pixels sur une toile de 1080 de large et elle arrive à 48 pixels. Dessine la même légende de 48 pixels sur une toile de 1440 et, après réduction à 1080, elle arrive à 36. Sur une toile de 2160, elle arrive à 24 — la moitié de la taille dessinée, et la taille à laquelle une graisse fine cesse d'être lisible sur un téléphone tenu à bout de bras. Travailler plus grand par sécurité est exactement le contraire de sûr si la plateforme normalise la largeur.

L'aperçu de lien est encore un autre ratio

Le protocole Open Graph lui-même définit les propriétés — og:image, og:image:width, og:image:height, og:image:type, og:image:alt — et ne spécifie aucune dimension en pixels. La forme 1,91:1 qu'utilisent aujourd'hui tous les générateurs d'aperçus vient des recommandations de partage de Facebook, qui conseillent de rester aussi proche que possible de ce ratio et d'utiliser au moins 1200 sur 630 pixels. Tout le reste en a hérité parce que s'aligner sur la plateforme dominante était plus facile que de négocier.

Pour le calcul de l'aire sûre, l'aperçu de lien compte plus que sa part de trafic ne le suggère, car à 1,91:1 il est le ratio le plus large de la plupart des ensembles, et c'est le ratio le plus large qui fixe la hauteur de la boîte sûre. Retire-le et tout le calcul s'améliore : un ensemble allant de 4:5 à 16:9 a une aire sûre de 45,00 % au lieu de 41,88 %, uniquement parce que 16:9 est plus étroit que 1,91:1. Si ton image d'aperçu est produite séparément de ton image sociale — ce qu'elle devrait être, l'une étant une carte et l'autre un post — tu peux retirer 1,91:1 de l'ensemble que l'image sociale doit survivre, et cette seule décision vaut plus que tous les recadrages soigneux du monde.

Questions fréquentes

Quel pourcentage de mon image est garanti visible ?

Le ratio le plus étroit auquel elle sera montrée, divisé par le plus large. C'est toute la réponse, et elle est indépendante de la forme sur laquelle tu as travaillé tant que cette forme tombe entre les deux. D'un emplacement vertical 9:16 jusqu'à un aperçu de lien 1,91:1, cela fait 29,45 %. De 4:5 à 1,91:1, 41,88 %. Du carré à 1,91:1, 52,36 %. De 4:5 à 16:9, 45,00 %. Conçois hors de la plage et cela empire au lieu de s'améliorer : une source cinéma 2,35:1 tombe à 23,94 % et une bannière 3:1 à 18,75 %.

Sur quelle toile concevoir si je ne veux faire qu'une seule image ?

Toute forme comprise entre l'emplacement le plus étroit et le plus large donne la même aire sûre : le choix porte sur la direction dans laquelle tu veux que la marge perdue s'étende, pas sur ce que tu conserves. Si tu veux que la zone sûre soit elle-même carrée, conçois à la moyenne géométrique de tes extrêmes : pour une plage 9:16 à 1,91:1, cela fait 1,0365 pour 1, c'est-à-dire une toile carrée, qui donne une boîte sûre de 608 sur 565 dans 1080 sur 1080. Si la plupart de tes emplacements sont en portrait, une toile 4:5 de 1080 sur 1350 donne une boîte sûre plus large, 759 sur 565, aux mêmes 29,45 %. Ne sors simplement pas de la plage : plus large que ton emplacement le plus large ou plus étroit que le plus étroit, et tu perds de l'aire pour rien.

Pourquoi les dimensions en pixels publiées changent-elles sans cesse ?

Parce qu'elles découlent d'une décision produit, pas d'une norme. Une plateforme élargit sa colonne de fil, ajoute un format, change sa gestion d'un recadrage plus haut, ou vise une nouvelle densité d'écran, et toutes les tailles recommandées en aval bougent. C'est pourquoi un article qui code en dur les chiffres de l'année est périmé en un an, et pourquoi celui-ci est bâti sur des ratios. Les dimensions qui méritent d'être connues sont celles qu'une plateforme documente et date elle-même : Meta demande actuellement au moins 1200 sur 630 avec un minimum de 200 sur 200, un plafond de 8 Mo et une forme aussi proche que possible de 1,91:1, et Instagram conserve actuellement la résolution d'origine pour des largeurs de 320 à 1080 quand le ratio se situe entre 1,91:1 et 4:5. Vérifie les deux avant d'utiliser l'une ou l'autre.

Dois-je téléverser une image plus grande que la largeur recommandée ?

Seulement jusqu'au point où la plateforme cesse de conserver ta résolution, et jamais pour du texte. Téléverser au-delà de la largeur à laquelle une plateforme normalise revient à la laisser réduire, et une réduction rétrécit le texte en proportion exacte : une légende de 48 pixels conçue sur une toile de 1440 arrive à 36 pixels après passage à 1080, et sur une toile de 2160 à 24. Conçois à la largeur que la plateforme préserve, dimensionne ton texte par rapport à cette largeur, et rappelle-toi que la largeur d'affichage en pixels CSS est encore plus petite — un emplacement de 360 points sur un écran à trois fois consomme exactement 1080 pixels d'appareil, d'où la récurrence de ce nombre.

Puis-je utiliser la même image pour un post social et un aperçu de lien ?

Tu peux, et cela te coûte de l'aire réelle. L'aperçu de lien est le ratio le plus large de la plupart des ensembles, à 1,91:1, et c'est le ratio le plus large qui plafonne la hauteur de ta boîte sûre — 1080 divisé par 1,91 fait 565 pixels, d'où ce nombre récurrent. Retire l'aperçu de lien et un ensemble allant de 4:5 à 16:9 a une aire sûre de 45,00 % au lieu de 41,88 % ; retire aussi le format vidéo vertical et du carré au 1,91:1 donne 52,36 %. Comme une carte d'aperçu et un post de fil n'ont de toute façon pas le même rôle, les produire séparément est généralement la meilleure réponse, et cela améliore la géométrie gratuitement.