Proporzioni delle immagini: 1:1, 4:5, 9:16, 16:9 e altre

Un rapporto d’aspetto è la forma di un’immagine: la sua larghezza rispetto all’altezza, scritta con due numeri come 16:9. Un video 1920×1080 e una miniatura 1280×720 hanno misure diverse ma lo stesso rapporto 16:9, quindi l’uno si scala nell’altro senza tagli. La maggior parte dei problemi di design con la «misura sbagliata» sono in realtà problemi di forma sbagliata.

I rapporti d’aspetto più comuni e dove si usano

Le misure esatte in pixel per ogni piattaforma sono nelle dimensioni delle immagini per i social media. Nota quanto poche siano le forme: se sai progettare bene in 1:1, 4:5, 9:16 e 16:9, copri la maggior parte della presenza social di un brand.

Come calcolare un rapporto d’aspetto

Prendi larghezza e altezza e dividile entrambe per il numero più grande che le divide esattamente, il massimo comun divisore. Quello che resta è il rapporto nella sua forma più semplice.

1. 1

   Parti dalla misura

   Poniamo 1080×1350, un post verticale di Instagram.

2. 2

   Trova il massimo comun divisore

   Il numero più grande che divide esattamente sia 1080 sia 1350 è 270.

3. 3

   Dividi entrambi i lati

   1080 ÷ 270 = 4 e 1350 ÷ 270 = 5. Il rapporto d’aspetto è 4:5.

4. 4

   Oppure usa un decimale

   Dividi la larghezza per l’altezza: 1080 ÷ 1350 = 0,8. I decimali sono comodi per forme scomode come 1200×630, che vale circa 1,91, da cui 1,91:1.

Se preferisci non farlo a mano, queste poche righe di JavaScript fanno la stessa cosa nella console del browser.

const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

function aspectRatio(width, height) {
  const d = gcd(width, height);
  return `${width / d}:${height / d}`;
}

// Height for a new width, keeping the same shape
const heightFor = (newWidth, w, h) => Math.round((newWidth * h) / w);

aspectRatio(1920, 1080); // "16:9"
aspectRatio(1080, 1350); // "4:5"
heightFor(1280, 16, 9);  // 720

Convertire le misure senza cambiare la forma

Per scalare un’immagine mantenendo il rapporto d’aspetto basta una formula: nuova altezza = nuova larghezza × altezza del rapporto ÷ larghezza del rapporto. Per un riquadro 16:9 largo 1280 pixel fa 1280 × 9 ÷ 16 = 720. Per un riquadro 4:5 largo 1600 pixel fa 1600 × 5 ÷ 4 = 2000.

Il percorso inverso è altrettanto semplice: nuova larghezza = nuova altezza × larghezza del rapporto ÷ altezza del rapporto. Un video 9:16 che deve essere alto 1280 è largo 1280 × 9 ÷ 16 = 720. Se il risultato ha un decimale, arrotonda al pixel intero più vicino; la differenza è invisibile.

Cosa succede quando cambi il rapporto d’aspetto

Scalare mantiene la forma. Cambiare il rapporto no, e hai solo tre opzioni oneste: ritagliare parte dell’immagine, aggiungere spazio intorno, o riorganizzare il design per la nuova forma. La quarta opzione, stirare, deforma ogni lettera e ogni cerchio, e le persone se ne accorgono subito.

Questo è ciò che fa il ridimensionamento in Gradiently con Pro: scegli le misure che ti servono e ogni copia viene impaginata di nuovo per la sua forma, mentre il Mark dietro viene generato da capo a ogni rapporto invece di essere ritagliato da un’unica immagine. Un solo look, ogni misura lo spiega passo per passo.

Quale rapporto d’aspetto scegliere per un post

Quando una piattaforma accetta più forme, scegli quella che occupa più spazio sullo schermo di un telefono. Su Instagram è il 4:5, più alto di un quadrato e quello che sopravvive meglio al ritaglio della griglia del profilo; la dimensione dei post Instagram spiega perché. Su Pinterest il pin 2:3 è lo standard; esistono pin più lunghi ma possono essere tagliati nel feed, come spiegano le dimensioni dei pin di Pinterest.

Per tutto ciò che si guarda su televisione o portatile, il 16:9 è la scelta sicura, ed è per questo che le miniature di YouTube e le presentazioni lo usano. Per tutto ciò che si guarda a schermo intero su un telefono, il 9:16 è l’unica forma che lo riempie. Nel dubbio, progetta prima le versioni verticale e widescreen: quadrato e verticale 4:5 stanno comodi nel mezzo.

Rapporto d’aspetto in CSS

Sul web, la proprietà CSS aspect-ratio mantiene un riquadro in forma a qualsiasi larghezza, evitando che i layout saltino mentre immagini e video si caricano. È supportata in tutti i browser attuali; vedi il riferimento aspect-ratio di MDN.

.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%);
}

.card-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover; /* crops to fill rather than stretching */
}

I rapporti contano anche per la stampa e il video, con convenzioni proprie. Per i formati video vedi le dimensioni dei video social, e per il legame tra numero di pixel e dimensione fisica, DPI e PPI.