Inserire immagini in WordPress

Inserire immagini in WordPress: progettare articoli e pagine in modo professionale

Le immagini rendono gli articoli e le pagine di WordPress più chiari, comprensibili e professionali. Alleggeriscono i testi lunghi, spiegano contenuti complessi, mostrano prodotti, supportano le guide e migliorano l'impatto del tuo sito web. Allo stesso tempo, immagini non preparate correttamente possono peggiorare i tempi di caricamento, consumare spazio di archiviazione e compromettere l'esperienza dell'utente.

In questa guida scoprirai come inserire correttamente le immagini nell'editor di WordPress, quali formati di immagine sono più indicati, come gestire i testi alternativi (alt), come funzionano le gallerie e le immagini in evidenza e a cosa prestare attenzione in termini di prestazioni, SEO e accessibilità.

Perché le immagini sono importanti

Le immagini svolgono diversi compiti su un sito web. Non sono solo elementi decorativi, ma possono spiegare contenuti, creare fiducia e guidare gli utenti in modo mirato.

Le immagini aiutano a ottenere:

• guide più comprensibili,
• un design più professionale,
• una migliore leggibilità degli articoli lunghi,
• la presentazione dei prodotti,
• l'impatto del brand,
• l'accessibilità, se i testi alternativi sono compilati correttamente,
• la SEO, se le immagini sono integrate in modo coerente con l'argomento,
• anteprime per i social media, se si utilizzano le immagini in evidenza.

Le immagini ottengono il massimo effetto quando non sono inserite a caso, ma supportano il contenuto in modo mirato.

1. Preparare le immagini prima del caricamento

Prima di caricare un'immagine su WordPress, dovresti prepararla. Molte immagini provenienti da smartphone, fotocamere o programmi di grafica sono decisamente più grandi del necessario per un sito web.

Verifica prima del caricamento:

• L'immagine è davvero necessaria?
• Il ritaglio dell'immagine è corretto?
• Il file è compresso?
• La larghezza dell'immagine è adeguata?
• Il file ha un nome significativo?
• È stato scelto il formato di file corretto?
• L'immagine contiene informazioni riservate?

Per molte immagini di contenuto sono sufficienti larghezze comprese tra circa 1200 e 1920 pixel. Grafiche di piccole dimensioni, logo o icone richiedono molto meno. Non caricare file originali non modificati da 5 MB o 10 MB se l'immagine verrà visualizzata solo in piccolo sul sito web.

2. Scegliere il formato di immagine corretto

Il formato dell'immagine influisce sulla qualità, sulle dimensioni del file e sulla visualizzazione. Non tutti i formati sono ideali per ogni scopo.

Per le normali immagini di contenuto, il formato WebP è spesso un'ottima scelta. Per le grafiche trasparenti può essere utile il PNG. Per le foto, il formato JPG è ancora molto diffuso, ma dovrebbe essere ben compresso.

3. Utilizzare buoni nomi di file

Il nome del file dovrebbe essere modificato prima del caricamento. WordPress inserisce il nome del file nell'URL del media. Anche se in seguito è possibile modificare il titolo visibile, il file stesso rimane normalmente memorizzato con il suo nome originale.

I buoni nomi di file sono:

• brevi,
• comprensibili,
• scritti in lettere minuscole,
• separati da trattini,
• senza caratteri speciali o dieresi,
• senza spazi vuoti,
• coerenti con l'argomento.

Esempi:

• Buono: wordpress-inserire-immagine-editor-blocchi.webp
• Buono: foto-prodotto-tazza-caffe-nera.jpg
• Meno buono: IMG_8392.JPG
• Meno buono: Immagine nuova finale grande!!.png

4. Inserire immagini nell'editor a blocchi

Nelle versioni moderne di WordPress, le immagini vengono inserite principalmente tramite l'editor a blocchi. Il blocco corrispondente si chiama Immagine.

Ecco come procedere:

1. Apri l'articolo o la pagina desiderata.
2. Clicca nel punto in cui desideri che appaia l'immagine.
3. Clicca sul simbolo Più.
4. Cerca Immagine.
5. Seleziona il blocco Immagine.
6. Scegli se caricare un file dal computer, selezionarlo dalla Libreria dei media o inserirlo tramite un URL.

Dopo l'inserimento, puoi personalizzare l'allineamento, le dimensioni, il comportamento del link, il testo alternativo e altre impostazioni.

5. Carica, Libreria dei media o URL?

