Come presentare al meglio le tue immagini online

Qualunque sia il tipo di sito web che hai, è probabile che il tuo contenuto sia un misto di testo e immagini. Per fotografi, artisti e altri creativi, le immagini sul tuo sito web costituiscono probabilmente la parte più importante dei tuoi contenuti, quindi è fondamentale sapere come presentarle correttamente.

Certo, puoi andare avanti e caricare foto e grafica tramite la dashboard di WordPress senza ulteriori pensieri, ma se vuoi assicurarti che il tuo sito web si carichi velocemente, facile da leggere e ottimizzato per i motori di ricerca, faresti bene a leggere questo breve guida per le migliori pratiche quando si tratta di utilizzare le immagini nel tuo sito web.

Salvataggio e caricamento di immagini

Sebbene WordPress abbia reso possibile caricare immagini enormi direttamente dal tuo computer e visualizzarle automaticamente per adattarle alla larghezza del tuo blog, ti sconsigliamo di caricare immagini non elaborate.

Qualsiasi browser Web è in grado di visualizzare immagini di dimensioni inferiori rispetto a quelle effettivamente indicate nel codice, ma ciò non comporta una riduzione delle dimensioni effettive del file. Un'immagine da 500 kb visualizzata al 50% della sua larghezza e altezza completa sarà comunque di 500 kb. I blogger che non sono esperti di HTML e WordPress possono presumere che, poiché le loro immagini non appaiono grandi sullo schermo, significa che saranno veloci da scaricare, ma non è sempre così.

Per controllare le dimensioni dell'immagine, fai clic con il pulsante destro del mouse o fai clic tenendo premuto il tasto Ctrl su un'immagine all'interno del tuo blog e scegli Visualizza/Apri immagine dal menu (la dicitura varia leggermente a seconda del browser che stai utilizzando). Se l'immagine che si apre è molto più grande di quella che vedi sul tuo blog, significa che le tue immagini non sono dimensionate correttamente.

Se hai un blog ricco di immagini e non ridimensioni le tue immagini prima di caricarle, le dimensioni combinate della tua pagina web potrebbero essere inutilmente grandi.

Vale la pena dedicare un paio di minuti in più per ridimensionare e comprimere le immagini prima di caricarle. Questo può essere fatto facilmente in Photoshop o in qualsiasi altro software di modifica delle immagini che utilizzi. Puoi anche utilizzare strumenti online gratuiti come PicMonkey e Image Optimizer di Dynamic Drive.

Il ridimensionamento manuale delle immagini ti dà il pieno controllo sulla compressione e ridurrà notevolmente il tempo di caricamento, ma se lo desideri, puoi anche scegliere di utilizzare le immagini ridimensionate che WordPress genera automaticamente ad ogni caricamento. Quando inserisci un'immagine in un post, hai la possibilità di inserire immagini a dimensione intera, grande, media o in miniatura. Puoi modificare queste dimensioni per adattarle al design del tuo blog in Impostazioni > Media . Tieni presente che se scegli questo metodo, le tue immagini originali a grandezza naturale saranno disponibili per il download gratuito da parte di chiunque dal tuo sito Web, non l'opzione migliore per fotografi e illustratori!

Ottimizzazione e usabilità dell'immagine

Oltre ad assicurarti che le tue immagini siano adeguatamente dimensionate e ottimizzate per il tempo di caricamento della pagina, dovresti anche assicurarti che siano correttamente contrassegnate per SEO (Search Engine Optimization). La SEO rende più facile per i motori di ricerca trovare e indicizzare il tuo sito ed è probabile che un sito che utilizza buone tecniche SEO appaia più in alto nelle pagine dei risultati dei motori di ricerca rispetto a un sito non ottimizzato.

Una discussione completa sulla SEO va oltre lo scopo di questo articolo (molti temi WordPress sono SEO-friendly fin da subito), ma l'ottimizzazione delle metainformazioni delle immagini è un modo semplice per dare un po' di slancio alla SEO in loco e può aiutare le persone a trovare il tuo sito tramite la ricerca di immagini di Google e altri motori di ricerca basati su immagini.

Anche il corretto markup delle immagini è importante per l'usabilità, in particolare se le immagini illustrano informazioni importanti. Nel caso in cui un'immagine non si carichi o non possa essere vista (a causa di una connessione Internet lenta, perché le immagini sono spente, o per utenti ipovedenti), è d'obbligo fornire una descrizione testuale alternativa.

1. Nome file

Innanzitutto, quando salvi le tue immagini, assicurati che abbiano un nome file descrittivo. Lasciare le tue immagini nominate come IMG_013445.jpg o qualunque cosa siano quando escono dalla tua fotocamera non darà ai motori di ricerca alcun indizio su cosa stanno raffigurando. Utilizzare parole chiave descrittive appropriate separate da trattini, ad esempio children-playing-ocean.jpg

2. Testo alternativo

Quando carichi la tua immagine tramite Media Uploader, WordPress offre diversi campi per le descrizioni dei file. Sebbene questi possano essere lasciati vuoti (e molti blogger lo fanno per risparmiare tempo), più campi compilerai, migliore sarà la SEO e l'usabilità. il più importante di questi è il testo alternativo, abbreviazione di "testo alternativo".

