As imagens de perfil e os elementos de imagem nas postagens são carregados de forma preguiçosa (lazy-loaded) tendo o atributo loading="lazy" definido.
Os emojis não estão aproveitando isso. 
<img src="https://emoji.discourse-cdn.com/twitter/sloth.png?v=12" title=":sloth:" class="emoji" alt=":sloth:">
Não consegui encontrar a localização nas fontes onde as tags de emoji são geradas.
Os emojis são “gravados” nas postagens?
Você pode detalhar por que adicionou largura e altura codificadas? Por que nossa solução CSS não é boa o suficiente aqui?
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)
Entendi, então o navegador está usando isso para descobrir a proporção e isso dá mais flexibilidade às pessoas com CSS (e limita bloqueios em torno do CSS). Parece bom para mim, embora torne nosso HTML um pouco mais verboso.
Este PR foi mesclado, obrigado pela contribuição @rrit!
