Come funzionano le immagini WebP in WordPress

Abbiamo già accennato in più di un'occasione che la velocità di caricamento del nostro sito Web è un fattore chiave quando si tratta di posizionarlo bene nei motori di ricerca. E anche se potresti non aver bisogno di raggiungere il massimo su Google Speed, qualsiasi sforzo relativo all'ottimizzazione delle immagini è particolarmente critico per migliorare la SEO.

La community di WordPress ne è ben consapevole, e per questo motivo nell'ultima versione 5.8 ha aggiunto la funzionalità per supportare il formato immagine WebP.

Cosa sono le immagini WebP

WebP è un formato immagine sviluppato da Google nel 2010 per essere un'alternativa a formati come PNG e JPG, producendo file di dimensioni molto più piccole pur mantenendo qualità dell'immagine simili. A differenza di altri formati, WebP supporta la compressione lossy e lossless, nonché trasparenza e animazione.

Anche con queste funzionalità, WebP offre sempre file di dimensioni inferiori rispetto alle sue alternative. In uno studio comparativo di Google su questi formati di immagine, le immagini con perdita di dati WebP sono risultate essere, in media, il 30% più piccole dei JPG e il 25% più piccole dei PNG.

Inoltre, Google PageSpeed ​​Insights, che è un valutatore del livello di ottimizzazione del tuo sito web, consiglia di utilizzare i moderni formati di immagine come una delle opportunità per migliorare la velocità di caricamento del tuo sito web.

Una delle domande che potresti avere quando consideri se dovresti avere tutte le immagini in WebP è l'attuale supporto per browser diversi. L'ultima cosa che vorresti è che i tuoi lettori non siano in grado di vedere le immagini correttamente.

E la realtà è che il supporto in ognuno di loro è in aumento. Attualmente stiamo già parlando di un supporto del 95%.

Come convertire le immagini in WebP

Per caricare un'immagine WebP nella libreria, ovviamente, la prima cosa che dobbiamo avere è detta immagine nel formato in questione. Se scarichi un'immagine da una banca di immagini, la scaricherai sicuramente in formato JPEG o PNG. Quindi il tuo primo compito sarà convertire l'immagine in quel formato. Quali alternative abbiamo?

Strumenti per la progettazione di immagini

Alcuni strumenti di progettazione di immagini, come Sketch, Adobe Photoshop o Cloudinary, tra gli altri, includono l'opzione per salvare qualsiasi immagine in formato WebP. È semplice come aprire l'immagine che desideri convertire e salvarla nel nuovo formato.

Ma se questo non è il tuo caso, non preoccuparti perché hai delle alternative gratuite, come vedremo di seguito.

Strumento Google ufficiale

Un'altra opzione è scaricare cwebp , uno strumento per Linux, Widows o Mac per convertire qualsiasi immagine PNG o JPG in WebP. Una volta scaricato e installato, puoi eseguire direttamente le istruzioni per convertire qualsiasi immagine sul tuo computer. Quindi, ad esempio, puoi convertire un file immagine PNG in un'immagine WebP con un intervallo di qualità di 80 con il comando:

cwebp -q 80 image.png -o image.webp

Se devi convertire molte immagini contemporaneamente, questo articolo spiega le istruzioni, in un ambiente simile a Unix (come macOS o Ubuntu), in modo da poter convertire un ampio set di immagini.

E nello stesso articolo ti parlano anche dell'alternativa di programmare la conversione con Node.js usando lo strumento imagin-webp.

Convertitori in linea

Un'altra alternativa se non vuoi scrivere una singola riga di codice è usare un convertitore di immagini online. Googling fa apparire facilmente un lungo elenco di convertitori, inclusi i seguenti:

• Ezgif Webp
• Conversione cloud
• Converti
• Conversione in linea
• FreeConvert

In tutti, devi solo caricare l'immagine, eseguire la conversione e scaricare il file convertito.

Plugin WordPress

Infine, come spiegherò di seguito, vedrai che ci sono anche dei plugin che convertono le immagini in formato WebP quando le carichi sul tuo sito WordPress.

Come caricare un'immagine WebP nella libreria multimediale

