Adicionar carregamento preguiçoso para emojis

Pessoalmente, acho que é uma boa prática sempre adicionar os atributos width e height aos elementos img no momento em que o elemento img é gerado. Esse é o lugar onde posso saber com certeza qual arquivo de imagem exato estou colocando. O CSS está muito longe do arquivo de imagem real.

Além disso, os navegadores usam essas informações extras sobre o tamanho da imagem para calcular a aspect-ratio antes de carregar o arquivo de imagem - e antes da análise do CSS.

Nesse caso, os emojis são usados em muitos lugares diferentes - e às vezes a definição de tamanhos via CSS é acidentalmente ignorada.
Por exemplo, veja a visualização do crawler deste mesmo tópico no PageSpeed (https://pagespeed.web.dev/report?url=https%3A%2F%2Fmeta.discourse.org%2Ft%2Fadd-lazy-loading-for-emojis%2F217024)

2 curtidas