27 Apr Cos’è l’Hero Image di un Sito Web e Come Ottimizzarla nel 2026 (Addio Slider)
Cos’è l’hero image e perché è il primo giudice del tuo sito
L’hero image è la grande immagine o area visiva che occupa la parte alta della homepage — o di qualsiasi landing page — prima che l’utente faccia scroll. È la prima cosa che si vede, e spesso l’ultima se non funziona bene. In tre secondi l’utente ha già formato un’impressione del sito e deciso se continuare a leggere o tornare indietro. L’hero image è il principale responsabile di quel giudizio.
Non è solo un elemento estetico. È un segnale di credibilità, di posizionamento e di chiarezza del messaggio. Un’immagine sbagliata — troppo generica, troppo pesante, non coerente con il brand, o distratta da troppe animazioni — vanifica il lavoro fatto sul resto del sito. Eppure è ancora uno degli elementi più trascurati nelle revisioni SEO e UX delle PMI italiane.
Revolution Slider e gli slider infiniti: un capitolo chiuso
C’è una conversazione che in agenzia facciamo spesso con i clienti che hanno siti costruiti tra il 2012 e il 2020: lo slider con le tre o quattro slide animate che scorrono automaticamente. Revolution Slider, Slider Revolution, Smart Slider, Layer Slider — tutti strumenti che all’epoca sembravano lo standard del settore. Nel 2026, quella scelta pesa in modo misurabile sulle performance del sito.
Il problema non è estetico. Il problema è tecnico. Uno slider come Revslider carica una quantità significativa di JavaScript e CSS anche sulle pagine dove non è usato, se non è configurato con attenzione. Più importante: le immagini dello slider sono spesso la causa principale di un LCP (Largest Contentful Paint) alto. Google misura l’LCP come uno dei Core Web Vitals di ranking — se la tua slide principale impiega 4-5 secondi per caricarsi, stai pagando quel ritardo in posizionamento. La ricerca UX ha poi definitivamente archiviato l’idea che gli utenti leggano le slide dopo la prima: il tasso di clic sulle slide 2, 3 e 4 è statisticamente irrilevante. Quello spazio prezioso above the fold viene sprecato su contenuti che quasi nessuno vedrà.
La soluzione moderna è una hero section statica, con un’unica immagine ottimizzata, un headline chiaro e una call-to-action visibile. Semplice, veloce, misurabile. Se vuoi movimento, un sottile effetto CSS parallax o un video in loop senza audio e con autoplay/muted è molto più efficace — e molto più leggero — di uno slider JavaScript.
Le caratteristiche di una hero image efficace nel 2026
Il formato giusto dipende dal contesto, ma ci sono principi che valgono sempre. L’immagine deve essere in formato WebP o AVIF — non JPEG o PNG pesante. Un’immagine JPEG da 2 MB in WebP ottimizzato pesa 150-300 KB con qualità visivamente identica. Su una connessione mobile media italiana (intorno ai 30 Mbps in 4G), quella differenza si traduce in decimi di secondo di LCP — che su Google contano.
La dimensione deve corrispondere al contenitore reale. Servire un’immagine da 3000 pixel di larghezza su un container che ne mostra 1200 è uno spreco computazionale e di banda. Usa il tag HTML srcset e l’attributo sizes per servire versioni diverse dell’immagine in base alla larghezza del viewport — i browser moderni scelgono automaticamente quella giusta. L’attributo loading="eager" sull’hero image (il contrario del lazy loading usato per le immagini sotto the fold) garantisce che venga caricata con priorità massima.
Il contenuto visivo deve comunicare in modo immediato cosa fa l’azienda. Foto stock generiche di persone sorridenti davanti a schermi non aggiungono informazione e non creano fiducia. Una foto reale del team, del prodotto, del servizio in azione, o un’illustrazione originale legata al brand ha un impatto molto maggiore. Il testo sovrapposto all’immagine — headline e sottotitolo — deve essere leggibile senza zoom su mobile, con contrasto sufficiente rispetto allo sfondo.
Ottimizzazione tecnica: cosa fare concretamente
Il flusso ottimale per gestire l’hero image su WordPress nel 2026 è questo. Parti da un’immagine sorgente di qualità in formato PNG o TIFF. Ridimensionala alla larghezza massima reale del contenitore (tipicamente 1440 o 1920 px). Convertila in WebP con qualità 80-85 — strumenti come Squoosh, ImageOptim o la conversione batch via cwebp da terminale producono risultati eccellenti. Su WordPress, plugin come Imagify o ShortPixel gestiscono la conversione automatica all’upload e il servizio condizionale del formato corretto in base al browser.
Nel codice HTML o nel template del tema, assicurati che l’immagine hero sia dichiarata con fetchpriority="high" — un attributo che istruisce il browser a darle priorità massima nel processo di caricamento. Se usi Elementor, questo si ottiene dall’impostazione Custom Attributes nella sezione avanzata del widget immagine. Se usi il Site Editor di WordPress, puoi aggiungere l’attributo tramite l’editor HTML del blocco. Questo singolo intervento può ridurre l’LCP di 0,3-0,8 secondi su siti con immagini hero non ottimizzate.
Hero video: quando funziona e quando no
Il video hero — un loop breve senza audio che si riproduce in autoplay nella sezione sopra the fold — può essere molto efficace per certi settori: agenzie creative, hotel di lusso, brand lifestyle, studi di architettura. La regola è che il video deve essere breve (10-20 secondi al massimo), compresso in MP4 con codec H.264 o H.265, servito con attributi autoplay muted loop playsinline, e con un’immagine poster di fallback per chi ha una connessione lenta o ha disabilitato l’autoplay.
Il peso del video è il problema principale. Un video hero non ottimizzato può pesare 10-20 MB, distruggendo qualsiasi ottimizzazione sulle altre risorse della pagina. L’obiettivo è stare sotto i 5 MB. Gli strumenti per la compressione video come Handbrake o ffmpeg permettono di raggiungere questo target mantenendo una qualità visiva accettabile a 1080p. Per la maggior parte delle PMI italiane, un’immagine hero ben ottimizzata rimane la scelta più sensata: più veloce, più facile da mantenere, e con performance SEO prevedibili.