Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

Adding WebP images 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.

EWWW Wizard

Nella schermata successiva, si vedranno alcune opzioni del plugin.

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

WebP conversion in EWWW

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.

Insert rewrite rules

È 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’.

WebP Delivery method successful

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.

Select files in Media

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.

Bulk Optimize

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.

Run optimization

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.

WebP image conversion finished

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.

checking image

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

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

Verify WebP image is served

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.

Create Imagify API key

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”.

Imagify WebP Settings

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.

Save settings and start image optimizer

Si accede così alla pagina Media ” Ottimizzazione massiva.

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

Optimization status

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”.

checking image

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

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

Verify WebP image is served

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.

SG Optimizer settings

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’.

Enable WebP images in SG Optimizer

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.

Bulk generate WebP images

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.

Viewing WebP Images in developer tools

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:

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

17 commentiLascia una risposta

  1. Syed Balkhi

    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!

  2. MOINUDDIN WAHEED

    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

      You’re welcome, glad you found our guide helpful :)

      Admin

  3. Jiří Vaněk

    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

      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

  4. emir

    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

      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

  5. Ashikur Rahman

    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

      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

  6. Rebecca

    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

      It is not required but is useful for the sites that use that information.

      Admin

  7. Theo

    here’s what I’m looking for,
    Very helpful

    • WPBeginner Support

      Glad our guide was helpful!

      Admin

  8. Kim

    Thanks so much for the quick reply!

    • WPBeginner Support

      Glad we could help :)

      Admin

  9. Kim

    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

      The plugin will automate the process for new uploads :)

      Admin

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.