Di Sotirios Terzis ·
Le immagini aiutano la ricerca e le richieste quando sono reali, descritte con un testo e abbastanza leggere da caricarsi in fretta. Usa le tue foto quando puoi, scrivi un breve testo alternativo per ogni immagine che ha un significato, comprimi i file e imposta le dimensioni delle immagini così la pagina non salta. Le foto stock pesanti e senza descrizione fanno l'opposto.
Punti chiave
- Foto reali del tuo lavoro, del tuo team e dei tuoi locali danno ai visitatori prove che le immagini stock generiche non possono dare.
- Il testo alternativo descrive cosa mostra un'immagine, per gli screen reader e per i motori di ricerca.
- Le immagini sovradimensionate sono una causa comune di pagine lente, quindi ridimensiona e comprimi prima di caricarle.
- Dare a ogni immagine larghezza e altezza evita che il layout si sposti durante il caricamento.
- Non usare il caricamento differito per l'immagine principale in cima alla pagina.
Perché le foto reali battono quelle stock
I visitatori cercano prove che un'attività sia ciò che dice di essere. Una foto del tuo vero laboratorio, ufficio, team o di un progetto finito dà questa prova. Una foto stock di persone sorridenti davanti a un portatile non ne dà nessuna, e i visitatori l'hanno già vista altrove. Le foto reali non hanno bisogno di un servizio professionale per essere utili. Buona luce, uno sfondo pulito e una messa a fuoco nitida con uno smartphone recente bastano per la maggior parte delle piccole imprese.
Questo si collega alle prove che descriviamo nel nostro articolo sulla homepage per studi professionali.
Testo alternativo: cosa scrivere
Il testo alternativo è una breve descrizione nel codice della pagina. Gli screen reader lo leggono ad alta voce a chi non vede l'immagine, e i motori di ricerca lo usano per capire cosa mostra. Descrivi il contenuto in modo semplice: «Tavolo da pranzo in rovere con sei sedie in uno showroom luminoso» è meglio di «tavolo» o di una fila di parole chiave. Se un'immagine è puramente decorativa, dalle un attributo alt vuoto così gli screen reader la saltano.
Non riempire il testo alternativo di parole chiave. Scrivi per una persona che non può vedere l'immagine. Le immagini accessibili fanno parte anche della nostra checklist sull'Atto europeo sull'accessibilità.
Nomi dei file, formati e dimensioni
Dai nomi descrittivi ai file prima di caricarli, come «tavolo-pranzo-rovere-showroom.jpg» e non «IMG_4821.jpg». Ti aiuta a gestire i file e dà ai motori di ricerca un indizio in più.
Per le dimensioni, ridimensiona l'immagine alla misura più grande a cui verrà mostrata. Una foto presa direttamente dallo smartphone può essere larga diverse migliaia di pixel, molto più di quanto serva a qualsiasi layout. Poi comprimila e usa un formato moderno come WebP o AVIF, che di solito pesano meno del JPEG a parità di qualità. La maggior parte delle piattaforme web moderne può fare la conversione per te.
Spostamenti del layout e caricamento
Se una pagina non sa quanto sarà grande un'immagine, il testo salta in basso quando l'immagine compare. Imposta larghezza e altezza su ogni immagine, oppure riserva il suo spazio nel layout. Google conta questi salti come Cumulative Layout Shift, e un buon punteggio è 0,1 o meno.
Le immagini più in basso nella pagina possono caricarsi solo quando il visitatore ci si avvicina scorrendo, il cosiddetto lazy loading. L'immagine principale in cima alla pagina, che spesso è l'elemento del Largest Contentful Paint, deve caricarsi subito. La soglia di Google per un buon Largest Contentful Paint è di 2,5 secondi o meno. La nostra guida alla velocità del sito approfondisce il tema.
Immagini nelle pagine locali e di servizio
Una pagina su un servizio diventa più convincente con foto di quel servizio già realizzato. Se lavori in una zona precisa, aggiungi foto che la mostrino: i locali, il furgone, lavori finiti nella regione. Nomina il luogo nella didascalia quando è vero. La nostra guida alla SEO locale elenca gli altri punti in cui mantenere coerenti le tue informazioni.
Un controllo veloce del tuo sito
Apri le tue tre pagine più importanti e controlla quattro cose. Le foto sono tue? Ogni immagine significativa ha una descrizione? I file hanno dimensioni ragionevoli? La pagina resta ferma mentre si carica? Sistema prima le immagini più pesanti.
Se vuoi un secondo paio d'occhi, il nostro audit gratuito del sito include controlli su velocità e immagini, e una call conoscitiva gratuita di 30 minuti è il momento per parlare di un piano fotografico. I nostri lavori mostrano come presentiamo progetti reali.
Altro dal journal
Scegliere i font per il tuo sito: leggibilità, personalità e velocità
Un font definisce come «suona» la tua attività prima che qualcuno legga una parola. Come sceglierne uno leggibile, adatto al tuo brand e che non rallenti la pagina.
Leggi →Brand 3 min di letturaLa psicologia del colore nel web design: cosa conferma la ricerca e cosa no
Il blu crea fiducia e il rosso fa vendere? Uno sguardo realistico alle associazioni dei colori e alle scelte che aiutano in modo misurabile un sito aziendale.
Leggi →HAI UN PROGETTO IN MENTE?
Raccontaci cosa stai costruendo — oppure inizia con un audit gratuito del sito che hai.