{"id":13751,"date":"2024-09-03T17:53:31","date_gmt":"2024-09-03T15:53:31","guid":{"rendered":"https:\/\/u-labs.de\/portal\/?p=13751"},"modified":"2024-09-03T18:53:42","modified_gmt":"2024-09-03T16:53:42","slug":"bildvorschau-fehlt-nach-avif-wechsel","status":"publish","type":"post","link":"https:\/\/u-labs.de\/portal\/bildvorschau-fehlt-nach-avif-wechsel\/","title":{"rendered":"Bildvorschau in z.B. Telegram fehlt nach Wechsel auf AVIF Bilder"},"content":{"rendered":"

Im Selbttest habe ich angefangen, neue Bilder\/Screenshots auf U-Labs in AVIF statt JPG\/PNG bereitzustellen. Das funktionierte \u00fcberraschend 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<\/em> sowie dem Grund, warum Telegram meine Vorschaubilder nicht anzeigte.<\/p>\n

AVIF: Eines der vielversprechenden Bildformate der Zukunft<\/h2>\n

AVIF bietet unter den von allen g\u00e4ngigen Browsern unterst\u00fctzten Bildformaten die effektivste Kompression bei vergleichbarer Bildqualit\u00e4t. Im Beitrag zu den drei Bildformaten der Zukunft habe ich mir WebP, JPEG XL & AVIF genauer angeschaut<\/a>. Das CMS WordPress unterst\u00fctzt AVIF erst seit wenigen Monaten mit Version 6.51<\/a><\/sup> – daher habe ich hier im U-Labs Portal begonnen, es in der Praxis zu nutzen.<\/p>\n

Innerhalb der Artikel war das unspektakul\u00e4r positiv: Die AVIF-Bilder sind deutlich kleiner, selbst wenn es gr\u00f6\u00dfere Fotos oder Bildschirmfotos sind. Gerade wenn mehrere davon enthalten sind, eine Willkommene Entlastung der Seite. Alle g\u00e4ngigen Browser zeigen sie an, der Besucher merkt keinen unterschied zu klassischen Formaten.<\/p>\n

Die (teilweise) fehlenden Vorschaubilder<\/h2>\n

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. \u00dcbrig bleibt nur reiner Text – keine gute Voraussetzung in einer multimedialen Zeit f\u00fcr Menschen, die besonders auf visuelles reagieren.<\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

Nicht alle Plattformen waren betroffen. Auf WhatsApp funktionierte das Bild beim gleichen Beitrag:<\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

Nach mehreren Versuchen lie\u00df 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.<\/p>\n

Warum?<\/h2>\n

Die Messenger-Dienste nutzen Open Graph2<\/a><\/sup>, um Meta-Informationen wie Titel, Beschreibung und Vorschaubild anzuzeigen. Titel und Beschreibung lie\u00dfe sich wohl noch aus den im HTML-Standard definierten Metadaten ermitteln. Ein Vorschaubild sieht dies jedoch nicht vor. Das ist wenig \u00fcberraschend, schlie\u00dflich wurde die Auszeichnungssprache urspr\u00fcnglich f\u00fcr 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\u00fcnglich bei Facebook – dort wollte man eine ansprechendere Vorschau f\u00fcr das liefern, was Nutzer hinter einem Link erwartet. <\/p>\n

Was nicht half<\/h3>\n

Auch U-Labs setzt die Tags f\u00fcr Messenger, Soziale Netzwerke & co. Das habe ich f\u00fcr dieses Problem gepr\u00fcft – die Tags passen, das angegebene Bild kann abgerufen werden und ist nicht zu gro\u00df. Die Spezifikation auf der offizielle Webseite liefert keine Informationen zum erlaubten Bildtyp. Allerdings fiel mir og:image:type<\/code> 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<\/code> des Designs:<\/p>\n

$post_thumbnail_id = get_post_thumbnail_id( $post );\nif ( $post_thumbnail_id ) {\n        $attachment_metadata = wp_get_attachment_metadata( $post_thumbnail_id );\n        $file_path = get_attached_file( $post_thumbnail_id );\n        $thumbnail_mime = wp_get_image_mime ( $file_path );\n        $metas[] = '<meta property="og:image:type" content="' . $thumbnail_mime . '" \/>';\n}<\/code><\/pre>\n
Dieser wurde nun korrekt auf image\/avif<\/code> gesetzt, dennoch l\u00f6ste es das Problem leider nicht.<\/p>\n
Die Antwort: Telegram h\u00e4lt sich wohl an die Spezifikation<\/h3>\n
Ich habe weiter recherchiert und landete dabei bei einer SO-Frage, ob WebP als og:image <\/code>per Open Graph genutzt werden darf.3<\/a><\/sup> Nicht genau mein Fall, aber WebP ist ebenfalls relativ neu. Dort verweist man auf Facebooks Dokumentation, laut denen nur drei Mime-Typen zul\u00e4ssig sind:4<\/a><\/sup><\/p>\n
\n
og:image:type\r\nMIME-Typ des Bildes. image\/jpeg, image\/gif oder image\/png<\/p>\n<\/blockquote>\n
Zwar ist dies nicht auf der offiziellen Webseite der Open Graph Spezifikation dokumentiert. Nachdem Open Graph von Facebook entwickelt wurde, d\u00fcrfte die naheliegendste Erkl\u00e4rung sein, dass deren Dokumentation korrekt ist. Telegram h\u00e4lt sich daran und l\u00e4dt nur Vorschaubilder in den drei alten Formaten. Bei WhatsApp wird auch AVIF geladen – entweder bewusst, weil man das Format f\u00fcr wichtig h\u00e4lt. Oder das \u00fcbernimmt eine Drittanbieter-Bibliothek, die neben JPEG, PNG & GIF auch neuere Bildformate unterst\u00fctzt, sodass dies ggf. nur als Kollateralschaden funktioniert.<\/p>\n
In beiden F\u00e4llen liegt der Fehler f\u00fcr mein Problem jedoch offensichtlich bei mir. Zumindest ziehen gr\u00f6\u00dfere Dienste Facebooks Dokumentation heran, womit man davon ausgehen muss, dass nur drei Formate unterst\u00fctzt 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.<\/p>\n
Wie l\u00e4sst sich das l\u00f6sen?<\/h2>\n
Da ich meine Artikelbilder in AVIF hochgeladen habe und das urspr\u00fcnglich so beibehalten wollte, w\u00e4re das nur auf einem Weg m\u00f6glich gewesen: Beim Hochladen des Artikelbildes m\u00fcsste eine zweite Version als JPEG\/PNG erstellt werden. Das WP-Design referenziert diese als Vorschaubild f\u00fcr Open Graph, w\u00e4hrend das im Browser angezeigte problemlos AVIF bleiben kann – schlie\u00dflich wird das Format im <img><\/code> Element von allen g\u00e4ngigen Browsern unterst\u00fctzt. Damit das funktioniert, muss das Hochladen des Artikelbildes erkannt werden, damit das nur in diesem Falle geschieht. Eben so nat\u00fcrlich beim Aktualisieren des Bildes. Am besten w\u00e4re noch eine Stapelverarbeitung f\u00fcr die Bestehenden.<\/p>\n
Technisch machbar, allerdings mit einigen Stunden Aufwand, bis das stabil funktioniert. Dar\u00fcber hinaus schafft es Komplexit\u00e4t. Schlussendlich wegen einer Ersparnis im 2-Stelligen KB-Bereich. Das erschien mir unverh\u00e4ltnism\u00e4\u00dfig, zumal ich die Artikelbilder bereits zuvor auf 500px herunter skaliert habe, weil es daf\u00fcr ausreicht. Zus\u00e4tzlich erstellt mein Design verkleinerte Vorschaubilder, die passgenau f\u00fcr z.B. die Startseite sind. <\/p>\n
Ich werde daher die Artikelbilder weiterhin als optimiertes JPEG hochladen und nur innerhalb der Beitr\u00e4ge bei Fotos sowie Bildschirmfotos auf AVIF setzen. Das ist ohnehin der wichtigere Teil, bei dem die Ersparnis schon mit einem Bildschirmfoto deutlich gr\u00f6\u00dfer ist. Technisch w\u00e4re einheitlich AVIF zwar sch\u00f6ner. M\u00f6glicherweise ist das in Zukunft ohne gro\u00dfen Mehraufwand m\u00f6glich, wenn die Open Graph Spezifikation erweitert wird.<\/p>\n
Fazit<\/h2>\n
Die neuen Bildformate haben einige Vorteile und lohnen sich grunds\u00e4tzlich. Obwohl sie mittlerweile bereits seit mehreren Jahren existieren, sind sie noch nicht fl\u00e4chendeckend verf\u00fcgbar. Das zeigt sich teilweise erst im Detail. Man sollte daher umfangreich und zeitnah testen, damit Probleme fr\u00fchzeitig auffallen.<\/p>\n
Quellen<\/h2>\n
    \n
  1. https:\/\/make.wordpress.org\/core\/2024\/02\/23\/wordpress-6-5-adds-avif-support\/ \u21a9\ufe0e<\/a><\/li>\n
  2. https:\/\/ogp.me\/ \u21a9\ufe0e<\/a><\/li>\n
  3. https:\/\/stackoverflow.com\/a\/57955712\/3276634 \u21a9\ufe0e<\/a><\/li>\n
  4. https:\/\/developers.facebook.com\/docs\/sharing\/webmasters\/#images \u21a9\ufe0e<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Im Selbttest habe ich angefangen, neue Bilder\/Screenshots auf U-Labs in AVIF statt JPG\/PNG bereitzustellen. Das funktionierte \u00fcberraschend 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 …<\/p>\n","protected":false},"author":5,"featured_media":13835,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"[{\"content\":\"https:\/\/make.wordpress.org\/core\/2024\/02\/23\/wordpress-6-5-adds-avif-support\/\",\"id\":\"807524ad-a2ff-4b1e-b45a-5feaf5604220\"},{\"content\":\"https:\/\/ogp.me\/\",\"id\":\"d7e219eb-b0d4-4e7d-acd8-53e2b53349ea\"},{\"content\":\"https:\/\/stackoverflow.com\/a\/57955712\/3276634\",\"id\":\"adcc365c-144d-4a5a-9540-ce38df206a18\"},{\"content\":\"https:\/\/developers.facebook.com\/docs\/sharing\/webmasters\/#images\",\"id\":\"6a7f8f08-6579-41dd-a63b-f5527beb5c2d\"}]"},"categories":[22],"tags":[1105],"class_list":["post-13751","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technik","tag-avif"],"_links":{"self":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/13751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/comments?post=13751"}],"version-history":[{"count":12,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/13751\/revisions"}],"predecessor-version":[{"id":13840,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/13751\/revisions\/13840"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media\/13835"}],"wp:attachment":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media?parent=13751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/categories?post=13751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/tags?post=13751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}