0Logo WordpressGenera e servi automaticamente immagini avif con wordpress

Ho dedicato molto tempo all'ottimizzazione delle prestazioni di questo sito, e come parte del lavoro in corso monitoro le nuove tecnologie che potrebbero aiutare a migliorare la velocità dei visitatori. Seguo da un po' l'adozione di formati immagine di nuova generazione e con il supporto dei browser web ormai abbastanza diffuso era giunto il momento di capire come utilizzare questi nuovi formati in wordpress.

Sono necessari più passaggi che ho suddiviso in titoli di seguito

Abilita il supporto in nginx

Il primo passo è abilitare il tuo server web (nel mio caso nginx) riconoscere i tipi mime dei nuovi formati. Per fare ciò è necessario modificare mime.types che è probabile che si trovi in ​​/etc/nginx/mime.types. Ho aggiunto la seguente sezione

Servi automaticamente i file dove sono disponibili

Il prossimo passo è dire a nginx di servire i file automaticamente ogni volta che esistono (e per ricorrere a formati precedenti in cui non esiste un nuovo file di formato)
Per fare ciò, prima modifica il file di configurazione principale di nginx (di solito /etc/nginx/nginx.conf) e aggiungi la seguente sezione all'interno di http{} sezione della configurazione

Nota che sto solo cercando di servire jxl (JPEG-XL) o file avif, potresti aggiungere più opzioni (in ordine di preferenza!) se desideri.
Prossimo, è necessario aggiungere quanto segue sotto il server{} sezione della configurazione di nginx (che può essere nel file di configurazione principale o può essere in un file di configurazione separato a seconda di come hai impostato la struttura di configurazione di nginx)

Ora nginx cercherà image.jpg.jxl e poi image.jpg.avif e poi image.jpg.webp e infine image.jpg quando viene richiesto image.jpg da qualsiasi browser che supporta i formati più recenti. Quindi dobbiamo abilitarli in wordpress

abilita i formati di nuova generazione in wordpress

Aggiungi il seguente codice al tuo functions.php (idealmente fallo in un tema figlio in modo che quando aggiorni il tema le tue modifiche non vengano sovrascritte)

Nota che ho anche abilitato il supporto per SVG immagini allo stesso tempo

Ora puoi effettivamente caricare immagini in formato di nuova generazione e usarle direttamente in wordpress se lo desideri, ma non lo consiglio perché molti browser più vecchi non li supportano ancora - e abbiamo già impostato nginx per servirli in modo intelligente, quindi dovremmo usarlo. Quello che vogliamo fare è generare automaticamente i nuovi formati quando carichiamo le immagini (ci sono già plugin che lo fanno per webp, ma niente che lo faccia ancora per jxl o avif).

Installa libheif

Questo passaggio richiede l'accesso alla riga di comando del tuo host web, che è semplice se corri a VPS, ma potrebbe non essere così semplice se utilizzi un hosting condiviso, nel qual caso potresti dover chiedere supporto al tuo host
Esegui i seguenti comandi bash (questi sono selezionati per centos 8, altre distribuzioni potrebbero essere leggermente diverse)

Aggiungi una funzione personalizzata a wordpress functions.php per comprimere tutte le immagini caricate (e le loro miniature) in formato avif

Come per il precedente passaggio functions.php, consiglio di aggiungerlo in un tema figlio

Al momento è così: tutte le immagini che carichi verranno convertite in copie avif (con gli originali conservati). Puoi rigenerare tutte le tue immagini per creare i file avif usando un plugin. Nota: non ho ancora configurato yet JPEG-La compressione XL poiché il supporto non è ancora disponibile nei browser tradizionali (anche se è nei browser prerelease, quindi arriverà molto presto).

Mentre sto trattando i formati di nuova generazione e l'ottimizzazione, ho un ultimo consiglio: comprimere SVG immagini con gzip (o ancora meglio zopfli e brotli). Per farlo è necessaria un'altra funzione personalizzata...

Bonus: SVG compressione

Nota che avrai bisogno di gzip_static e brotli_static abilitati nella tua configurazione di nginx.

Autocompila per una versione più recente

Ho scoperto che su Centos l'ultima versione di heif-enc è 1.7 che ha parecchi bug durante la creazione di avif. Quindi ho deciso di compilare il mio più recente (1.12) costruisci e usa quello invece. Farlo è stato un po' complicato in quanto richiedeva il codec aom come libreria condivisa. Per farlo, esegui i seguenti comandi bash. Assicurati di eseguirli come un utente normale, non come utente root. Nota anche che alcuni di questi comandi potrebbero non essere strettamente necessari, mi ci è voluto un po 'per farlo funzionare e ho appena preso nota di cosa ha funzionato - non sono affatto un esperto di Linux!

Una volta che l'hai fatto, assicurati che funzioni eseguendo php -a ed eseguendo il seguente comando

Dovresti ottenere un output completo, non solo un 1 errore di linea. Supponendo che funzioni bene, puoi modificare il tuo functions.php in modo che ciascuno dei riferimenti shell-exec punti a /usr/local/bin/heif-enc invece che solo a heif-enc

Ho trovato questo utile? Per favore fateci sapere facendo cadere un commento qui sotto. Se si desidera iscriversi si prega di utilizzare il link iscriviti sul menu in alto a destra. È inoltre possibile condividere con i tuoi amici usando i link sottostanti sociali. Saluti.

lascia un commento