Ajouter le chargement différé pour les emojis

Les photos de profil et les éléments d’image dans les publications sont chargés paresseusement en définissant l’attribut loading="lazy". Les emojis n’en bénéficient pas. :sloth:

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

Je n’ai pas trouvé dans les sources l’endroit où les balises d’emoji sont générées. Les emojis sont-ils “cuits” dans les publications ?

1 « J'aime »
3 « J'aime »

Pouvez-vous expliquer pourquoi vous avez ajouté une largeur et une hauteur codées en dur ? Pourquoi notre solution CSS n’est-elle pas suffisante ici ?

Personnellement, je pense qu’il est de bon ton d’ajouter toujours les attributs width et height aux éléments img au moment où l’élément img est généré. C’est à cet endroit que je peux savoir avec certitude quel fichier image exact j’utilise. Le CSS est loin du fichier image réel.

De plus, les navigateurs utilisent ces informations supplémentaires sur la taille de l’image pour calculer le aspect-ratio avant de charger le fichier image - et avant l’analyse CSS.

Dans ce cas, les emojis sont utilisés dans de nombreux endroits différents - et parfois la définition des tailles via CSS est accidentellement omise.
Par exemple, voir la vue crawler de ce même sujet sur PageSpeed

2 « J'aime »

Je vois, donc le navigateur utilise ceci pour déterminer le rapport hauteur/largeur et cela donne plus de flexibilité aux gens avec CSS (et limite le blocage autour de CSS). Cela me semble bien, mais cela rend notre HTML un peu plus verbeux.

1 « J'aime »

Cette PR a maintenant été fusionnée, merci pour la contribution @rrit !

2 « J'aime »