Volete utilizzare le immagini WebP in WordPress?
Le immagini WebP sono un formato di immagine moderno che offre una migliore compressione delle immagini riducendo le dimensioni dei file. In questo modo il sito web viene caricato più velocemente e si risparmia larghezza di banda.
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
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
MOINUDDIN WAHEED says
I was searching for some mechanism to convert my wordpress images to webp as I have seen a huge difference in the file size between a png and jpg images and webp images.
Having webp images will definitely help load the website faster. It will enhance the speed and performance of the website.
Thanks for the guide for converting existing wordpress images to webp format.
WPBeginner Support says
You’re welcome, glad you found our guide helpful
Admin
Jiří Vaněk says
Usually, I generate WebP images in an external editor. However, is it better practice to upload images in PNG format to the web and then generate them into WebP? I mean, is it better to have both formats for the browser to choose from or not? I’m concerned that someone might still be using an old browser that doesn’t support WebP, and then those images won’t display on my website for that user.
WPBeginner Support says
If you specifically want a fallback image then allowing plugins to convert the images for you would be the best option. Creating the WebP images with an editor would be the recommended way to save space on your site.
Admin
emir says
We used a few images from webp in WooCommerce, while backing up woocommerce on another server, the webp images were not transferred, we returned to jpeg format again.
WPBeginner Support says
Thank you for sharing your experience with webp images. If you reach out to the support for your backup tool, there are normally snippets or other ways to fix that issue!
Admin
Ashikur Rahman says
if i follow step 1 i would have old files in jpg/png format right? it will create a mess in upload folder. they have remove original file option, if i use that option. will it break my post images?
and most importantly what if i deactive/delete eww plugin will it also delete converted webp image also?
what should i do?
WPBeginner Support says
The plugin currently keeps the old images for the browsers that do not support WebP images and would only create the WebP image if it is a better size than the jpg/png. Removing the original would not break your site but if a majority of your visitors are using older browsers that don’t support WebP it could be broken for those users.
You would need to check with the plugin’s support for the current status of the created images when the plugin is removed.
Admin
Rebecca says
Hi I notice some plugins like wp-optimize allows an option to preserve exif data for webp conversion. Is this data necessary to keep?
Thanks in advance
WPBeginner Support says
It is not required but is useful for the sites that use that information.
Admin
Theo says
here’s what I’m looking for,
Very helpful
WPBeginner Support says
Glad our guide was helpful!
Admin
Kim says
Thanks so much for the quick reply!
WPBeginner Support says
Glad we could help
Admin
Kim says
This is a great tip, just 1 question…will I need to run the EWWW optimizer every time that I upload a new image (PNG, JPG) ?
WPBeginner Support says
The plugin will automate the process for new uploads
Admin