Lazy Loading für Emojis hinzufügen

Profilbilder und Bildelemente in Beiträgen werden durch das Attribut loading="lazy" lazy-geladen.
Emojis verpassen das. :sloth:

<img src="https://emoji.discourse-cdn.com/twitter/sloth.png?v=12" title=":sloth:" class="emoji" alt=":sloth:">

Ich konnte die Stelle im Quellcode nicht finden, an der die Emoji-Tags generiert werden.
Sind Emojis in die Beiträge “eingebrannt”?

1 „Gefällt mir“
3 „Gefällt mir“

Können Sie näher erläutern, warum Sie feste Breiten und Höhen hinzugefügt haben? Warum ist unsere CSS-Lösung hier nicht ausreichend?

Ich persönlich halte es für eine gute Vorgehensweise, width- und height-Attribute zu img-Elementen hinzuzufügen, wenn das img-Element generiert wird. Dort weiß ich mit Sicherheit, welche exakte Bilddatei ich einfüge. CSS ist weit von der eigentlichen Bilddatei entfernt.

Außerdem nutzen Browser diese zusätzlichen Informationen über die Bildgröße, um das aspect-ratio zu berechnen, bevor die Bilddatei geladen wird – und bevor CSS geparst wird.

In diesem Fall werden die Emojis an vielen verschiedenen Stellen verwendet – und manchmal wird die Größenbestimmung per CSS versehentlich übersprungen.
Siehe z. B. die crawler view zu diesem Thema auf PageSpeed

2 „Gefällt mir“

Ich verstehe, also verwendet der Browser dies, um das Seitenverhältnis zu ermitteln, und dies gibt den Leuten mehr Flexibilität mit CSS (und schränkt Blockierungen rund um CSS ein). Klingt für mich gut, macht unser HTML aber etwas ausführlicher.

1 „Gefällt mir“

Dieser PR wurde nun zusammengeführt, danke für den Beitrag @rrit!

2 „Gefällt mir“