L’Ottimizzazione immagini per il web è un aspetto notevolmente importante ma molto sottovalutato soprattutto dai meno esperti e dai non addetti ai lavori. Infatti le immagini non ottimizzate appesantiscono il sito portando lunghi tempi di caricamento. Le lunghe attese per accedere ai contenuti oltre ad indurre i visitatori ad abbandonare le pagine visitate vengono rilevate in modo automatico dai motori di ricerca che assegnano alla pagina un basso rank cioè un basso punteggio di posizionamento che si ripercuote su tutto il sito.
Ottimizzazione immagini
Uno degli errori più comuni e più incisivo sulle dimensioni delle immagini è l’estensione utilizzata. Cioè il tipo di compressione a cui è sottoposta l’immagine. Per il web non è necessario utilizzare grandi formati con minime compressioni senza perdita. Sia per avere un caricamento più veloce che per le caratteristiche tipiche degli schermi dei dispositivi usati per la navigazione web che hanno dimensioni ridotte e sui quali non si noterebbero comunque i minimi dettagli dell’immagine.
JPG vs. PNG
Non è raro trovare sul web fotografie con compressione png. La compressione png è una compressione senza perdita quindi con alta qualità ma anche con una maggiore dimensione del file. Il formato png è l’ideale per loghi, icone e immagini in genere con un numero limitato di colori. In questi casi infatti il png ha una dimensione addirittura inferiore alla compressione .jpg.
La compressione .jpg o .jpeg è la più comune e la più adatta per le fotografie che hanno un alto numero di colori, sfumature e dettagli rispetto ad immagini vettoriali create con programmi grafici. Questo formato riduce in modo importante il peso di qualsiasi fotografia necessaria per il proprio sito web rispetto alla corrispondente compressione png.
Compressori gratuiti
Per chi non ha un software di grafica per comprimere le immagini la soluzione migliore è l’utilizzo di programmi open source gratuiti dedicati al solo scopo di comprimere le immagini. Oltre a convertire il file da png a jpg questi programmi assegnano anche le nuove dimensioni di larghezza e altezza alle immagini che per il web non dovrebbero superare i 1024px di larghezza a meno che vengano utilizzate per slide o sfondi a schermo intero. In questo caso sono necessari almeno 1920 px di larghezza.
Riducendo le dimensioni della larghezza si ottiene una riduzione notevole dell’immagine originale.
Utilizzando wordpress è sufficiente caricare le immagini compresse e ridimensionate a 1024px o 1920px. Infatti per ogni immagine caricata vengono generate in automatico le varie versioni nei diversi formati miniatura, media, grande da selezionare per ogni utilizzo necessario.
I software gratuiti open source consigliati per queste operazioni sono Caesium per Windows e ImageOptim per Mac.
Caesium
Caesium è il compressore d’immagini consigliato per sistemi operativi Windows. Download leggero e immediato.
Dopo aver scaricato il programma e completata l’installazione cliccando due volte sul file eseguibile salvato sul proprio computer è possibile avviare il software.
L’utilizzo è molto semplice e intuitivo. Cliccando sul pulsante Aggiungi è possibile caricare una o più immagini contemporaneamente. Le immagini si possono caricare anche per trascinamento dalla cartella del computer alla schermata del programma.
Una volta caricata l’immagine da comprimere bisogna selezionarla nella schermata del programma visualizzando le due anteprime corrispondenti a prima e dopo la compressione.
Nella maschera in basso del programma è possibile impostare i valori di compressione ideali che verranno utilizzati per le successive compressioni. I valori ideali sono una qualità di 60 in formato JPG. Selezionare la casella ‘Ridimensiona’ e ‘Mantieni il Rapporto’ in modo che quando si imposta una larghezza ideale di 1024px viene ridimensionata automaticamente anche l’altezza.
Nel caso ci si trovi nella condizione di avere migliaia di articoli e immagini non ottimizzate è possibile scaricarle tutte sul proprio computer e trascinarle nella schermata del compressore per applicare la stessa compressione e ridimensionamento. Oppure per siti wordpress è possibile avvalersi di un plugin che comprime tutte le immagini in base alle opzioni impostate. Un plugin utile per questo tipo di funzione è ShortPixel Image Optimizer che è gratuito senza limiti di dimensioni e numero di file compressi con diverse funzionalità:
- esegue sia ridimensionamento che conversione da jpg a png
- funzione ‘bulk’ per eseguire compressione automatica di tutti i file o di cartelle specifiche
- compressione anche di file pdf oltre che d’immagini
Plugin wordpress
Anche il nome del file è un elemento molto importante da tenere in considerazione per l’ottimizzazione delle immagini dal punto di vista SEO in quanto contribuisce ad assegnare maggiore valore ai contenuti.
Scopri di più nel mio articolo Ottimizzazione SEO per immagini.
Rinominare file
Se nel vostro blog o sito web wordpress avete caricato delle immagini utilizzate negli articoli o pagine senza aver assegnato un nome significativo al file è possibile riassegnarlo con il plugin Media File Renamer. Questo plugin rinomina i file delle immagini selezionate assegnandogli un nome in base all’attributo ‘Titolo’ impostato nella libreria ‘Media’ sostituendo tutti gli spazi del testo con dei trattini. Questo parametro in wordpress corrisponde al titolo interno utilizzato per i template allegato e non all’attributo ‘title’ html.
L’attributo html ‘title’ per le immagini, anche questo utile a fini SEO, può essere assegnato nelle pagine e articoli creati con wordpress cliccando nell’editor sull’immagine dopo averla inserita e selezionando il pulsante ‘Edit’ a forma di matita.
Dalla schermata che si apre è possibile assegnare dalla sezione ‘Opzioni Avanzate’ tra gli altri parametri html disponibili il campo ‘Attributo title dell’immagine’ immettendo un testo descrittivo scritto in modo leggibile utilizzando le parole chiave del contenuto senza forzature.
Attributo title
In caso la versione wordpress utilizzata non mostrasse l’attributo ‘title’ è possibile ripristinarlo con un plugin come RESTORE IMAGE TITLE. Questo attributo è utilizzato spesso anche per vari effetti dinamici sulle immagini come per esempio la visualizzazione del Titolo sovrapposto all’immagine al passaggio del mouse.
Caricamento a scorrimento
Caricare solo le immagini visualizzate lasciando in stand-by le immagini che non rientrano nella visualizzazione dello schermo è una caratteristica molto apprezzata soprattutto per gli utenti che utilizzano connessioni mobili con banda limitata. Infatti questa impostazione alleggerisce il caricamento della pagina non caricando elementi non richiesti.
Cercando plugin con la parola chiave ‘lazyload’ è possibile trovare la soluzione più adatta alla proprie esigenze. Per esempio il plugin a3 Lazy Load.
Alcuni plugin multifunzione includono già questa funzionalità. Per esempio Jetpack by WordPress.com creato dagli stessi sviluppatori del cms wordpress.
