WebP e ShortPixel. Convertire le immagini in automatico

WebP  e Shortpixel è il nuovo connubio per caricare in WordPress un formato immagine creato per il Web.

WebP è un formato di immagine sviluppato da Google ed appositamente pensato per ottimizzare il caricamento delle immagini sulle pagine web a discapito della qualità ma a favore della velocità. Di standard, in WordPress, non è possibile caricare nella media library immagini WebP.

Ma non temere con un pezzo di codice può caricare immagini WebP in WordPress.  Se sei interessato trovi una mini guida  su come caricare le immagini e come convertire i  Jpeg/Png in WebP con vari tool.

Con il link consigliato puoi caricare in wordpress il nuovo formato immagine ma devi convertirle manualmente. Ora vedremo come convertire immagini WebP in automatico con il plugin Shortpixel.

WebP e ShortPixel. Miglior plugin per la conversione immagini

Per la compressione delle immagini e la relativa conversione in formato WebP utilizzeremo Shortpixel, a mio parere tra i migliori servizi di compressione al mondo. Per utilizzarlo occorre disporre di una API Key che è possibile richiedere gratuitamente registrandosi su questa pagina.

Ottenuta la API Key sarà possibile procedere con l’installazione del plugin gratuito per WordPress. Ad installazione completata il plugin ci chiederà di inserire la API Key prelevata al passo precedente. Se non dovesse farlo automaticamente basterà cliccare su Impostazioni > Shortpixel. Infine cliccare su su Validate.

Attivazione immagini WebP in ShortPixel

Se il processo di validazione va a buon fine, sarà possibile visualizzare il pannello di controllo del plugin. A quel punto clicchiamo su Advanced e spuntiamo le opzioni WebP versions.

WebP e Shortpixel. attivazione formato WebP
WebP e Shortpixel. Attivazione formato WebP

La prima opzione indicherà a Shortpixel di creare la versione WebP dell’immagine che andremo a comprimere, mentre impostando il flag sull’opzione “Deliver the WebP versions of the images in the front-end” attiveremo la possibilità di rimpiazzare il classico tag html <img> con il tag <picture>. Questo consente di continuare a fornire la vecchia immagine JPEG o PNG ai browser che non supportano il formato WebP.

WebP e Shortpixel. Configurazione tag Picture
WebP e Shortpixel. Configurazione tag Picture

Aggiornamento: ora con ShortPixel la conversione jpeg/png in webp costa 1 credito

Per i browser meno moderni che non supportano il tag <picture> verrà utilizzato lo script Picturefill che ne simulerà il comportamento. Tale script avrà un impatto minimo sulle performance in quanto caricato dinamicamente al verificarsi dell’evento DOMContentLoaded.

Come vedremo successivamente nella prossima  guida sarà possibile fornire al browser le immagini WebP anche senza spuntare questa seconda opzione di Shortpixel, semplicemente aggiungendo una regola nel file .htaccess o nelle configurazioni di Nginx. Ciò nonostante è consigliato utilizzare questa opzione nel caso in cui si volesse un giorno utilizzare un CDN.

Compressione/conversione delle immagini WebP massiva

Una volta salvata la configurazione Shortpixel sarà possibile procedere alla compressione/conversione delle immagini cliccando sul menu della Media Library.

Per ogni immagine che si desidera comprimere e convertire occorrerà cliccare sul bottone Optimize now. È anche possibile effettuare una compressione/conversione massiva di tutte le immagini cliccando su Bulk Shortpixel nel menu accanto.

La configurazione del plugin in generale è indicata nella guida.

Conclusioni

A questo punto non rimane che inserire l’immagine in una pagina o in un articolo e verificare dalla DevTools quale tra le due fonti di immagini stiamo effettivamente visualizzando.

Autore Bartolomeo

Consulente tecnico con la passione per il web e la tecnologia e tutto quello che le ronza intorno.
Nel tempo libero scrivo articoli per il mio blog su argomenti vari, in particolare su configurazione Windows, Linux e WordPress.

Condividi questo articolo!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ho letto la policy privacy e accetto il trattamento dei miei dati personali in conformità al D.Lgs. 196/2003