Come ottimizzare le immagini del tuo blog WordPress

Vuoi un blog capace di ottenere il massimo? Devi ottimizzare le immagini. E lo devi fare pensando all'utente. E poi al motore di ricerca. Sei pronto per migliorare le foto del tuo blog?

Le foto rompono la monotonia delle parole, introducono il tuo operato e stimolano l’attenzione di chi ti legge. Senza parlare degli effetti provocati sugli esseri umani da foto interessanti, per questo devi capire come ottimizzare le immagini del blog.

come ottimizzare le immagini del blog
Come migliorare le foto su un sito.

Inserire un’immagine diversa per ogni post che scriviamo è sicuramente un’operazione utile per attirare l’attenzione di chi arriva sul tuo blog.

Ma anche un canale in più per essere trovati nel web. Prima di inserirle, io seguo sempre questa procedura fatta di 8 punti fondamentali per ottimizzare le immagini.

Usa sempre immagini di qualità

Di solito cerco le immagini per il mio blog su Flickr, inserendo l’opzione Creative Commons del motore di ricerca interno.

Così posso utilizzare immagini di qualità a patto di inserire un riferimento all’autore. Inoltre esistono diversi siti che permettono di scaricare numerose immagini gratis.

Io suggerisco di identificare una serie di fonti imprescindibili e di usare sempre le stesse, magari sfruttando alcuni tool per scrivere sulle immagini e personalizzare il contenuto con logo ed headline. Una delle soluzioni migliori è Canva, imperdibile per ogni blogger che si rispetti. Anche Pablo di Buffer permette di fare grandi cose.

Da leggere: come ottimizzare le immagini per il web

Comprimi le foto per ridurre il peso

Per non appesantire le pagine del blog consiglio di ridurre le foto rispetto alle dimensioni desiderate prima di caricarle sul server (le mie di solito si aggirano intorno ai 630 px). Inoltre devi comprimere le immagini per renderle leggere.

ridurre peso immagine
Usa webresizer.com per ridurre il peso dell’immagine.

Quanto deve pesare un’immagine per il web? Su un articolo del blog massimo 50 Kb. Questa è una misura di massima, non esiste un parametro per tutti. Ma io cerco di non superare mai questa soglia. I programmi per alleggerire foto online:

Tutto questo senza dimenticare che ci sono plugin per comprimere le immagini. La leggerezza delle foto che carichi nei post contribuisce a velocizzare il blog WordPress.

I migliori tool per comprimere le immagini online.

Questo è un dato importante per lavorare sulla SEO e user experience. Senza dimenticare che in questo processo è importante la scelta di un hosting di qualità.

Carica foto con dimensioni precise

La dimensione ideale delle foto su un blog WordPress non esiste. O meglio, dipende dal tema che usi. Quello che posso dirti è che hai la necessità di caricare le immagini senza il resize forzato. Questo aiuta a velocizzare il caricamento delle immagini.

Che sia per l’immagine in evidenza o all’interno del post, l’importante è sapere in anticipo qual è la dimensione mostrata. Puoi usare un tool per ritagliare le foto online e caricare il visual con le dimensioni che servono. Ignorando il falso mito dei 72 dpi.

Ridimensiona le immagini in modo da dare i giusti pixel su lato lungo e altezza. Così puoi risparmiare Kb ed evitare un resize del browser faticoso in termini di risorse.

You forgot to scale down an image before adding it to the page. The image looks fine, but it is wasting users’ data and hurting page performance.

web.dev

Scegliere la giusta dimensione delle immagini e ottimizzarle in modo da dichiarare le misure vuol dire evitare problemi di layout shift e migliorare i Core Web Vitals.

Specifica sempre width e height

Un attributo importante per migliorare le foto e le grafiche è quello che definisce le dimensioni del visual (ovvero width e height). Devi indicare questi parametri nel codice per velocizzare il caricamento e ottimizzare le immagini del tuo blog.