Una volta che abbiamo l'immagine in questo formato, dovresti essere in grado di caricarla nella tua libreria multimediale di WordPress come al solito, ma...

Ops, non funziona! Almeno, non è stato per me. E potresti dover affrontare lo stesso problema a seconda del provider di hosting che stai attualmente utilizzando.

WordPress ha una limitazione incorporata sui tipi di file MIME che puoi caricare sul tuo sito per motivi di sicurezza. MIME sta per Multipurpose Internet Mail Extensions. I tipi MIME vengono utilizzati dai browser e da altri dispositivi Internet per determinare il tipo di contenuto associato a una pagina. Ad esempio, se hai un file .png e un file .jpeg su una pagina, il browser saprà dai loro tipi MIME (non dall'estensione del file) che dovrebbe trattare entrambi i file come immagini, piuttosto che come video o altri tipi di file.

Per impostazione predefinita, WordPress memorizza un elenco di tipi MIME registrati in wp-includes/functions.php . Tuttavia, non tutti i tipi MIME riconosciuti possono essere caricati.

E se provi a caricare un file con un'estensione al di fuori di questo elenco predefinito, come nel caso di WebP, vedrai il messaggio di errore sopra.

Nella documentazione della tua società di hosting troverai diverse alternative per modificare come permetterti di caricare questo nuovo tipo MIME. Questo di solito avviene utilizzando un plug-in con il quale è possibile aggiungere tipi di file aggiuntivi o modificare direttamente il file, oppure utilizzare il proprio plug-in con il seguente codice:

 function nelio_custom_upload_mimes( $existing_mimes ) { $existing_mimes['webm'] = 'image/webm'; return $existing_mimes; } add_filter( 'mime_types', 'nelio_custom_upload_mimes' );

Oppure, in alternativa, modificare il file wp-config.php , aggiungendo la seguente riga di codice:

 define( 'ALLOW_UNFILTERED_UPLOADS', true );

Dopo aver apportato le modifiche necessarie, dovresti essere in grado di caricare la tua immagine. Prossimo tentativo...

Ebbene, sembra che non sarà nemmeno possibile...

In questo caso, come discusso nel forum di WordPress, per alcuni la soluzione è stata assicurarsi che la libreria imagick fosse installata e riavviare il server. Per gli altri (come nel mio caso), l'unico modo per caricare l'immagine era utilizzare il link browser-uploader che trovi in ​​fondo al pannello di caricamento immagini.

E voilà , ho caricato la mia immagine WebP!

Plugin WordPress per convertire immagini in WebP

Ti ho già parlato dello spazio e del risparmio di carico di avere le immagini in questo formato WebP. E il problema sorge quando pensiamo a come convertire tutte le immagini che abbiamo già caricato sul nostro server. La buona notizia, come la maggior parte delle volte in WordPress, è che abbiamo diversi plugin che possono fare questo lavoro.

E non solo, alcuni di loro, prima di caricare qualsiasi immagine nella tua libreria, possono forzare la conversione dell'immagine in WebP, senza che tu debba preoccupartene. Alcuni dei più noti sono:

• Ottimizzatore di immagini EWWW
• WebP Express
• ShortPixel
• Immagina
• Ottimo
• WebPConverter per i media

Infine, vorrei sottolineare che le principali società di hosting di WordPress sono molto consapevoli dell'importanza di avere immagini ottimizzate sul proprio sito web. Per questo motivo, alcuni di loro offrono già i propri plug-in integrati nei loro server che sono responsabili della generazione automatica delle immagini che carichi nella libreria su WebP in modo che siano sempre servite ai browser che le supportano. Questo è il caso, ad esempio, del plug-in SG Optimizer di Siteground.

Conclusione

Il WebP è veloce, efficiente e sta guadagnando molto slancio. Siamo sicuramente più vicini di quanto pensiamo alla sua adozione di massa in WordPress e browser. Siamo felici che WordPress non venga lasciato indietro e che tutti possiamo ottimizzare la SEO dei nostri siti Web supportando il formato immagine WebP.

Immagine in primo piano del porto turistico su Unsplash .