Come utilizzare le immagini WebP in WordPress (3 metodi)

Siamo consapevoli dell’importanza di bilanciare la qualità delle immagini con tempi di caricamento più rapidi. Molti proprietari di siti web ci chiedono quale sia il modo migliore di utilizzare le immagini WebP per raggiungere questo obiettivo.

Le immagini WebP sono un formato moderno che offre una migliore compressione delle immagini, riducendo le dimensioni dei file senza sacrificare significativamente la qualità delle immagini. In questo modo il sito web viene caricato più velocemente e si salva la larghezza di banda.

Il problema è che WordPress non supporta nativamente l’uploader o la visualizzazione di immagini WebP.

In questo articolo vi mostreremo come utilizzare facilmente le immagini WebP in WordPress.

Che cos’è WebP?

WebP è un nuovo formato di file per le immagini da utilizzare sul Web. Utilizzando il formato WebP, le immagini avranno dimensioni inferiori del 25-34% rispetto a PNG e JPEG, senza perdere in qualità.

Se le immagini rallentano il vostro sito web, la conversione in formato WebP può migliorare i punteggi dei test sulla velocità di caricamento delle pagine.

Per saperne di più sulla compressione delle immagini, consultate la nostra guida su come ottimizzare le immagini per il web.

Poiché WebP è un nuovo formato di file, non è ancora supportato da tutti i browser. Tuttavia, la maggior parte dei browser moderni, come Google Chrome, Firefox e Microsoft Edge, supporta le immagini WebP.

Dovreste usare le immagini WebP in WordPress?

Le immagini WebP possono contribuire a velocizzare il vostro sito WordPress. È una best practice consigliata da utilizzare insieme a un plugin di caching per WordPress, a un CDN e altro ancora.

Da WordPress 5.8, WordPress supporta le immagini WebP per impostazione predefinita. Ciò significa che potete salvare e caricare le immagini WebP sul vostro sito WordPress senza utilizzare un plugin.

Detto questo, potreste comunque utilizzare un plugin per la compressione delle immagini sul vostro sito WordPress. Se molti dei vostri utenti utilizzano browser non supportati, dovreste prendere in considerazione l’utilizzo di un plugin di compressione delle immagini.

I plugin di compressione delle immagini possono convertire le immagini esistenti nel formato WebP e visualizzare le immagini JPEG o PNG come opzione di ripiego sui browser che non supportano ancora WebP.

Se il vostro sito utilizza molte immagini e queste rallentano il vostro blog WordPress, dovreste assolutamente considerare l’utilizzo di immagini WebP.

Ecco come utilizzare le immagini WebP in WordPress. Vi mostreremo diversi metodi in modo che possiate scegliere quello che funziona meglio per voi:

Video tutorial

Subscribe to WPBeginner

Se preferite le istruzioni scritte, continuate a leggere.

Metodo 1: Utilizzare le immagini WebP in WordPress con EWWW Optimizer

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

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

Dopo l’attivazione, accedere alla pagina Impostazioni ” EWWW Image Optimizer per configurare le opzioni del plugin. Verrà visualizzata una procedura guidata di configurazione, ma è possibile fare clic sul link “So cosa sto facendo” per uscire dalla procedura guidata.

Nella schermata successiva, si vedranno alcune opzioni del plugin.

Scorrere verso il basso e selezionare la casella accanto all’opzione “Conversione WebP”.

Quindi, fare clic sul pulsante “Salva modifiche” per memorizzare le impostazioni.

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

È necessario fare clic sul pulsante “Insert Rewrite Rules” (Inserisci regole di riscrittura) e il plugin cercherà automaticamente di inserire queste regole di riscrittura nel 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 questo caso, è necessario copiare le regole di riscrittura dalla pagina delle impostazioni del plugin e incollarle manualmente in fondo al file .htaccess.

Una volta terminato, tornate alla pagina delle impostazioni del plugin e fate di nuovo clic sul pulsante “Salva modifiche”. Se l’immagine di anteprima diventa verde, significa che avete attivato con successo la trasmissione di immagini WebP sul vostro sito WordPress.

In alternativa, è possibile scegliere i metodi JS WebP Rewriting o WebP Rewriting come opzioni di consegna del WebP. Questi metodi sono un po’ più lenti del metodo .htaccess, ma permettono di svolgere il lavoro.

Convertire in massa le vecchie immagini in versioni WebP

EWWW Image Optimizer consente di convertire facilmente i file immagine precedentemente caricati in immagini WebP. È sufficiente andare alla pagina Media ” Libreria e passare alla visualizzazione dell’elenco.

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

In questo modo, sarà possibile selezionare rapidamente un gran numero di immagini per l’ottimizzazione in blocco. Quindi, fare clic sulla casella di controllo Seleziona tutto in alto per selezionare tutte le immagini.

Quindi, fare clic sul menu a discesa “Azioni in blocco” e selezionare l’opzione “Ottimizzazione in blocco”. Infine, fare clic sul pulsante “Applica”.

Nella schermata successiva, il plugin offre l’opzione di saltare la compressione delle immagini e di convertirle solo in WebP. È possibile selezionare questa opzione se le immagini sono già ottimizzate.

Quindi, fare clic sul pulsante “Scansione di immagini non ottimizzate” per continuare. Il plugin vi mostrerà il numero di immagini trovate e potrete fare clic sul pulsante Ottimizza per procedere.

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

Verifica della consegna delle immagini WebP

Una volta ottimizzate le immagini, si può andare su un post del blog contenente diverse immagini.

Passare il mouse su qualsiasi immagine e fare clic con il tasto destro del mouse per aprire l’immagine in una nuova scheda.