Un altro motivo per specificare la dimensione dei JPG o PNG quando carichi i tuoi file sul blog WordPress? In questo modo migliori uno degli aspetti del Core Web Vitals: Cumulative Layout Shift. Vale adire la stabilità dei contenuti all’interno della pagina.

Ecco cosa succede al caricamento di un contenuto con immagini in cui non ci sono le dimensioni: il rischio di creare confusione è importante, quindi il codice delle tue immagini deve essere sempre completato da attributi per indicare le dimensioni:

<img src="ciao.jpg" width="640" height="360" alt="Riccardo Saluta">

Devi aggiungere la fonte alla foto

Mai dimenticare di aggiungere l’autore dell’immagine se c’è la necessità. O meglio, parti al presupposto che quel contenuto non ti appartiene. Se si tratta di una CC0 puoi non mettere la fonte, altrimenti devi sempre citare da dove viene.

Devi ottimizzare le foto per la SEO

Per indicizzare le immagini Google considera l’url di riferimento (e qui torna utile l’aver nominato la foto con keyword significative), l’attributo title che compare al passaggio del mouse sulla foto, la didascalia e il tag alternative. Quali sono le migliori pratiche per posizionare una foto e fare ottimizzazione SEO delle immagini?

<img title="Ottimizzare le immagini del tuo blog" 
src="https://www.mysocialweb.it/wp-content/uploads/2015/06/immagini.jpg" 
alt="Ottimizzare le immagini" width="630" height="420" />

Ti lascio un esempio di codice HTML che riproduce un buon lavoro in questo senso. Ricorda di inserire il testo alternative, è sicuramente l’elemento decisivo per posizionare il contenuto su Google Image. Mi raccomando, inoltre, di inserire testi diversi per ognuno di questi attributi per evitare eccessi di ottimizzazione.

Meglio JPG o PNG per le immagini?

Non esiste un meglio o un peggio, dipende da cosa ti serve. Il formato JPG è perfetto per le immagini con tanti colori, è un formato di compressione che si usa per le foto. Mentre il PNG è dedicato alle grafiche, al visual che crei con Photoshop o Canva.

come ottimizzare le immagini del blog
Come ottimizzare le immagini del blog.

Se salvi un’infografica in PNG avrai un effetto sgranato ributtante, pessimo. Mentre una foto in PNG peserà tantissimo e non avrà alcun vantaggio rispetto al JPG. E le GIF, invece, sono perfette per le immagini in movimento. Quindi, ecco le regole:

  • PNG: grafici, visual quote, infografiche.
  • JPG: foto decorative e scatti della realtà.
  • PNG: immagini in movimento.

Scegli colori che ti rappresentano

Quando ti trovi di fronte a 4-5 immagini che ti piacciono, scegli quella che riesce a riassumere il maggior numero di concetti racchiusi nel tuo articolo.

Oppure vai verso una che li estremizzi in maniera divertente, ma non lanciarti su un’immagine solo perché vi piace: deve essere funzionale e ben inserita.

Le immagini con colori forti e vivaci funzionano, attirano l’attenzione e si fanno notare. Non devi essere vittima dell’estetica ma nei social l’attenzione del pubblico è bassa. Quindi la presenza di un colore in un’immagine vuol dire comunicare.

Da leggere: come scegliere immagini CC0

Come ottimizzare le immagini del blog

Questi sono i punti indispensabili per ottimizzare le immagini del tuo blog in base alla mia esperienza personale. Ora aspetto il tuo punto di vista: cosa vuoi aggiungere per migliorare le foto online? Lascia la tua opinione nei commenti e aiutami.

Riccardo Esposito
Sono un web writer freelance. Mi occupo di scrittura online dal 2009, mi sono specializzato nella stesura di piani editoriali per blog aziendali. Ho scritto 3 libri dedicati al mondo del blogging e della scrittura online.

11 COMMENTI

  1. Ciao, è meglio inserire un trattino tra le parole dell’image title, oppure lasciare lo spazio come nel tuo esempio? Grazie!

RISPONDI AL COMMENTO

Please enter your comment!
Please enter your name here