Im Selbttest habe ich angefangen, neue Bilder/Screenshots auf U-Labs in AVIF statt JPG/PNG bereitzustellen. Das funktionierte überraschend gut, doch wie so oft steckt der Teufel im Detail: In manchen Messengern wurde das Vorschaubild nicht mehr angezeigt. Dieser Beitrag wirft einen zusammenfassenden Blick auf AVIF und das Open Graph Protocol sowie dem Grund, warum Telegram meine Vorschaubilder nicht anzeigte.
AVIF: Eines der vielversprechenden Bildformate der Zukunft
AVIF bietet unter den von allen gängigen Browsern unterstützten Bildformaten die effektivste Kompression bei vergleichbarer Bildqualität. Im Beitrag zu den drei Bildformaten der Zukunft habe ich mir WebP, JPEG XL & AVIF genauer angeschaut. Das CMS WordPress unterstützt AVIF erst seit wenigen Monaten mit Version 6.51 – daher habe ich hier im U-Labs Portal begonnen, es in der Praxis zu nutzen.
Innerhalb der Artikel war das unspektakulär positiv: Die AVIF-Bilder sind deutlich kleiner, selbst wenn es größere Fotos oder Bildschirmfotos sind. Gerade wenn mehrere davon enthalten sind, eine Willkommene Entlastung der Seite. Alle gängigen Browser zeigen sie an, der Besucher merkt keinen unterschied zu klassischen Formaten.
Die (teilweise) fehlenden Vorschaubilder
Doch bei den Artikel- bzw. Vorschaubildern sah es anders aus. Dort habe ich AVIF ebenfalls verwendet und stellte danach Probleme bei externen Diensten fest. Telegram beispielsweise zeigt dort kein Vorschaubild an. Übrig bleibt nur reiner Text – keine gute Voraussetzung in einer multimedialen Zeit für Menschen, die besonders auf visuelles reagieren.
Nicht alle Plattformen waren betroffen. Auf WhatsApp funktionierte das Bild beim gleichen Beitrag:
Nach mehreren Versuchen ließ sich das Problem auf jene Artikel reduzieren, deren Vorschaubild ich bereits auf AVIF umgestellt hatte. Und auf Telegram. In der Testumgebung zeigte Telegram AVIF-Vorschaubilder konsequent nicht an.
Warum?
Die Messenger-Dienste nutzen Open Graph2, um Meta-Informationen wie Titel, Beschreibung und Vorschaubild anzuzeigen. Titel und Beschreibung ließe sich wohl noch aus den im HTML-Standard definierten Metadaten ermitteln. Ein Vorschaubild sieht dies jedoch nicht vor. Das ist wenig überraschend, schließlich wurde die Auszeichnungssprache ursprünglich für textbasierte Inhalte entwickelt. Open Graph erweitert die Meta-Attribute von HTML, um weitere Informationen wie beispielsweise eine URL zum Vorschaubild maschinenlesbar auslesbar zu machen. Entwickelt wurde es ursprünglich bei Facebook – dort wollte man eine ansprechendere Vorschau für das liefern, was Nutzer hinter einem Link erwartet.
Was nicht half
Auch U-Labs setzt die Tags für Messenger, Soziale Netzwerke & co. Das habe ich für dieses Problem geprüft – die Tags passen, das angegebene Bild kann abgerufen werden und ist nicht zu groß. Die Spezifikation auf der offizielle Webseite liefert keine Informationen zum erlaubten Bildtyp. Allerdings fiel mir og:image:type auf, welchen den Mime-Typ des Bildes angibt. Das hatte ich bisher nicht gesetzt, laut Spezifikation ist es optional. Meine Vermutung: AVIF wird anhand der Endung nicht korrekt erkannt. Also ermittelte ich den Mime-Type und setzte damit das Attribut in der functions.php des Designs:
$post_thumbnail_id = get_post_thumbnail_id( $post );
if ( $post_thumbnail_id ) {
$attachment_metadata = wp_get_attachment_metadata( $post_thumbnail_id );
$file_path = get_attached_file( $post_thumbnail_id );
$thumbnail_mime = wp_get_image_mime ( $file_path );
$metas[] = '<meta property="og:image:type" content="' . $thumbnail_mime . '" />';
}Dieser wurde nun korrekt auf image/avif gesetzt, dennoch löste es das Problem leider nicht.
Die Antwort: Telegram hält sich wohl an die Spezifikation
Ich habe weiter recherchiert und landete dabei bei einer SO-Frage, ob WebP als og:image per Open Graph genutzt werden darf.3 Nicht genau mein Fall, aber WebP ist ebenfalls relativ neu. Dort verweist man auf Facebooks Dokumentation, laut denen nur drei Mime-Typen zulässig sind:4
og:image:type
MIME-Typ des Bildes. image/jpeg, image/gif oder image/png
Zwar ist dies nicht auf der offiziellen Webseite der Open Graph Spezifikation dokumentiert. Nachdem Open Graph von Facebook entwickelt wurde, dürfte die naheliegendste Erklärung sein, dass deren Dokumentation korrekt ist. Telegram hält sich daran und lädt nur Vorschaubilder in den drei alten Formaten. Bei WhatsApp wird auch AVIF geladen – entweder bewusst, weil man das Format für wichtig hält. Oder das übernimmt eine Drittanbieter-Bibliothek, die neben JPEG, PNG & GIF auch neuere Bildformate unterstützt, sodass dies ggf. nur als Kollateralschaden funktioniert.
In beiden Fällen liegt der Fehler für mein Problem jedoch offensichtlich bei mir. Zumindest ziehen größere Dienste Facebooks Dokumentation heran, womit man davon ausgehen muss, dass nur drei Formate unterstützt werden. Es ist somit keine gute Idee, an dieser Stelle AVIF oder andere Formate wie WebP zu verwenden – selbst wenn das im Einzelfall funktionieren mag.
Wie lässt sich das lösen?
Da ich meine Artikelbilder in AVIF hochgeladen habe und das ursprünglich so beibehalten wollte, wäre das nur auf einem Weg möglich gewesen: Beim Hochladen des Artikelbildes müsste eine zweite Version als JPEG/PNG erstellt werden. Das WP-Design referenziert diese als Vorschaubild für Open Graph, während das im Browser angezeigte problemlos AVIF bleiben kann – schließlich wird das Format im <img> Element von allen gängigen Browsern unterstützt. Damit das funktioniert, muss das Hochladen des Artikelbildes erkannt werden, damit das nur in diesem Falle geschieht. Eben so natürlich beim Aktualisieren des Bildes. Am besten wäre noch eine Stapelverarbeitung für die Bestehenden.
Technisch machbar, allerdings mit einigen Stunden Aufwand, bis das stabil funktioniert. Darüber hinaus schafft es Komplexität. Schlussendlich wegen einer Ersparnis im 2-Stelligen KB-Bereich. Das erschien mir unverhältnismäßig, zumal ich die Artikelbilder bereits zuvor auf 500px herunter skaliert habe, weil es dafür ausreicht. Zusätzlich erstellt mein Design verkleinerte Vorschaubilder, die passgenau für z.B. die Startseite sind.
Ich werde daher die Artikelbilder weiterhin als optimiertes JPEG hochladen und nur innerhalb der Beiträge bei Fotos sowie Bildschirmfotos auf AVIF setzen. Das ist ohnehin der wichtigere Teil, bei dem die Ersparnis schon mit einem Bildschirmfoto deutlich größer ist. Technisch wäre einheitlich AVIF zwar schöner. Möglicherweise ist das in Zukunft ohne großen Mehraufwand möglich, wenn die Open Graph Spezifikation erweitert wird.
Fazit
Die neuen Bildformate haben einige Vorteile und lohnen sich grundsätzlich. Obwohl sie mittlerweile bereits seit mehreren Jahren existieren, sind sie noch nicht flächendeckend verfügbar. Das zeigt sich teilweise erst im Detail. Man sollte daher umfangreich und zeitnah testen, damit Probleme frühzeitig auffallen.