Come ottimizzare le immagini per migliorare la velocità della pagina e la SEO del tuo sito web

Un errore comune che ho riscontrato quando ho esaminato le pagine Web live e attualmente redatte per la loro strategia SEO SaaS è che le immagini sono scarsamente ottimizzate per la salute e la velocità del sito Web in generale. Abbiamo tutti sentito la citazione "Un'immagine vale più di mille parole". Anche se è un cliché, è vero e forse vale ancora di più.

Le immagini catturano la nostra attenzione e ci aiutano a relazionarci con ciò che stiamo vedendo. Costruiscono una storia e tendono a fare un'impressione molto più duratura di un semplice corpo di testo. Molte persone amano ottenere immagini d'archivio da siti di fotografia d'archivio privi di copyright come Unsplash.

Google dà la massima priorità alle pagine veloci. Ignorando i passaggi necessari per l'ottimizzazione dell'immagine, ti stai preparando per una battaglia in salita. Il numero di immagini aggiunte a una pagina influisce direttamente sul tempo di velocità di caricamento. Più immagini ha una pagina, più lenta diventerà la velocità di caricamento. In questa guida, esamineremo i 5 passaggi che eseguo durante l'ottimizzazione delle immagini per la velocità della pagina e i motori di ricerca.

Ritaglio e ridimensionamento dell'immagine

Per impostazione predefinita, la foto che abbiamo scaricato è molto grande e di alta qualità. Decidere quanto grande o quale risoluzione dovrebbe essere questa immagine è determinato dalla dimensione più grande che verrà visualizzata l'immagine. Le persone pensano di avere un'immagine di altissima qualità per impressionare i propri clienti o persino se stessi, ma non si rendono conto di questo impatto molto negativo. Quando decidi quale dimensione dovrebbe essere l'immagine, pensa alla dimensione più grande a cui verrà visualizzata l'immagine.

Non è necessario che le dimensioni dell'immagine siano 6000 x 6000 pixel se verrà utilizzata solo per una piccola immagine del profilo o per un primo piano che verrà visualizzata a 300 x 300 pixel. Dalla mia esperienza, trovo che l'immagine più grande sulla pagina sarà l'immagine dell'eroe in alto. Una dimensione sicura in cui rimanere mantenendo la qualità sarebbe renderla la dimensione standard ad alta definizione di 1920 x 1080 pixel.

Suggerimenti e trucchi: se un'immagine banner per un blog o una pagina web appare di qualità leggermente inferiore a quella che vorresti, considera l'applicazione di una sovrapposizione trasparente. In questo modo sembrerà parte del design e semplificherà la lettura di qualsiasi testo.

Di seguito, sto usando Figma per ridimensionare e ritagliare la mia immagine. Il processo è molto semplice in quanto tutto ciò che devi fare è trascinare e rilasciare quindi modificare l'immagine a tuo piacimento. Ecco due controlli necessari per modificare correttamente la tua immagine usando Figma su Windows.

• Maiusc + Trascina - Ridimensionerà l'intera immagine verso l'alto o verso il basso mantenendo lo stesso rapporto.
• Ctrl + Trascina: cambierà solo l'altezza o la lunghezza senza allungare l'immagine.

Esportazione come diversi tipi di file

È importante pensare al tipo di formato di file che si desidera utilizzare. Molti formati possono servire a scopi diversi. Ognuno ha il proprio set di pro e contro a seconda del punto di vista dell'utente. Qui ci sono solo alcuni dei più comuni che di solito vedo:

• PNG - Buono per progetti grafici o immagini di cui hai bisogno per vedere i piccoli dettagli di Questo ha il costo di una dimensione del file maggiore.
• JPEG - Per fotografie reali di persone e luoghi. Può essere compresso molto di più ma perde un po' più di informazioni poiché non hai bisogno di tanti dettagli in questi.
• SVG - Ottimo per icone e loghi in quanto possono essere ridimensionati senza perdere la qualità. Questo può funzionare solo sui file di immagine creati.
• WEBP - Una versione più recente di immagini che può sostituire PNG e JPEG. WEBP ha una qualità dell'immagine simile a entrambi pur essendo in grado di risparmiare il 25%-40% di spazio. L'unico aspetto negativo è che attualmente il browser Safari di Apple non lo supporta, quindi per caricare è necessario eseguire il backup di JPEG o PNG.
• GIF - Questi sono clip di video o animazioni che tendono a essere riprodotti in loop. Questi sono utili per catturare una scena o mostrare come può funzionare l'interfaccia di un prodotto. Questo articolo fornisce alcuni buoni esempi di come possono essere utilizzati. Poiché sono una sequenza animata di immagini, di solito avranno una dimensione del file più pesante rispetto a una singola immagine.

