Best practice per gestire le immagini sul tuo sito web

Immagini ben scelte e ben preparate rendono il tuo sito più attraente, più veloce e meglio posizionato. Questo articolo riunisce le buone pratiche da applicare prima di aggiungere un'immagine al tuo sito.

In questo articolo

Trovare immagini gratuite
Scegliere il formato giusto
Ottimizzare le tue immagini
Adattare l'immagine alla sua posizione
Dimensioni consigliate

Trovare immagini gratuite

Diverse banche di immagini offrono gratuitamente immagini di qualità:

Unsplash: oltre un milione di foto ad alta definizione, proposte da fotografi di tutto il mondo. Le ricerche in inglese danno più risultati. Ricordati di citare l'autore della foto.
Pexels: foto e video gratuiti provenienti da diverse banche di immagini, con ricerca anche in italiano.
Flaticon: una grandissima libreria di icone, in gran parte gratuite, raggruppate in set tematici coerenti. L'account gratuito richiede di citare l'autore.

Scegliere il formato giusto

JPG: il formato più diffuso sul web, da preferire per le foto e le immagini con uno sfondo e molti colori.
PNG: da preferire per le immagini con un'area trasparente, oltre che per i loghi e i grafici con linee o testo, che mantiene più nitidi.

Ottimizzare le tue immagini

Le immagini leggere velocizzano la visualizzazione del tuo sito, soprattutto sui dispositivi mobili da cui arriva la maggior parte delle visite, e ne migliorano il posizionamento.

Ridimensiona: riduci l'immagine alle dimensioni di cui ha realmente bisogno prima di caricarla.
Comprimi: riduci il peso del file con uno strumento online gratuito come TinyPNG o Compressor.io.
Rinomina: dai a ogni file un nome descrittivo, senza spazi né caratteri speciali (ad esempio assemblea-generale-2026.jpg). Ritrovi così più facilmente le tue immagini, e i motori di ricerca le capiscono meglio.
Descrivi: nell'editor di testo, compila il campo Testo alternativo di ogni immagine. I lettori di schermo lo leggono alle persone con disabilità visiva, e anche i motori di ricerca lo usano.

Le immagini caricate con l'editor di testo (Cerca sul server) pesano al massimo 2 MB. Un'immagine più larga di 1.600 px o più alta di 1.200 px viene ridotta automaticamente durante il caricamento. Per saperne di più, consulta l'articolo Aggiungi una foto con l'editor.

Adattare l'immagine alla sua posizione

Modulo Foto: il modulo Foto ha le proprie opzioni di dimensione. Senza una dimensione definita, l'immagine occupa tutta la larghezza della sua area: in un'area al 50%, occupa quindi metà della larghezza della pagina.
Immagini degli articoli: negli elenchi di articoli (Articoli multipli, Articoli in evidenza), immagini delle stesse dimensioni danno una visualizzazione uniforme. Il ritaglio proposto al caricamento dell'immagine di un articolo (16:9, 4:3 o 1:1) facilita questa coerenza.
Banner: il banner è spesso una delle immagini più grandi del sito. Poiché la risoluzione dello schermo del computer più diffusa è 1.920 × 1.080 px, prevedi una larghezza di almeno 1.920 px.
Favicon: l'icona mostrata nella scheda del browser non deve superare i 16 × 16 px.

Dimensioni consigliate

La tabella seguente riassume le dimensioni da prevedere per ogni posizione del sito. Le immagini caricate nell'editor di testo pesano al massimo 2 MB, e un'immagine più larga di 1600 px o più alta di 1200 px viene ridotta automaticamente.

Posizione	Dimensioni	Da sapere
Banner (modulo Banner)	1920 × 530 px	Con l'aspetto predefinito, il banner ha un'altezza fissa di circa 530 px su computer e 340 px su tablet e mobile. L'immagine viene ingrandita per riempire questo riquadro, poi centrata. Su mobile resta visibile solo una fascia centrale larga circa 600 px: posiziona lì testi e loghi.
Carosello a tutta larghezza	1920 × 700 px	Area sicura centrale di circa 1000 × 520 px, peso idealmente sotto i 500 KB. Nella modalità con immagine e testo a sinistra, preferisci un'immagine vicina al quadrato. Consulta l'articolo Carosello.
Immagine di un articolo	Formato 16:9, 4:3 o 1:1	Il ritaglio proposto al caricamento aiuta a mantenere lo stesso formato per tutti gli articoli di un elenco (Articoli multipli, Articoli in evidenza, Carosello).
Modulo Immagine	1200 px di larghezza per un'area al 100%, 600 px per un'area al 50%	Su computer, il contenuto delle pagine è largo circa 1150 px. L'immagine occupa la larghezza della sua area, salvo se imposti una larghezza.
Immagine di un evento	Formato quadrato, da 400 × 400 a 600 × 600 px	Il modulo adatta l'immagine alla sua posizione: nessuna dimensione è imposta. Mantieni lo stesso formato per tutti i tuoi eventi.
Foto di un membro	Formato quadrato, ad esempio 500 × 500 px	Usa lo stesso formato per tutte le foto, per una rubrica e dei membri in evidenza uniformi.
Immagine condivisa sui social	1200 × 630 px	JPG o PNG, idealmente sotto i 300 KB.
Favicon	16 × 16 px	Immagine quadrata, in formato PNG.

Queste dimensioni valgono per l'aspetto predefinito del sito. Se il tuo sito ha una personalizzazione avanzata (CSS), possono variare: fai una prova con un'immagine prima di preparare tutte le tue grafiche.