In questo modo si aprirà l’immagine in una nuova scheda del browser.

Nella barra degli indirizzi si noterà che ha un’estensione .webp.

Se il plugin non è in grado di servire l’immagine WebP, è possibile tornare alla pagina delle impostazioni del plugin. Da qui, è possibile modificare l’opzione di distribuzione WebP con i metodi “JS WebP Rewriting” o “WebP Rewriting”.

Metodo 2: Utilizzare immagini WebP in WordPress con Imagify

Imagely è un plugin per l’ottimizzazione delle immagini di WordPress creato da chi ha creato WP Rocket, il miglior plugin per la cache di WordPress. Permette di ottimizzare e convertire facilmente le immagini in formato WebP. Per saperne di più, consultate la nostra recensione di Imagify.

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

Dopo l’attivazione, è necessario visitare la pagina Impostazioni ” Imagify per configurare le impostazioni del plugin. Da qui, fare clic sul pulsante “Crea una chiave API gratuita” per continuare.

Vi verrà chiesto di inserire un indirizzo e-mail aziendale. Dopodiché, è possibile controllare la posta in arrivo per ricevere un’e-mail contenente la chiave API. Copiate e incollate la chiave nella pagina delle impostazioni del plugin e fate clic sul pulsante “Salva modifiche”.

Successivamente, è necessario scorrere verso il basso fino alla sezione Ottimizzazione. È necessario selezionare le opzioni accanto alle voci “Crea versioni webp delle immagini” e “Visualizza le immagini in formato webp sul sito”.

Di seguito, è possibile 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 si utilizza un servizio CDN. Il metodo dei tag funziona anche con i CDN, ma potrebbe rompere alcuni temi di WordPress.

È possibile scegliere uno dei due che funziona bene per il proprio sito. Dopodiché, fare clic sul pulsante “Salva e vai a Bulk Optimizer” in basso.

Si accede così alla pagina Media ” Ottimizzazione massiva.

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

Se le immagini sono molte, l’operazione potrebbe richiedere un po’ di tempo. Non preoccupatevi, potete chiudere la pagina e tornarci più tardi, perché la chiusura della pagina non interrompe il processo di ottimizzazione delle immagini.

Test delle immagini WebP in WordPress

Una volta terminata l’ottimizzazione, è possibile visitare una pagina o un post contenente alcune immagini. Passare il mouse su un’immagine e fare clic con il pulsante destro del mouse per selezionare “Apri immagine in una nuova scheda”.

In questo modo si aprirà l’immagine in una nuova scheda del browser.

Sarà possibile vedere l’estensione .webp nella barra degli indirizzi.

Metodo 3: Utilizzare le immagini WebP in WordPress con SG Optimizer

Questo metodo è consigliato se siete utenti di SiteGround.

SiteGround è una delle migliori società di hosting WordPress. Offre ai suoi utenti un plugin gratuito SG Optimizer, che consente di ottimizzare le prestazioni di WordPress. Include anche la possibilità di ottimizzare le immagini di WordPress.

Per prima cosa, è necessario installare e attivare il plugin SG Optimizer.

Dopo l’attivazione, il plugin aggiunge una nuova voce di menu alla barra laterale dell’amministrazione, denominata “SG Optimizer”. Facendo clic su di essa si accede alla pagina delle impostazioni del plugin.

Da qui è possibile attivare le impostazioni di caching se si desidera utilizzare il sistema di caching integrato di SiteGround.

Successivamente, è possibile passare alla scheda Ottimizzazione media e attivare l’opzione ‘Genera copie WebP di nuove immagini’.

In basso, viene visualizzata l’opzione “Generazione massiva di file WebP”.

Facendo clic sul pulsante di attivazione dell’opzione, si avvia la generazione di copie WebP per tutti i file immagine presenti nella libreria multimediale di WordPress.

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

Verifica delle immagini WebP in SG Optimizer

Per verificare se il vostro sito web serve immagini WebP, dovete aprire una pagina del vostro sito con alcune immagini.

Quindi, fare clic con il pulsante destro del mouse e selezionare lo strumento Ispezione. Si aprirà la console degli sviluppatori, dove si dovrà passare alla scheda Rete.

Da qui, fare clic sulla scheda ‘img’ e ricaricare la pagina (CTRL+R su Windows e Command+R su Mac). Quando il sito web viene ricaricato, si vedranno tutte le immagini caricate nella console degli sviluppatori.

Guide esperte sull’uso delle immagini in WordPress

Ora che sapete come utilizzare le immagini WebP in WordPress, potreste voler consultare altre guide per l’utilizzo delle immagini sul vostro sito WordPress:

• Come aggiungere correttamente le immagini in WordPress (passo dopo passo)
• Come aggiungere immagini in primo piano o miniature dei post in WordPress
• WebP vs. PNG vs. JPEG: il miglior formato di immagine per WordPress
• Come ottimizzare le immagini per le prestazioni sul Web senza perdere la qualità
• I migliori plugin per la compressione delle immagini di WordPress a confronto
• Strumenti per creare immagini migliori per i vostri post sul blog
• Ottimi plugin WordPress per la gestione delle immagini (aggiornato)
• Testo alternativo dell’immagine e titolo dell’immagine in WordPress: qual è la differenza?
• Dove WordPress memorizza le immagini sul vostro sito?
• Come caricare facilmente le immagini in WordPress

Speriamo che questo articolo vi abbia aiutato a capire come utilizzare le immagini WebP in WordPress. Potreste anche voler consultare la nostra guida su come creare una newsletter via e-mail e le nostre scelte di esperti sui migliori servizi telefonici aziendali per il vostro sito web.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.