Le proporzioni delle immagini sul sito web (spiegate in modo semplice con esempi pratici)

Gabriele Iacovone

Una delle domande che ricevo più spesso quando realizzo un sito è:
“Puoi farmi le immagini un po’ più grandi?”

Oppure:
“Perché sul sito non si vede tutta la foto?”

La risposta è semplice, ma importantissima: le immagini sul sito devono rispettare determinate proporzioni.

Cosa significa “proporzioni”

Quando parliamo di proporzioni, parliamo del rapporto tra larghezza e altezza di un’immagine.

Ad esempio, un’immagine 1400×900 pixel ha un rapporto di circa 16:10 — ed è perfetta per un’immagine orizzontale da inserire in una sezione del sito o in un articolo del blog.

Le proporzioni determinano come l’immagine viene visualizzata nei vari dispositivi: computer, tablet, smartphone.

Perché non vedi tutta la foto (soprattutto negli sfondi)

Quando un’immagine viene usata come sfondo, il sito la adatta automaticamente allo spazio disponibile.

Questo significa che alcune parti possono essere tagliate a seconda delle dimensioni dello schermo.

💡 Esempio pratico:

Su un monitor largo potresti vedere tutta la foto, ma su uno smartphone alcune parti laterali potrebbero non essere visibili.

Non è un errore — è semplicemente il modo in cui il layout si adatta allo schermo.

Le immagini non devono essere “più grandi”, ma “più adatte”

Spesso si pensa che fornire immagini più grandi sia meglio.

In realtà, un’immagine troppo grande appesantisce il sito, rallenta il caricamento e non migliora la qualità visiva se lo spazio in cui viene mostrata è limitato.

La cosa giusta da fare è usare immagini con le proporzioni corrette per il tipo di sezione:

  • Hero o sezione principale: 1920×1080 px (orizzontale)
  • Immagini di sfondo: mantenere un rapporto 16:9 o simile
  • Immagini quadrate (icone, card, prodotti): 1:1
  • Immagini verticali (ritratti, copertine bio): 4:5 o 3:4

Un altro aspetto da tenere a mente è la dimensione del contenitore dell’immagine.

Mettiamo il caso che l’immagine si trovi all’interno di un contenitore (Es:una colonna) largo metà schermo.

Se l’immagine è in formato quadrato occuperà correttamente tutto il contenitore.


Se invece l’immagine è più larga, probabilmente le pàrti laterali saranno “tagliate” per rispettare le proporzioni e riempire il contenitore.

💡 Esempio pratico:

In Conclusione

  • Non serve chiedere immagini più grandi: serve fornirle nelle proporzioni giuste.
  • Ogni sezione del sito ha il suo spazio “ottimale”.
  • Alcune parti delle immagini, specie negli sfondi, potrebbero non essere sempre visibili.
  • Mantenere proporzioni corrette significa avere un sito più veloce, ordinato e coerente.

Gabriele Iacovone

Web Designer & WordPress Developer

Web Designer e Sviluppatore WordPress da oltre 10 anni, aiuto aziende e professionisti a convertire i visitatori in clienti.

Leggi la mia storia

👋

Hai bisogno di aiuto per sistemare le immagini del tuo sito web?

Contattami