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

[Canonical HTML page](https://gradiently.design/it/guide/aspect-ratios-explained)

Le misure in pixel cambiano da piattaforma a piattaforma, ma le forme sono poche. Impara quelle, e i conti che le collegano, e non schiaccerai mai più un design.

## The short version

- Il rapporto d’aspetto è la relazione proporzionale tra la larghezza e l’altezza di un’immagine, scritta come larghezza:altezza.
- Per trovare il rapporto d’aspetto di qualsiasi misura, dividi entrambi i numeri per il loro massimo comun divisore: 1920×1080 diventa così 16:9.
- Per ottenere una nuova misura nello stesso rapporto, moltiplica la nuova larghezza per l’altezza del rapporto e dividi per la sua larghezza.
- I rapporti che contano di più per i social sono 1:1, 4:5, 9:16, 16:9 e 1,91:1.
- Cambiare il rapporto d’aspetto di un’immagine significa sempre ritagliare, aggiungere spazio o rifare l’impaginazione; stirarla la deforma.

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

- 1:1 quadrato: 1080 × 1080
- 4:5 verticale: 1080 × 1350
- 2:3 pin: 1000 × 1500
- 9:16 verticale: 1080 × 1920
- 4:3 classico: 1600 × 1200
- 16:9 widescreen: 1920 × 1080
- 1,91:1 anteprima link: 1200 × 630
- 3:1 intestazione: 1500 × 500

Otto forme coprono quasi tutto ciò che progetterai. Disegnate in scala, dal quadrato alla sottile intestazione.

| Rapporto | Forma | Misura tipica | Usato per |
| --- | --- | --- | --- |
| 1:1 | Quadrato | 1080×1080 | Quadrato di Instagram, post di Facebook e LinkedIn, copertine di playlist |
| 4:5 | Verticale | 1080×1350 | Post verticali di Instagram, Threads, Facebook e X |
| 3:4 | Verticale | 1080×1440 | Come Instagram ritaglia i post nella griglia del profilo |
| 2:3 | Verticale alto | 1000×1500 | Pin di Pinterest |
| 9:16 | Verticale | 1080×1920 | Storie, Reel, TikTok, Shorts, stati di WhatsApp |
| 4:3 | Orizzontale classico | 1600×1200 | Vecchie presentazioni, shot di Dribbble, post di Google Business a 1200×900 |
| 16:9 | Widescreen | 1920×1080 | Miniature di YouTube, presentazioni, hero di siti, post di X e Bluesky |
| 1,91:1 | Scheda larga | 1200×630 | Anteprime di link e immagini Open Graph |
| 3:1 e 4:1 | Banner | 1500×500, 1584×396 | Intestazioni di X, banner di LinkedIn |

Un rapporto, molte piattaforme. Quando due formati condividono un rapporto, un solo design serve entrambi scalando.

Le misure esatte in pixel per ogni piattaforma sono nelle [dimensioni delle immagini per i social media](https://gradiently.design/it/guide/social-media-image-sizes). 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. **Parti dalla misura** Poniamo 1080×1350, un post verticale di Instagram.
2. **Trova il massimo comun divisore** Il numero più grande che divide esattamente sia 1080 sia 1350 è 270.
3. **Dividi entrambi i lati** 1080 ÷ 270 = 4 e 1350 ÷ 270 = 5. Il rapporto d’aspetto è 4:5.
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.

```js
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
```

L’algoritmo di Euclide per il divisore, poi un semplice ridimensionamento. Incollalo in qualsiasi console del browser.

## 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.

### Ritagliare o stirare

- Veloce, ma il titolo spesso viene tagliato
- Stirare fa sembrare schiacciato il testo
- I loghi finiscono nel punto sbagliato
- Gli sfondi perdono il loro punto luminoso
- Ogni formato appare un po’ storto

### Rifare l’impaginazione

- Le parole si ridistribuiscono secondo la forma
- Il testo mantiene le sue vere proporzioni
- Il logo va dove ogni formato se lo aspetta
- Lo sfondo viene generato di nuovo per il riquadro
- Ogni formato sembra progettato per il suo posto

Un post verticale 4:5 per un laboratorio di ceramica che annuncia l’apertura dei corsi di primavera

Il design in 4:5 per il feed: parole impilate, spazio sopra e sotto.

Lo stesso annuncio del laboratorio di ceramica impaginato in un riquadro widescreen 16:9

Lo stesso design in 16:9 per l’hero di un sito: le parole si allargano, lo sfondo viene ridisegnato per il riquadro.

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](https://gradiently.design/it/guide/one-look-every-size) 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](https://gradiently.design/it/guide/instagram-post-size) 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](https://gradiently.design/it/guide/pinterest-pin-size).

Per tutto ciò che si guarda su televisione o portatile, il 16:9 è la scelta sicura, ed è per questo che le [miniature di YouTube](https://gradiently.design/it/guide/youtube-thumbnail-size) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).

```css
.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 */
}
```

Scrivi il rapporto con una barra. Abbinalo a object-fit: cover sulle immagini, così si ritagliano invece di deformarsi.

I rapporti contano anche per la stampa e il video, con convenzioni proprie. Per i formati video vedi le [dimensioni dei video social](https://gradiently.design/it/guide/social-video-sizes), e per il legame tra numero di pixel e dimensione fisica, [DPI e PPI](https://gradiently.design/it/guide/dpi-vs-ppi).

## FAQ

### Cos’è un rapporto d’aspetto?

È la forma di un’immagine, espressa come larghezza rispetto ad altezza, per esempio 16:9 o 4:5. Le immagini con lo stesso rapporto si scalano l’una nell’altra senza tagli.

### Come si calcola un rapporto d’aspetto?

Dividi larghezza e altezza per il loro massimo comun divisore. Per 1920×1080 il divisore è 120, e il risultato è 16:9.

### Che rapporto d’aspetto ha 1080×1350?

4:5, la forma verticale usata per i post verticali di Instagram, Threads, Facebook e X.

### Qual è la differenza tra 16:9 e 9:16?

Sono la stessa forma ruotata su un fianco. Il 16:9 è orizzontale, usato per YouTube e presentazioni; il 9:16 è verticale, usato per Storie, Reel e TikTok.

### Come cambio il rapporto d’aspetto senza stirare l’immagine?

Ritaglia l’immagine, aggiungi spazio intorno o rifai l’impaginazione per la nuova forma. Riorganizzare dà il risultato migliore per i design con testo.