Come usare le immagini WebP in WordPress (3 metodi)

Noi di WPBeginner valutiamo costantemente nuove tecnologie che possono aiutare gli utenti di WordPress a creare siti web più veloci e performanti. Le immagini WebP sono sotto la nostra attenzione da un po' di tempo e, sebbene non le abbiamo ancora implementate sul nostro sito, siamo consapevoli del potenziale di questo formato.

Ciò che rende WebP interessante è la sua capacità di ridurre le dimensioni dei file immagine fino al 35% senza alcuna perdita di qualità percepibile. Abbiamo visto siti che utilizzano WebP ottenere miglioramenti significativi nella velocità di caricamento e nell'engagement degli utenti.

Sulla base della nostra ricerca e del nostro processo di test, ti mostreremo come utilizzare le immagini WebP in WordPress per beneficiare dei vantaggi di velocità di questo moderno formato di immagine.

Cos'è WebP?

WebP è un moderno formato di immagine sviluppato da Google specificamente per l'uso sul web. Ciò che lo rende speciale è la sua tecnologia di compressione superiore. Le immagini WebP sono tipicamente più piccole del 25-35% rispetto ai file JPEG e PNG, pur mantenendo una qualità visiva identica.

Per metterla in prospettiva, se la tua attuale immagine PNG è di 100KB, la stessa immagine in formato WebP sarebbe di circa 65-75KB senza alcuna differenza visibile nella qualità. Questa riduzione delle dimensioni si traduce direttamente in tempi di caricamento delle pagine più rapidi e in una migliore esperienza utente.

Il formato supporta la compressione sia con perdita che senza perdita, oltre a funzionalità come la trasparenza e l'animazione, rendendolo un sostituto versatile per molti formati tradizionali.

Puoi saperne di più sulla compressione delle immagini nella nostra guida su come ottimizzare le immagini per il web.

Supporto del browser: WebP è pronto per il tuo sito?

Attualmente, WebP gode di un forte supporto da parte dei browser con oltre il 95% di copertura globale. Tutti i principali browser, inclusi Chrome, Firefox, Safari (da iOS 14) e Edge, supportano pienamente le immagini WebP.

Il restante 5% è costituito principalmente da versioni obsolete dei browser che stanno rapidamente diminuendo in termini di utilizzo.

Dovresti usare immagini WebP in WordPress?

Per la maggior parte dei siti WordPress, la risposta è sì. L'implementazione di WebP può velocizzare significativamente il tuo sito WordPress e funziona perfettamente insieme ad altre ottimizzazioni delle prestazioni come i plugin di caching e le CDN.

Da WordPress 5.8, la piattaforma ha il supporto nativo per WebP, il che significa che puoi caricare e utilizzare immagini WebP direttamente senza plugin. Tuttavia, questo supporto di base non include la conversione automatica o le opzioni di fallback.

Per ottenere i migliori risultati, consigliamo di utilizzare un plugin dedicato all'ottimizzazione delle immagini. Questi plugin convertono automaticamente le tue immagini esistenti in formato WebP e servono versioni JPEG o PNG tradizionali alla piccola percentuale di utenti con browser non supportati.

WebP è particolarmente vantaggioso se il tuo sito è ricco di immagini (come blog di fotografia, negozi di e-commerce o portfolio) o se il tuo blog WordPress attualmente fatica con tempi di caricamento lenti a causa di immagini di grandi dimensioni.

Ecco come utilizzare le immagini WebP in WordPress. Ti mostreremo diversi metodi in modo che tu possa scegliere quello che funziona meglio per te:

1. Utilizzo di immagini WebP in WordPress con EWWW Optimizer
2. Utilizzo di immagini WebP in WordPress con Imagify
3. Utilizzo di immagini WebP in WordPress con SG Optimizer
4. Guide Esperte sull'Utilizzo di Immagini in WordPress

Tutorial video

Iscriviti a WPBeginner

Se preferisci istruzioni scritte, continua a leggere.

Metodo 1: Utilizzo di immagini WebP in WordPress con EWWW Optimizer

EWWW Image Optimizer è uno dei migliori plugin di compressione delle immagini per WordPress che ti permette di ottimizzare le tue immagini WordPress. Supporta anche le immagini WebP e può mostrarle automaticamente sui browser supportati. Vedi la nostra recensione di EWWW Image Optimizer per maggiori dettagli.

La prima cosa da fare è installare e attivare il plugin EWWW Image Optimizer. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, vai alla pagina Impostazioni » EWWW Image Optimizer per configurare le opzioni del plugin. Ti verrà presentato un wizard di configurazione, ma puoi fare clic sul link 'So cosa sto facendo' per uscire dal wizard.

