Problemi con Apple IOS16 e le immagini .avif
[Questo post è in inglese perché ci sono molte persone in tutto il mondo che affrontano lo stesso problema].
Vedete punti interrogativi al posto delle immagini sul vostro iPhone? Probabilmente è perché si tratta di un'immagine .avif e il recente iOS (>16) ha problemi con questo tipo di immagini. Subito dopo il lancio di IOS 16 di Apple, abbiamo visto molti punti interrogativi su havendienst.nl mentre navigavamo con un iPhone aggiornato. In questo post vi raccontiamo come affrontiamo questa situazione.
Come si gestisce la priorità delle immagini?
Havendienst.nl utilizza immagini avif e quando un utente non le supporta, offriamo un'immagine webp. Se l'immagine webp non è supportata, offriamo la classica immagine .jpg/.png/.gif.
Esempi di intestazioni di richiesta
Il browser invia un'intestazione "accept" a ogni richiesta. Un esempio di tale intestazione accept (Chome v105 su Windows 10) può essere:
Accetta : text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Come si può vedere, Chrome v105 su Windows 10 afferma di gestire le immagini avif così come le immagini webp e apng.
I dispositivi Apple utilizzano intestazioni di richiesta diverse per i vari tipi di contenuto. Di seguito è riportato un esempio di un iPhone 11 con IOS 16.02 che esegue una richiesta non di immagine:
Accetta: text/html,application/xhtml+xml,application/xm;q=0
Quando i dispositivi Apple IOS 16 richiedono un'immagine, inviano avif nell'intestazione della richiesta, il che suggerisce che supportano pienamente le immagini avif. È vero il contrario.
Il supporto delle immagini AVIF è interrotto su IOS 16
Innanzitutto, Apple non sembra supportare le immagini avif animate, ma solo quelle statiche.
In secondo luogo, non supporta le immagini avif quando sono codificate in un contenitore HEIF. Poiché la maggior parte degli ottimizzatori/convertitori di immagini lo fa per impostazione predefinita, la maggior parte delle immagini verrà visualizzata come un punto interrogativo sugli iPhone.
Soluzione
Si possono fare diverse cose, tra cui riconvertire tutte le immagini con impostazioni diverse. Un'altra opzione è quella di aspettare che Apple aggiorni il suo IOS. Sebbene il bug sia ancora presente in IOS 16.0.2.
Una soluzione ottimale sarebbe quella di controllare l'User-Agent e l'intestazione della richiesta. Quindi non verificare solo la presenza di avif nell'intestazione della richiesta, ma anche la presenza di "iPhone OS 16" nell'agente utente, se questo è il caso.... servire un'immagine webp o classica.