Le immagini possono rendere una pagina chiara e credibile, ma spesso costituiscono la parte più pesante del caricamento. Ridurle senza criterio produce fotografie rovinate; caricarle originali costringe invece ogni dispositivo a scaricare dati che non può usare.
L’ottimizzazione corretta decide funzione, dimensioni, formato, compressione, varianti responsive e priorità. Il risultato deve essere valutato visivamente e misurato sulla pagina reale.
1. Eliminare ciò che non comunica
Ogni immagine dovrebbe spiegare, dimostrare o rafforzare un’informazione. Slider, sfondi e fotografie decorative aggiungono richieste e distrazione. Prima di comprimere, chiedi se la risorsa è necessaria e se può essere sostituita da testo, CSS o un elemento vettoriale.
Evita di nascondere informazioni importanti dentro un’immagine: testo e controlli devono rimanere leggibili, selezionabili e accessibili.
2. Ridimensionare prima del caricamento
Un file largo migliaia di pixel non serve in un contenitore piccolo. Esporta la dimensione massima coerente con layout e densità dello schermo, conservando l’originale fuori dalla libreria pubblica quando serve per future lavorazioni.
Non affidarti soltanto al CSS: ridurre visivamente un’immagine non riduce automaticamente i byte scaricati. WordPress genera dimensioni intermedie, ma tema e markup devono selezionarle correttamente.
3. Scegliere il formato adatto
JPEG è adatto alle fotografie; PNG può essere utile per trasparenza o grafica che richiede precisione; SVG funziona per loghi e illustrazioni vettoriali controllate. Formati moderni come WebP e AVIF possono ridurre il peso, ma richiedono compatibilità, fallback e una pipeline affidabile.
Non convertire tutto nello stesso formato. Una scelta efficace dipende da contenuto, trasparenza, animazione, qualità richiesta e supporto dei browser.
4. Applicare una compressione verificata
La compressione lossy riduce più dati accettando una perdita controllata; quella lossless conserva le informazioni ma può risparmiare meno. Prova diversi livelli osservando dettagli, gradienti, testi e incarnati.
Automatizza il processo quando possibile, ma conserva limiti e controlli. Ricomprimere più volte un JPEG può accumulare artefatti. Parti sempre dalla sorgente migliore.
5. Servire immagini responsive
Con srcset e sizes il browser può scegliere una variante coerente con viewport, layout e densità. WordPress supporta immagini responsive dal 4.4, ma dimensioni personalizzate o markup del tema possono richiedere verifiche.
Un telefono non dovrebbe scaricare la stessa risorsa prevista per un grande monitor. Configura le dimensioni realmente usate e controlla nella rete del browser quale file viene richiesto.
6. Usare art direction quando cambia il taglio
Una fotografia panoramica può diventare incomprensibile se ridotta. L’elemento picture consente varianti con tagli diversi in base alle condizioni. Non è soltanto un risparmio: mantiene visibile il soggetto importante.
Prepara i tagli con intenzione, evitando ritagli automatici che eliminano persone, prodotti o dettagli informativi.
7. Caricare in ritardo solo ciò che è fuori vista
Il lazy loading è utile per immagini sotto la prima schermata. Non applicarlo indiscriminatamente alla risorsa principale: ritardare l’immagine più importante può peggiorare la percezione del caricamento.
Gallerie e contenuti caricati con JavaScript devono rimanere raggiungibili e indicizzabili. Verifica comportamento con connessioni lente e script disabilitati quando pertinente.
8. Evitare spostamenti del layout
Indica larghezza e altezza, oppure un rapporto d’aspetto stabile, affinché il browser riservi spazio prima del download. Senza dimensioni, testi e pulsanti possono spostarsi mentre la pagina si compone.
Questo principio diventerà centrale nel Cumulative Layout Shift dei Core Web Vitals dal 2020, ma migliora l’esperienza anche nel contesto 2019.
9. Scrivere ALT in base alla funzione
L’alternativa testuale descrive l’informazione utile nel contesto, non una lista di keyword. Per immagini decorative può essere corretto un ALT vuoto; per pulsanti e link deve comunicare la funzione.
Non iniziare automaticamente con “immagine di”. Evita di duplicare la didascalia se non aggiunge significato e non usare il nome del file come descrizione.
10. Misurare pagina e dispositivo
Controlla peso totale, richieste, dimensione trasferita, risorsa principale e varianti selezionate. PageSpeed Insights e strumenti del browser aiutano a trovare immagini sovradimensionate, ma la qualità finale va valutata anche a occhio.
Misura pagine rappresentative e dati reali quando disponibili. Un plugin può comprimere i nuovi upload ma lasciare immagini vecchie, CSS di sfondo o risorse esterne non ottimizzate.
LBCOMPANY ottimizza immagini e prestazioni WordPress per aziende in tutta Italia. Leggi come velocizzare WordPress, approfondisci il Mobile First e consulta i servizi LBCOMPANY.
Domande frequenti sull’ottimizzazione delle immagini
Qual è il peso ideale di un’immagine?
Non esiste un valore unico: dipende da dimensioni, funzione, qualità e pagina. Va ridotta al minimo senza danno percepibile.
WebP è sempre migliore di JPEG?
Spesso è più efficiente, ma il risultato dipende dal contenuto, dalla codifica e dalla compatibilità della pipeline.
WordPress crea automaticamente immagini responsive?
Genera varianti e markup responsive, ma tema, dimensioni personalizzate e immagini di sfondo devono essere verificati.
Devo usare lazy loading su tutte le immagini?
No. È utile sotto la prima schermata; può ritardare la risorsa principale se applicato senza criterio.
L’ALT deve contenere la keyword?
Deve descrivere funzione o informazione nel contesto. Inserire keyword non pertinenti riduce qualità e accessibilità.
Un plugin risolve tutte le immagini pesanti?
No. Può comprimere file, ma dimensioni, selezione responsive, background, priorità e sorgenti esterne richiedono controlli.
Le immagini rallentano il sito?
Analizziamo formati, dimensioni, caricamento e pagine critiche per ridurre peso senza perdere qualità.