Mi piace usare JPEG ogni volta che posso poiché richiede il minor numero di dati, ma qui sto usando i PNG per dare un po' più di chiarezza agli screenshot. Come con WEBP, potrebbero esserci formati ancora più recenti, quindi è una buona pratica ricercare continuamente in che modo Google visualizza e classifica ciascuno di quelli disponibili per trovare la risposta più veloce e migliore per la tua pagina web. Ecco un link a una guida più approfondita sui tipi di immagine più popolari.

Usa un compressore di immagini

Il prossimo passo sarebbe cercare di ottenere il file che hai il più piccolo possibile comprimendo e riducendo le dimensioni del file. Passando a un compressore di immagini ed elaborando l'immagine, a volte possiamo ottenere una dimensione del file fino al 90% più piccola. Uno strumento davvero utile che mi piace usare si chiama Compressor. Utilizzando questo strumento puoi comprimere fino a 50 immagini al giorno con il suo piano gratuito.

Qui sto prendendo l'immagine che ho esportato e la sto trascinando direttamente nella sezione di rilascio dell'immagine. Dopo un paio di secondi, la nuova immagine è pronta per il download e circa meno di un decimo della dimensione originale. Puoi anche importare più immagini e scaricarle tutte in una volta come mostrato con l'opzione in basso.

"Pigro" vs "Desideroso" caricare le tue immagini

Ora che hai la tua immagine nel formato corretto e compressa alla dimensione corretta, potresti pensare di essere a posto, ma ci sono ancora un paio di cose da fare per assicurarti di fare. In molti modelli e siti Web, la velocità di caricamento dell'immagine è impostata per il caricamento in base all'impostazione predefinita del browser, il che può causare il caricamento simultaneo di tutte le immagini sulla pagina. La soluzione a questo è caricare lazy l'immagine.

Il caricamento "pigro" posticipa il caricamento dell'elemento finché non è visibile sulla pagina. Quando hai più di un paio di immagini, questo può migliorare le prestazioni del sito. L'opposto è il caricamento "Desideroso" che carica immediatamente l'elemento. Questo di solito si allinea con l'impostazione Web predefinita poiché non è stata impostata alcuna preferenza su quale immagine deve essere caricata per prima o per ultima.

Ecco un esempio nell'editor del blog HubSpot. Dopo aver navigato all'opzione avanzata per l'immagine inserita, possiamo vedere che possiamo impostarne l'impostazione di caricamento. Seleziona "Pigro" e premi applica. L'immagine ora appare ogni volta che l'utente scorre molto più vicino ad essa e riduce quei preziosi tempi di caricamento.

Ricordati di aggiungere testo alternativo

L'ultima cosa da visitare è includere il testo alternativo nelle tue immagini. Ciò potrebbe non influire sulla velocità di caricamento della pagina, ma è sempre importante da considerare e aggiungere. Quando lasci la sezione vuota perdi molte opportunità per aumentare le classifiche delle tue SERP.

Una cosa importante da notare è che il testo alternativo spiega il "perché" dell'immagine in relazione al contenuto. È indicizzato da Google e letto ad alta voce da sintesi vocale per i non vedenti. Se stai solo inserendo una singola parola chiave nell'immagine che non spiega cosa sta succedendo, questo potrebbe non essere l'approccio migliore.

Qui ho aggiunto il testo alternativo nell'immagine. Sto basando la frase sulla salute della velocità della pagina SEO. Invece di includere solo la parola chiave, spiega anche come o qual è l'azione nell'immagine. Ho deciso di elaborare utilizzando la frase "Controllo della salute della velocità della pagina SEO utilizzando i grafici".

Questo è molto più informativo su ciò che l'immagine potrebbe riguardare l'indicizzazione di Google e garantisce una maggiore accessibilità ai non vedenti.

Esaminiamo i passaggi per la creazione/ottimizzazione delle immagini:

1. Trascina l'immagine in un editor di immagini come Figma per ritagliare e ridimensionare.
2. Esportalo come tipo di immagine appropriato (PNG, JPEG, SVG, WEBP, ecc.)
3. Portalo su un sito di compressione di immagini come Compressor o Image Resizer Online
4. Inserisci l'immagine compressa nel tuo contenuto come caricamento lento.
5. Aggiungi un testo alternativo che descriva le immagini sulla tua pagina.
6. Ora hai l'immagine perfetta per il tuo sito!
7. Dai un'occhiata a Google Search Console per verificare i tuoi incrementi di prestazioni.

Segui questi passaggi e sarai sulla buona strada per mantenere e ottimizzare le tue immagini per la SEO e accelerare la velocità della tua pagina, creando un'esperienza utente fantastica!