Il miglior formato immagine per WordPress è WebP per fotografie e grafica, con JPG e PNG come fallback automatici e SVG per loghi e icone. WordPress alimenta una quota enorme del Web e le immagini sono solitamente la cosa più pesante su qualsiasi pagina che serve, quindi il formato che carichi determina direttamente la velocità di caricamento del tuo sito e il suo posizionamento. WordPress gestisce molto per te, generando più dimensioni per ogni caricamento, ma non sceglierà il formato ideale a meno che tu non lo imposti. Questa guida illustra quale formato utilizzare, come WordPress elabora le immagini e le impostazioni e i plugin che mantengono veloce un sito WordPress.

Perché il formato dell’immagine è così importante su WordPress

In una tipica pagina WordPress, le immagini rappresentano la maggior parte dei byte scaricati da un visitatore. Ciò significa il formato immagine è il principale fattore di velocità della paginae la velocità della pagina viene inserita direttamente nei Core Web Vitals, che Google utilizza come segnale di ranking. Un tema può essere snello e l'hosting veloce, ma una pagina piena di JPG di grandi dimensioni verrà comunque sottoposta a scansione. Scegliere un formato efficiente e lasciare che WordPress offra versioni di dimensioni adeguate è l’ottimizzazione di maggiore impatto che la maggior parte dei siti può realizzare e non costa altro che una piccola configurazione.

Come WordPress gestisce i caricamenti di immagini

Quando carichi un'immagine, WordPress non si limita a memorizzarla. Esso genera automaticamente diverse copie ridimensionate, miniatura, media, grande e intera, in modo che possa avere una dimensione adeguata a ciascun contesto. Crea inoltre il markup reattivo srcset in modo che i browser scelgano la dimensione giusta per dispositivo. È potente, ma funziona con qualunque cosa carichi, quindi un originale da 5000 pixel produce copie gonfie di ogni dimensione. Caricare un originale di dimensioni ragionevoli ed efficientemente compresso significa che anche ogni versione generata è snella.

WebP: il default moderno

WebP è il formato su cui standardizzarsi. Produce file Dal 25 al 35% più piccolo di JPG con la stessa qualità, supporta la trasparenza come PNG ed è ora supportato da tutti i browser attuali. WordPress supporta i caricamenti WebP dalla versione 5.8 e con il plugin giusto può servire automaticamente le versioni WebP dei tuoi JPG e PNG esistenti, tornando all'originale per qualsiasi browser che non può visualizzarlo. Lo spostamento di una libreria multimediale su WebP è spesso la più grande vittoria in termini di velocità che un sito WordPress può ottenere.

JPG e PNG come fallback

WebP non significa abbandonare i formati più vecchi. JPG rimane il ripiego sicuro per le fotografie e PNG per la grafica che necessita di trasparenzae un buon plug-in di ottimizzazione mantiene gli originali in modo che qualsiasi browser privo del supporto WebP ottenga comunque un'immagine funzionante. In pratica carichi un JPG o PNG come al solito e il plugin genera e serve un WebP insieme ad esso, consegnando il file più piccolo dove può. Ciò ti consente di risparmiare su WebP senza alcun rischio di compatibilità, motivo per cui è la configurazione consigliata anziché solo WebP.

SVG per loghi e icone

Per il tuo logo e le icone dell'interfaccia, SVG batte qualsiasi formato raster. Lo è vettore, quindi rimane nitido a ogni densità dello schermo da un piccolo file. WordPress non consente caricamenti SVG per impostazione predefinita per motivi di sicurezza, poiché un SVG può contenere script, quindi lo abiliti con un plugin che disinfetta i file durante il caricamento. Una volta abilitato, un logo fornito come SVG è più piccolo e più nitido di un equivalente PNG e non necessita mai della generazione di più dimensioni. Prenota SVG per loghi, icone e grafica semplice, mai fotografie.

Scegliere le giuste dimensioni delle immagini

WordPress genera diverse dimensioni, ma sei tu a controllarle. Imposta il di grandi dimensioni e non più larghe dell'area dei contenuti, spesso tra 1200 e 1600 pixel, quindi le immagini a larghezza intera non sono inutilmente enormi. Il caricamento di una foto da 4000 pixel quando la colonna di contenuto è larga 800 pixel spreca larghezza di banda anche dopo il ridimensionamento di WordPress, perché la copia più grande generata è ancora sovradimensionata. Abbina le dimensioni delle immagini registrate al layout effettivo del tuo tema e ogni immagine offerta dal sito rimane proporzionata a dove appare.

Plugin di compressione e ottimizzazione

Un plugin di ottimizzazione automatizza l'intera pipeline. Opzioni popolari comprime ogni caricamento, genera versioni WebP e può eliminare i metadati non necessari, il tutto senza che tu tocchi un'immagine con mano. Molti ottimizzano anche la libreria esistente in blocco, convertendo anni di JPG e PNG accumulati in WebP in un solo passaggio. Alcuni scaricano l'elaborazione sui propri server per risparmiare il tuo hosting. Qualunque cosa tu scelga, l'effetto è lo stesso: le immagini arrivano automaticamente sulla pagina compresse e nel formato migliore, il che è molto più affidabile che ricordarsi di ottimizzarle manualmente.