Nella schermata successiva, vedrai una serie di opzioni del plugin.

Scorri verso il basso e seleziona la casella accanto all'opzione 'Conversione WebP'.

Dopodiché, fai clic sul pulsante 'Salva modifiche' per memorizzare le tue impostazioni.

Successivamente, devi scorrere verso il basso fino alla sezione Conversione WebP. Il plugin ti mostrerà ora alcune regole di riscrittura con un'immagine di anteprima rossa.

Devi fare clic sul pulsante 'Inserisci regole di riscrittura' e il plugin tenterà automaticamente di inserire queste regole di riscrittura nel tuo file .htaccess.

Se il plugin riesce ad aggiungere queste regole, l'anteprima dell'immagine rossa diventerà verde con il testo 'WebP'.

A volte, il plugin potrebbe non essere in grado di inserire le regole. In tal caso, devi copiare le regole di riscrittura dalla pagina delle impostazioni del plugin e incollarle manualmente in fondo al tuo file .htaccess.

Una volta terminato, torna alla pagina delle impostazioni del plugin e fai di nuovo clic sul pulsante 'Salva modifiche'. Se l'immagine di anteprima diventa verde, significa che hai abilitato correttamente la consegna delle immagini WebP sul tuo sito WordPress.

In alternativa, puoi scegliere tra i metodi di riscrittura JS WebP o riscrittura WebP come opzioni di consegna WebP. Questi sono un po' più lenti del metodo .htaccess, ma faranno il lavoro.

Converti in blocco le tue vecchie immagini in versioni WebP

EWWW Image Optimizer ti consente di convertire facilmente i tuoi file immagine caricati in precedenza in immagini WebP. Vai semplicemente alla pagina Media » Libreria e passa alla visualizzazione elenco.

Successivamente, devi fare clic sul pulsante ‘Opzioni schermo’ e modificare il ‘Numero di elementi per pagina’ a 999. Se hai più di 1000 immagini, queste appariranno nella pagina successiva.

In questo modo, sarai in grado di selezionare rapidamente un gran numero di immagini per l'ottimizzazione in blocco. Successivamente, fai clic sulla casella di controllo Seleziona tutto in alto per selezionare tutte le immagini.

Dopo di che, fai clic sul menu a discesa ‘Azioni in blocco’ e seleziona l'opzione ‘Ottimizza in blocco’. Infine, fai clic sul pulsante ‘Applica’.

Nella schermata successiva, il plugin ti darà l'opzione di saltare la compressione delle immagini e convertirle solo in WebP. Puoi selezionare questa opzione se le tue immagini sono già ottimizzate.

Dopo di che, fai clic sul pulsante ‘Scansiona immagini non ottimizzate’ per continuare. Il plugin ti mostrerà quindi il numero di immagini trovate, in modo da poter fare clic sul pulsante Ottimizza per procedere.

Le tue immagini verranno ora ottimizzate e EWWW Optimizer genererà versioni WebP per le tue immagini.

Testare la consegna delle immagini WebP

Una volta ottimizzate le tue immagini, puoi andare a un post del blog contenente diverse immagini.

Passa il mouse sopra un'immagine qualsiasi e fai clic con il pulsante destro del mouse per aprire l'immagine in una nuova scheda.

Questo aprirà l'immagine in una nuova scheda del browser.

Sarai in grado di vedere che ha un'estensione .webp nella barra degli indirizzi.

Se il plugin non è in grado di fornire l'immagine WebP, puoi tornare alla pagina delle impostazioni del plugin. Da qui, puoi cambiare l'opzione di consegna WebP ai metodi ‘Riscrittura JS WebP’ o ‘Riscrittura WebP’.

Metodo 2: Utilizzo di immagini WebP in WordPress con Imagify

Imagify è un plugin di ottimizzazione delle immagini per WordPress creato da chi sta dietro a WP Rocket, il miglior plugin di caching per WordPress. Ti permette di ottimizzare e convertire facilmente le immagini in formato immagine WebP. Dai un'occhiata alla nostra recensione di Imagify per saperne di più.

La prima cosa da fare è installare e attivare il plugin Imagify. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Dopo l'attivazione, devi visitare la pagina Impostazioni » Imagify per configurare le impostazioni del plugin. Da qui, fai clic sul pulsante 'Crea una chiave API gratuita' per continuare.

Ti verrà chiesto di inserire un indirizzo email aziendale. Successivamente, puoi controllare la tua casella di posta per un'email contenente la tua chiave API. Copia e incolla la chiave nella pagina delle impostazioni del plugin e fai clic sul pulsante 'Salva modifiche'.

