Añadir carga diferida para emojis

Las imágenes de perfil y los elementos de imagen en las publicaciones se cargan de forma diferida al establecer el atributo loading="lazy".

Los emojis no se benefician de esto. :sloth:

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

No pude encontrar la ubicación en las fuentes donde se generan las etiquetas de emoji.
¿Los emojis están “integrados” en las publicaciones?

1 me gusta
3 Me gusta

¿Puedes explicar por qué añadiste un ancho y alto codificados? ¿Por qué nuestra solución CSS no es lo suficientemente buena aquí?

Personalmente, creo que es una buena práctica añadir siempre los atributos width y height a los elementos img en el punto en que se genera el elemento img. Ese es el lugar donde puedo saber con seguridad qué archivo de imagen estoy utilizando. CSS está muy lejos del archivo de imagen real.

Además, los navegadores utilizan esta información adicional sobre el tamaño de la imagen para calcular la aspect-ratio antes de cargar el archivo de imagen y antes del análisis CSS.

En este caso, los emojis se utilizan en muchos lugares diferentes, y a veces se omite la definición de tamaños a través de CSS por accidente.
Por ejemplo, véase la vista del rastreador de este mismo tema en PageSpeed

2 Me gusta

Entiendo, así que el navegador usa esto para determinar la relación de aspecto y esto da más flexibilidad a las personas con CSS (y limita los bloqueos en torno a CSS). Me parece bien, aunque hace que nuestro HTML sea un poco más verboso.

1 me gusta

Esta PR ya se ha fusionado, ¡gracias por la contribución @rrit!

2 Me gusta