Caricamento lento delle immagini

Il caricamento lento rinvia le immagini finché un visitatore non scorre vicino ad esse, quindi il caricamento iniziale di una pagina recupera solo ciò che è immediatamente visibile. WordPress abilita il caricamento lento per impostazione predefinita sulle immagini Below the Fold, aggiungendo automaticamente l'attributo di caricamento. Ciò accelera notevolmente la prima verniciatura su pagine ricche di immagini. L'unica eccezione è l'immagine over-the-fold più grande, spesso l'eroe, che dovrebbe caricarsi con entusiasmo in modo da non ritardare la metrica Largest Contentful Paint. La maggior parte dei plugin di ottimizzazione ti consente di escludere quell'immagine dal caricamento lento con un'unica impostazione.

Eliminazione dei metadati

Le fotografie contengono metadati, modello di fotocamera, posizione GPS, profili colore, di cui un sito Web raramente ha bisogno e che aggiungono peso. L'eliminazione di questi metadati riduce ogni file senza alcun cambiamento visibile e la maggior parte dei plugin di ottimizzazione lo fa come parte della compressione. La rimozione dei dati GPS ha anche un vantaggio in termini di privacy, poiché probabilmente non vorrai pubblicare il luogo in cui è stata scattata una foto. Gli unici metadati che vale la pena conservare sono il profilo colore se la precisione del colore è importante. Altrimenti, la sua rimozione equivale a una riduzione delle dimensioni invisibile e gratuita nell'intera libreria.

Una configurazione di immagine WordPress consigliata

Mettilo insieme e la configurazione è semplice. Registra le dimensioni delle immagini che corrispondono al layout del tuo tema. Installa un plug-in di ottimizzazione che comprime i caricamenti, genera e fornisce WebP con fallback ed elimina i metadati. Abilita SVG ripulito per il tuo logo e le tue icone. Mantieni il caricamento lento predefinito di WordPress, ma carica con entusiasmo la tua immagine hero. Quindi carica semplicemente gli originali di dimensioni ragionevoli e lascia che la pipeline faccia il resto. In questo modo, ogni immagine sul sito viene compressa, dimensionata correttamente e pubblicata automaticamente nel formato migliore e il sito rimane veloce man mano che la libreria cresce.

AVIF: il

passo successivo oltre WebP

AVIF è il formato più recente ed efficiente e anche WordPress lo supporta. Si comprime addirittura più piccolo di WebP, spesso ancora più piccolo del 20%., con la stessa qualità visiva, con supporto per trasparenza e colori ampi. Il supporto del browser è ora ampio ma leggermente indietro rispetto a WebP, quindi AVIF funziona meglio con un fallback WebP o JPG. Alcuni plugin di ottimizzazione possono generare automaticamente AVIF insieme a WebP. Per un sito che ricerca gli ultimi kilobyte da ogni immagine, vale la pena abilitare AVIF, anche se WebP rimane per ora il formato principale sicuro.

La mediateca e le pulizie

Con il passare del tempo la libreria multimediale di WordPress si riempie di immagini inutilizzate, vecchie versioni e duplicati che gonfiano i backup e ingombrano l'amministratore. L'eliminazione periodica dei supporti inutilizzati mantiene la libreria gestibile e i tuoi backup si indeboliscono. I plugin possono identificare le immagini non allegate ad alcun post o pagina, anche se vale la pena esaminarle prima di eliminarle, poiché alcune immagini vengono utilizzate in modi che la scansione non può rilevare. Una libreria multimediale ordinata è più facile da lavorare e, una volta ottimizzata, fornisce un quadro chiaro di quanto spazio occupano effettivamente le tue immagini.

Rigenerazione delle miniature dopo un cambio di tema

Quando cambi tema o modifichi le dimensioni delle immagini registrate, i caricamenti esistenti mantengono le dimensioni generate in precedenza. La rigenerazione delle miniature ricostruisce ogni dimensione dagli originali per corrispondere alle nuove dimensioni, cosa che un plug-in dedicato esegue in blocco nell'intera libreria. Salta questa operazione e le immagini potrebbero apparire allungate o pubblicate con dimensioni errate sotto il nuovo tema. Si tratta di un passaggio una tantum dopo qualsiasi modifica alle dimensioni dell'immagine e la sua esecuzione mantiene l'intera libreria coerente con il modo in cui il tema corrente visualizza effettivamente le immagini.

Consegna CDN per le immagini