Successivamente, devi scorrere verso il basso fino alla sezione Ottimizzazione. Lì devi selezionare le opzioni accanto a 'Crea versioni webp delle immagini' e 'Visualizza immagini in formato webp sul sito'.

Sotto, puoi scegliere tra due metodi di consegna per visualizzare le immagini WebP in WordPress. Il primo è il metodo .htaccess e il secondo è l'utilizzo di un tag.

Il metodo .htaccess è più veloce, ma non funziona se stai utilizzando un servizio CDN. Il metodo del tag funziona anche con le CDN, ma potrebbe causare problemi ad alcuni temi di WordPress.

Puoi scegliere uno dei due che funzioni bene per il tuo sito. Dopodiché, fai clic sul pulsante 'Salva e vai all'ottimizzatore di massa' in fondo.

Questo ti porterà alla pagina Media » Ottimizzazione di massa.

Il plugin inizierà automaticamente a ottimizzare tutte le tue immagini di WordPress in background.

Se hai molte immagini, questo potrebbe richiedere del tempo. Non preoccuparti, puoi chiudere la pagina e tornarci più tardi perché la chiusura della pagina non interromperà il processo di ottimizzazione delle immagini.

Test delle tue immagini WebP in WordPress

Una volta completata l'ottimizzazione, puoi visitare una pagina o un articolo contenente alcune immagini. Passa il mouse sopra un'immagine e fai clic destro per selezionare 'Apri immagine in una nuova scheda'.

Questo aprirà l'immagine in una nuova scheda del browser.

Sarai in grado di vedere l'estensione .webp nella barra degli indirizzi.

Metodo 3: Utilizzo di immagini WebP in WordPress con SG Optimizer

Questo metodo è consigliato se sei un utente SiteGround.

SiteGround è una delle migliori società di hosting WordPress. Offrono un plugin gratuito SG Optimizer ai loro utenti, che ti consente di ottimizzare le prestazioni del tuo WordPress. Include anche l'opzione per ottimizzare le immagini di WordPress.

Innanzitutto, devi installare e attivare il plugin SG Optimizer.

Dopo l'attivazione, il plugin aggiungerà una nuova voce di menu alla barra laterale di amministrazione etichettata 'SG Optimizer'. Cliccandoci sopra, verrai portato alla pagina delle impostazioni del plugin.

Da qui, puoi attivare le impostazioni di caching se desideri utilizzare il sistema di caching integrato di SiteGround.

Successivamente, puoi passare alla scheda Ottimizzazione Media e attivare l'opzione 'Genera copie WebP di nuove immagini'.

Sotto questa opzione, vedrai l'opzione 'Genera file WebP in blocco'.

Cliccando sul pulsante di attivazione/disattivazione di quell'opzione, inizierà la generazione di copie WebP per tutti i file immagine nella tua libreria multimediale di WordPress.

Una volta terminato, il tuo sito WordPress inizierà a servire immagini WebP.

Test delle immagini WebP in SG Optimizer

Per vedere se il tuo sito web sta servendo immagini WebP, devi aprire una pagina del tuo sito con alcune immagini.

Dopo di che, fai clic destro e seleziona lo strumento Ispeziona. Questo aprirà la console per sviluppatori, dove dovrai passare alla scheda Rete.

Da qui, fai clic sulla scheda 'img' e poi ricarica la pagina (CTRL+R su Windows e Command+R su Mac). Mentre il tuo sito web si ricarica, vedrai tutte le immagini caricate nella console per sviluppatori.

Guide Esperte sull'Utilizzo di Immagini in WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come utilizzare le immagini WebP in WordPress. Potresti anche voler consultare altre guide per l'utilizzo delle immagini sul tuo sito WordPress:

• Come aggiungere correttamente immagini in WordPress (passo dopo passo)
• Come aggiungere immagini in evidenza o miniature dei post in WordPress
• WebP vs. PNG vs. JPEG: Il miglior formato immagine per WordPress
• Come ottimizzare le immagini per le prestazioni web senza perdere qualità
• Confronto tra i migliori plugin per la compressione delle immagini di WordPress
• Strumenti per creare immagini migliori per i tuoi post del blog
• Ottimi plugin WordPress per la gestione delle immagini (aggiornato)
• Testo alternativo dell'immagine vs Titolo dell'immagine in WordPress – Qual è la differenza?
• Dove WordPress memorizza le immagini sul tuo sito?
• Come caricare facilmente immagini in modalità lazy in WordPress

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.