Quando si inserisce un'immagine, WordPress offre diverse opzioni. Ogni variante ha una destinazione d'uso differente.

6. Selezionare la dimensione dell'immagine nell'editor

Dopo l'inserimento, puoi scegliere quale dimensione dell'immagine visualizzare. Durante il caricamento, WordPress genera diverse dimensioni a seconda delle tue impostazioni.

Opzioni tipiche:

• Miniatura: molto piccola, adatta per riepiloghi o piccoli elementi.
• Media: adatta per immagini di contenuto più piccole.
• Grande: adatta per ampie aree di contenuto.
• Dimensione reale: file originale, da utilizzare solo se strettamente necessario.

Non utilizzare automaticamente la dimensione reale. Se l'immagine viene visualizzata nell'articolo con una larghezza di soli 800 pixel, non è necessario caricare un file da 4000 pixel.

7. Personalizzare l'allineamento e la visualizzazione

Tramite la barra degli strumenti del blocco Immagine è possibile modificare l'allineamento. A seconda del tema, sono disponibili diverse opzioni.

Allineamenti possibili:

• allinea a sinistra,
• centrato,
• allinea a destra,
• larghezza ampia,
• larghezza piena.

Non tutti i temi supportano la "larghezza ampia" o la "larghezza piena" allo stesso modo. Verifica sempre la visualizzazione nell'anteprima dopo il salvataggio, specialmente sui dispositivi mobili.

8. Compilare correttamente il testo alternativo (Alt)

Il testo alternativo descrive ciò che si vede in un'immagine. È fondamentale per l'accessibilità, la comprensione delle immagini e per i motori di ricerca. Gli screen reader possono leggere ad alta voce i testi alt quando gli utenti non possono vedere l'immagine.

Un buon testo alternativo:

• descrive il contenuto dell'immagine in modo preciso,
• non è troppo lungo,
• not contiene un elenco di parole chiave,
• si adatta al contesto dell'articolo,
• rimane eventualmente vuoto nel caso di immagini puramente decorative.

Esempi:

• Buono: Editor di WordPress con il blocco Immagine aperto
• Buono: Foto prodotto di una tazza da caffè nera su sfondo chiaro
• Cattivo: Immagine
• Cattivo: WordPress SEO immagine hosting Svizzera comprare veloce economico

I testi alt dovrebbero essere scritti per le persone, non come una raccolta artificiale di parole chiave.

9. Sfruttare le didascalie delle immagini

La didascalia è un testo visibile posizionato direttamente sotto l'immagine. È opzionale, ma può essere utile se l'immagine necessita di ulteriori spiegazioni.

Le didascalie sono indicate per:

• screenshot nelle guide,
• diagrammi,
• statistiche,
• dettagli del prodotto,
• crediti fotografici,
• immagini comparative,
• foto che necessitano di contesto.

Non utilizzare le didascalie inutilmente per immagini puramente decorative.

10. Collegare le immagini con un link o no?

Nelle impostazioni dell'immagine puoi stabilire se creare un link per l'immagine. WordPress offre diverse opzioni a seconda del blocco e della versione.

Possibili destinazioni del link:

• Nessuno: l'immagine non è cliccabile.
• File multimediale: il clic apre direttamente il file dell'immagine.
• Pagina allegato: WordPress crea una pagina dedicata esclusivamente a quell'immagine.
• URL personalizzato: l'immagine rimanda a un indirizzo web a tua scelta.

Per le normali immagini di contenuto, Nessuno è spesso la scelta migliore. Se un'immagine deve essere osservata in grandi dimensioni, un link al file multimediale può essere utile. Le pagine degli allegati non sono spesso ideali dal punto di vista SEO, in quanto generano pagine con contenuti minimi (thin content).

11. Impostare l'immagine in evidenza

L'immagine in evidenza (Featured Image) è un'immagine speciale dedicata ad articoli o pagine. Molti temi la mostrano nelle panoramiche del blog, nelle pagine d'archivio, nei layout a schede, nelle sezioni header o nelle anteprime dei social media.

Nell'editor trovi l'immagine in evidenza solitamente nella barra laterale destra sotto la voce Immagine in evidenza.

Una buona immagine in evidenza dovrebbe:

• essere adatta all'argomento,
• avere un formato uniforme,
• non essere troppo grande,
• avere un aspetto professionale,
• apparire bene anche sui dispositivi mobili,
• avere un testo alternativo significativo, se pertinente.