Una rete per la distribuzione di contenuti accelera la distribuzione delle immagini fornendo file da un server vicino a ciascun visitatore. Una CDN memorizza nella cache le tue immagini nelle edge location di tutto il mondo, quindi un lettore lontano dal tuo host riceve comunque le immagini rapidamente. Molti plug-in di ottimizzazione e memorizzazione nella cache di WordPress integrano una CDN e alcune CDN specifiche per le immagini convertono e ridimensionano anche al volo, gestendo automaticamente formato e dimensioni. Per un sito con un pubblico globale o un traffico intenso, una CDN rimuove la consegna delle immagini come collo di bottiglia e allo stesso tempo riduce il carico del server di origine.

Immagini in evidenza e anteprime social

L'immagine in primo piano di ogni post svolge un doppio compito: appare nel tuo tema e, tramite i tag Open Graph, come anteprima quando il post viene condiviso. Imposta le immagini in primo piano a una dimensione adatta alle anteprime social, circa 1200 x 630, quindi i link condivisi appaiono nitidi nel feed. Un plug-in SEO di solito mappa automaticamente l'immagine in primo piano sul tag Open Graph. Ottenere questo risultato significa che ogni post condiviso mostra un'immagine pulita e di dimensioni corrette anziché una miniatura ritagliata o nulla.

Testare le prestazioni della tua immagine

Dopo l'ottimizzazione, misurare il risultato. Strumenti come PageSpeed Insights segnalano problemi relativi alle immagini, segnalando immagini di grandi dimensioni, formati moderni mancanti e immagini senza dimensioni che causano spostamenti del layout. Si collegano direttamente ai Core Web Vitals, quindi i loro consigli corrispondono a ciò che misura Google. L'esecuzione di un test prima e dopo un passaggio di ottimizzazione mostra esattamente quanto è diventata più veloce la pagina ed evidenzia eventuali immagini che ancora la trattengono. Tratta questi rapporti come una lista di controllo per spremere l'ultimo peso dalle tue immagini.

Errori comuni nelle immagini WordPress

Alcune abitudini rallentano silenziosamente i siti WordPress. Caricamento di immagini della fotocamera a piena risoluzione, saltando la compressione e non abilitando WebP sono i più comuni, ognuno dei quali lascia file di grandi dimensioni dove andrebbero bene quelli piccoli. Altri includono dimenticare di impostare le dimensioni dell'immagine, che causa uno spostamento del layout, e l'utilizzo di un plug-in lento e ricco di funzionalità che aggiunge più peso di quanto non risparmi. Ognuno di questi è facile da risolvere con la configurazione sopra. Evitandoli si mantiene un sito WordPress veloce mentre cresce, invece di vederlo rallentare anno dopo anno mentre la libreria si riempie.

Qual è il miglior formato immagine per WordPress?

WebP per foto e grafica, con fallback JPG e PNG e SVG per loghi. I file WebP sono dal 25 al 35% più piccoli dei JPG con la stessa qualità e tutti i browser attuali li supportano.

WordPress supporta WebP?

sì, da WordPress 5.8. Puoi caricare WebP direttamente e un plug-in di ottimizzazione può servire automaticamente le versioni WebP di JPG e PNG esistenti con fallback.

Posso caricare file SVG su WordPress?

Non per impostazione predefinita, per motivi di sicurezza. Un plugin che disinfetta gli SVG durante il caricamento lo abilita in modo sicuro, dopodiché i loghi e le icone serviti come SVG sono più piccoli e più nitidi di PNG.

Ho bisogno di un plugin per l'ottimizzazione delle immagini?

È fortemente raccomandato. Un plugin comprime i caricamenti, genera WebP ed elimina automaticamente i metadati, che è molto più affidabile dell'ottimizzazione manuale di ciascuna immagine.

Devo ridimensionare le immagini prima di caricarle su WordPress?

SÌ. Carica non più ampio dell'area dei tuoi contenuti, spesso da 1200 a 1600 pixel. Un originale enorme rende sovradimensionata anche ogni dimensione generata da WordPress.

WordPress supporta AVIF?

SÌ. AVIF comprime circa il 20% in meno rispetto a WebP con la stessa qualità e alcuni plugin di ottimizzazione lo generano automaticamente. Servilo con un fallback WebP o JPG per il supporto completo del browser.

Dovrei utilizzare un CDN per le immagini WordPress?

Per un sito globale o ad alto traffico, sì. Una CDN memorizza nella cache le immagini nelle edge location di tutto il mondo, in modo che i visitatori distanti li ricevano rapidamente e il caricamento venga scaricato dal tuo server di origine.

Perché le mie immagini appaiono errate dopo aver cambiato tema?

Perché i caricamenti esistenti mantengono le dimensioni generate in precedenza. La rigenerazione delle miniature ricostruisce ogni dimensione dagli originali per corrispondere alle dimensioni del nuovo tema.

Dovrei caricare le immagini WordPress in modo lento?

Sì, e WordPress abilita il caricamento lento per impostazione predefinita sulle immagini Below the Fold. Continua così, ma carica con entusiasmo la tua immagine principale dell'eroe sopra la piega in modo da non ritardare la pittura con contenuto più grande.