Questo è il testo che viene visualizzato quando le immagini sono disattivate o non possono essere mostrate per qualche altro motivo, quindi dovrebbe fungere da descrizione dell'immagine. Anche i motori di ricerca leggono questo testo e lo usano per decidere di cosa tratta la pagina e dove inserire il tuo sito negli elenchi. Se sei un fotografo di matrimoni con sede in Texas, ad esempio, vorrai assicurarti che il testo alternativo per tutte le immagini del tuo blog includa molto testo descrittivo, comprese parole chiave come "fotografo di matrimonio" e "fotografia di matrimonio in Texas". Anche se tieni presente che, come con il testo del tuo blog, è importante non riempire eccessivamente le parole chiave nelle descrizioni delle immagini.

Può essere allettante copiare e incollare lo stesso testo alternativo in tutte le tue immagini per risparmiare tempo, ma idealmente, ciascuna delle tue immagini dovrebbe avere un testo alternativo univoco che lo descriva correttamente.

3. Titolo immagine

Il titolo dell'immagine è simile al testo alternativo ma ha uno scopo leggermente diverso. Invece di fornire informazioni alternative all'immagine, il titolo dovrebbe fornire informazioni aggiuntive . Il titolo dell'immagine è il testo "suggerimento" che appare in una finestra popup quando si passa il mouse sopra un'immagine. Questo testo è importante sia per l'usabilità che per la SEO e dovrebbe fornire informazioni rapide e pertinenti sull'immagine o su dove si collega.

Il titolo dell'immagine dovrebbe essere leggermente diverso dal testo alternativo e, di nuovo, dovrebbe essere unico per ogni immagine.

4. Didascalia immagine

Una didascalia è un testo che viene generalmente visualizzato sotto l'immagine e fornisce una descrizione aggiuntiva o un testo di supporto. L'uso delle didascalie è facoltativo, ma possono essere utili per fornire informazioni aggiuntive sulla tua immagine o per citare la fonte se stai utilizzando immagini da un altro sito. Pensa alla didascalia come a un'etichetta informativa in una mostra in una galleria d'arte.

Collegamento di immagini

Per impostazione predefinita, quando inserisci un'immagine in una pagina o in un post, WordPress la collegherà a una nuova pagina con solo l'immagine su di essa. Non c'è una vera ragione per questo e può anche essere dannoso per il tuo sito in termini di SEO.

Può anche essere un grosso problema di usabilità: se un utente passa sopra la tua immagine e vede che si tratta di un collegamento, potrebbe presumere che si colleghi a una pagina con informazioni utili. Fare clic su queste pagine di sole immagini è una perdita di tempo per il visitatore e può persino farti perdere visitatori.

Per risolvere questo problema, seleziona semplicemente "Nessuno" come campo "URL collegamento" quando carichi un'immagine in WordPress, a meno che tu non voglia effettivamente collegarla a una pagina specifica. In tal caso, assicurati di utilizzare il titolo o la didascalia dell'immagine per indicare dove si collega l'immagine.

Posizionamento dell'immagine

Oltre ad assicurarti che le tue immagini siano ottimizzate per la SEO e facili da usare, è anche importante pensare a come si adattano al tuo testo per motivi estetici e di leggibilità.

Potresti preferire utilizzare immagini in linea (più piccole delle colonne principali in modo che il testo si avvolga attorno ad esse), immagini a larghezza intera o una combinazione di entrambe. Quello che dovresti evitare è l'uso di immagini autonome che non sono a larghezza intera o una serie di immagini di larghezza variabile, poiché sembra poco professionale e poco attraente.

Per fare ciò, dovresti assicurarti che le tue immagini del ritratto abbiano la stessa larghezza delle tue immagini del paesaggio. Tieni d'occhio l'altezza delle tue immagini: se sono troppo alte, potrebbero traboccare su schermi a risoluzione più piccola. Ciò farà sì che gli utenti debbano scorrere per vedere l'immagine completa, cosa che dovrebbe essere evitata. Se le tue immagini sono troppo grandi per essere visualizzate a larghezza intera in formato verticale, puoi creare un collage di due o più immagini verticali affiancate.

Le immagini in linea possono fornire un po' di varietà ai tuoi contenuti e aiutare a rompere grandi muri di testo. Sono anche una buona opzione per immagini più piccole o strette che non sono adatte per essere visualizzate a tutta larghezza.

Quando si utilizzano immagini in linea, ancora una volta è meglio decidere una larghezza impostata per coerenza visiva. Questa non dovrebbe essere più della metà della larghezza della colonna di testo, poiché le immagini più larghe di questa comprimeranno troppo il testo e renderanno difficile la lettura.

Le immagini in linea devono essere sempre allineate a destra anziché a sinistra del testo, in modo da non spezzare il margine sinistro e ridurre la leggibilità.

Abbellisci il tuo blog con le immagini

L'uso delle immagini è importante per creare un blog interessante e visivamente accattivante e sono ancora più vitali quando si tratta di commercializzare la tua attività creativa.

Segui i suggerimenti che abbiamo trattato in questo articolo per immagini ben ottimizzate e ben presentate e il tuo sito Web non solo sarà bello ma si caricherà anche rapidamente, sarà un piacere da leggere e sarà più attraente per i motori di ricerca. Buona pubblicazione!