Nel caso di un blog o di una knowledge base, immagini in evidenza uniformi danno un'impressione decisamente più professionale rispetto a formati di immagine casuali.

12. Utilizzare il blocco Galleria

Se desideri mostrare più immagini disposte a griglia, utilizza il blocco Galleria. Questo blocco ti permette di selezionare più immagini dalla libreria dei media e di visualizzarle insieme.

Le gallerie sono indicate per:

• foto di progetti,
• varianti di prodotto,
• immagini prima e dopo,
• foto di eventi,
• referenze,
• guide passo-passo.

Nelle gallerie presta particolare attenzione alle dimensioni dei file e al Lazy Loading. Molte immagini pesanti su una singola pagina possono aumentare notevolmente il tempo di caricamento.

13. Inserire immagini in colonne o layout

Se vuoi disporre testo e immagini l'uno accanto all'altra, puoi utilizzare il blocco Colonne o il blocco Gruppo. Molti temi e page builder offrono ulteriori opzioni di layout.

Tipici ambiti di applicazione:

• immagine a sinistra, testo a destra,
• confronto tra due immagini,
• presentazione del team,
• vantaggi del prodotto,
• sezioni dedicate alle funzionalità,
• landing page.

Verifica sempre questi layout da dispositivi mobili. Ciò che appare bene su desktop può risultare troppo stretto o confuso su uno smartphone.

14. Inserire immagini nell'editor classico

Se utilizzi l'editor classico, l'inserimento funziona in modo leggermente diverso. In quel caso, utilizzi il pulsante Aggiungi media situato sopra l'editor di testo.

La procedura:

1. Apri l'articolo o la pagina.
2. Posiziona il cursore nel punto desiderato.
3. Clicca su Aggiungi media.
4. Carica l'immagine o sceglila dalla Libreria dei media.
5. Imposta il testo alternativo, l'allineamento e la dimensione.
6. Clicca su Inserisci nell'articolo.

Anche nell'editor classico valgono le stesse regole di base: ottimizzare le immagini prima, utilizzare nomi di file sensati e compilare i testi alternativi.

15. Utilizzare screenshot nelle guide

Gli screenshot sono particolarmente utili per gli articoli della knowledge base e le guide tecniche. Mostrano esattamente dove l'utente deve cliccare o a quale impostazione ci si riferisce.

I buoni screenshot dovrebbero:

• mostrare solo l'area pertinente,
• non contenere dati personali,
• non mostrare dati dei clienti,
• not essere inutilmente grandi,
• essere evidenziati o dotati di didascalia se necessario,
• essere aggiornati rispetto all'interfaccia descritta.

Quando l'interfaccia di un software cambia, anche gli screenshot dovrebbero essere controllati e aggiornati regolarmente.

16. Immagini e tempi di caricamento

Le immagini sono tra le cause più frequenti di siti web lenti. In particolare, la presenza di più immagini grandi in un singolo articolo può aumentare notevolmente i tempi di caricamento.

Ottimizza i tempi di caricamento tramite:

• immagini compresse,
• dimensioni dell'immagine appropriate,
• WebP, quando opportuno,
• Lazy Loading,
• evitare gallerie non necessarie,
• non caricare i file originali a dimensione reale,
• una corretta configurazione della cache,
• un hosting veloce.

WordPress supporta automaticamente il lazy loading per molte immagini. Tuttavia, non dovresti fare affidamento solo su questo. Un file troppo grande rimane grande, anche se viene caricato in un secondo momento.

17. Immagini e visualizzazione mobile

Molti visitatori accedono ai siti web tramite smartphone. Pertanto, le immagini devono apparire bene e caricarsi rapidamente sugli schermi piccoli.

Verifica:

• L'immagine si ridimensiona correttamente sui dispositivi mobili?
• Il ritaglio dell'immagine è sensato anche su schermi piccoli?
• L'immagine non supera la larghezza dello schermo?
• Le gallerie sono facilmente utilizzabili da mobile?
• Il testo accanto alle immagini rimane leggibile?
• I dettagli importanti non sono visualizzati in modo troppo piccolo?

Utilizza l'anteprima nell'editor di WordPress o fai un test direttamente su uno smartphone.

18. Errori comuni nell'inserimento delle immagini

