Probleme mit Apple IOS16 und .avif-Bildern
[Dieser Beitrag ist auf Englisch, weil viele Menschen auf der ganzen Welt mit demselben Problem konfrontiert sind.]
Sie sehen Fragezeichen anstelle von Bildern auf Ihrem iPhone? Das liegt wahrscheinlich daran, dass es sich um ein .avif-Bild handelt und das aktuelle iOS (>16) damit Probleme hat. Gleich nach der Einführung von Apples IOS 16 sahen wir bei havendienst.nl viele Fragezeichen, als wir mit einem aktualisierten iPhone darin surften. In diesem Blogbeitrag verraten wir Ihnen, wie wir mit dieser Situation umgehen.
Wie gehen wir mit der Bildpriorität um?
Havendienst.nl verwendet Avif-Bilder, und wenn ein Benutzer dies nicht unterstützt, bieten wir ein Webp-Bild an. Wenn das webp-Bild nicht unterstützt wird, bieten wir das klassische .jpg/.png/.gif-Bild an.
Beispiele für Anfrage-Header
Ihr Browser sendet bei jeder Anfrage einen "Accept"-Header. Ein Beispiel für einen solchen Accept Header (Chome v105 auf Windows 10) kann sein:
Akzeptieren : 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
Wie Sie sehen können, sagt Chrome v105 auf Windows 10, dass es sowohl avif-Bilder als auch webp- und apng-Bilder verarbeitet.
Apple-Geräte verwenden unterschiedliche Anfrage-Header für verschiedene Arten von Inhalten. Nachfolgend ein Beispiel für ein iPhone 11 mit IOS16.02, das eine Nicht-Bild-Anfrage durchführt:
Akzeptieren: text/html,application/xhtml+xml,application/xm;q=0
Wenn Apple IOS 16-Geräte ein Bild anfordern, senden sie avif im Header der Anforderung, was darauf schließen lässt, dass sie avif-Bilder vollständig unterstützen. Das Gegenteil ist der Fall.
AVIF-Image-Unterstützung ist unter IOS 16 defekt
Erstens scheint Apple keine animierten Avif-Bilder zu unterstützen, sondern nur statische Bilder.
Zweitens unterstützt es keine Avif-Bilder, wenn sie in einem HEIF-Container kodiert sind. Da die meisten Bildoptimierer und -konverter dies standardmäßig tun, werden die meisten Ihrer Bilder auf iPhones als Fragezeichen dargestellt.
Lösung
Es gibt eine Reihe von Möglichkeiten, z. B. können Sie alle Bilder mit anderen Einstellungen neu konvertieren. Eine andere Möglichkeit ist, auf ein IOS-Update von Apple zu warten. Obwohl der Fehler noch in IOS 16.0.2 vorhanden ist.
Die beste Lösung für beide Welten wäre die Überprüfung des User-Agent- und des Request-Headers. Prüfen Sie also nicht nur auf avif im Request-Header, sondern auch auf "iPhone OS 16" im User-Agent, wenn dies der Fall ist.... ein Webp- oder klassisches Bild bereitstellen.