• Caricare direttamente le immagini originali: I file grandi peggiorano i tempi di caricamento e appesantiscono i backup.
• Mancanza del testo alternativo: Sconsigliato per l'accessibilità e la comprensione dell'immagine.
• Formato errato: Il PNG per le foto grandi porta spesso a file inutilmente pesanti.
• Inserire immagini esterne senza verifiche: Rischi legali, tecnici e di performance.
• Utilizzare la dimensione reale: Il browser deve caricare immagini inutilmente grandi.
• Immagini in evidenza non uniformi: Le panoramiche del blog sembrano poco professionali.
• Troppe immagini per pagina: Tempi di caricamento lunghi e layout caotico.
• Immagini non verificate da mobile: La visualizzazione può risultare scadente sugli smartphone.

SEO e GEO: utilizzare le immagini come contesto

Le immagini possono rendere i contenuti più comprensibili e fornire segnali aggiuntivi. Per la SEO sono importanti soprattutto il nome del file, il testo alternativo, il contesto, il tempo di caricamento e l'integrazione tecnica. Le immagini dovrebbero supportare l'argomento e non servire solo come decorazione.

Per la GEO (Generative Engine Optimization), le immagini sono particolarmente utili quando hanno un carattere esplicativo: screenshot, diagrammi, immagini di prodotti, rappresentazioni prima-dopo o illustrazioni passo-passo. Affinché tali contenuti vengano compresi correttamente, dovrebbero essere opportunamente descritti e spiegati nel testo.

Buone pratiche:

• spiegare l'immagine nel contesto del testo circostante,
• utilizzare un testo alt preciso,
• descrivere i passaggi visibili negli screenshot,
• non utilizzare immagini stock superflue e prive di valore informativo,
• mantenere le immagini aggiornate,
• fare in modo che i file delle immagini rimangano tecnicamente accessibili.

Procedura consigliata

1. Selezionare l'immagine: Utilizzare solo immagini che supportano il contenuto.
2. Preparare il file: Ritagliare, rimpicciolire e comprimere.
3. Adattare il nome del file: Lettere minuscole, trattini, nessun carattere speciale o dieresi.
4. Caricare l'immagine: Tramite il blocco Immagine o la Libreria dei media.
5. Scegliere la dimensione adatta: Non utilizzare automaticamente la dimensione reale.
6. Compilare il testo alt: Descrivere il contenuto dell'immagine in modo naturale.
7. Verificare l'allineamento: Controllare la visualizzazione nell'articolo.
8. Testare l'anteprima mobile: Verificare la visualizzazione su smartphone.
9. Prestare attenzione ai tempi di caricamento: Specialmente in presenza di più immagini o gallerie.
10. Impostare l'immagine in evidenza: Utile per la visualizzazione nel blog e negli archivi.

Domande frequenti sull'inserimento di immagini in WordPress

Come inserisco un'immagine in WordPress?

Apri l'articolo o la pagina, clicca sul simbolo Più, seleziona il blocco Immagine e carica un file o seleziona un'immagine dalla Libreria dei media.

Quale dimensione dell'immagine dovrei utilizzare?

Utilizza la dimensione più piccola che appaia ancora bene nel layout. Per le normali immagini di contenuto, la dimensione originale completa è raramente necessaria.

Cos'è il testo alternativo (Alt)?

Il testo alt descrive il contenuto dell'immagine per gli screen reader, per i motori di ricerca e per le situazioni in cui l'immagine non viene caricata.

Dovrei utilizzare il formato WebP?

Il WebP è molto indicato per molte immagini di siti web poiché consente un'alta qualità con file di dimensioni ridotte. Verifica comunque che il tuo flusso di lavoro e il tuo sito web lo supportino correttamente.

Posso inserire immagini da URL esterni?

Tecnicamente sì, ma spesso non è raccomandabile. Le immagini esterne possono scomparire, caricarsi più lentamente, sollevare questioni sulla privacy o violare i diritti di utilizzo.

Qual è la differenza tra un'immagine normale e un'immagine in evidenza?

Un'immagine normale appare all'interno del contenuto. L'immagine in evidenza è una speciale immagine di anteprima che molti temi utilizzano nelle panoramiche del blog, negli archivi o nelle anteprime dei social media.

Come inserisco più immagini contemporaneamente?

Utilizza il blocco Galleria. Ti consente di selezionare più immagini dalla libreria dei media e di mostrarle disposte a griglia.

Perché la mia pagina si carica lentamente dopo aver inserito delle immagini?

Spesso le immagini sono troppo grandi, non compresse o integrate a dimensione reale originale. Ottimizza le dimensioni del file, il formato e le dimensioni dell'immagine.