Isso ocorre porque todos os emojis unicode padronizados são projetados para caber em um quadrado, e assumimos que os sites desejam que seus emojis tenham um tamanho consistente, de forma que funcionem ao lado de texto e outros emojis
se aquele bule fosse 50x50, ele criaria um grande espaço entre as linhas como este:
Há uma boa explicação de quando foi adicionado originalmente:
Com detalhes de apoio de Multimedia: Images - Learn web development | MDN
Quando os atributos
widtheheightde uma imagem são incluídos em um elemento<img />HTML, a proporção da imagem pode ser calculada pelo navegador antes que a imagem seja carregada. Essa proporção é usada para reservar o espaço necessário para exibir a imagem, reduzindo ou até mesmo prevenindo uma mudança de layout quando a imagem é baixada e exibida na tela. Reduzir a mudança de layout é um componente importante da boa experiência do usuário e do desempenho da web.…
Enquanto as melhores práticas de desenvolvedor da última década podem ter recomendado omitir os atributos
widtheheightde uma imagem em um elemento<img />HTML, devido ao mapeamento de proporção, incluir esses dois atributos é considerado uma melhor prática de desenvolvedor.
Dito tudo isso, você tem um exemplo razoável de um caso em que o dimensionamento padrão não funcionará para todos os emojis… aquele antigo emoji de brinde é 3 vezes mais largo, então ele não se encaixa bem em um quadrado. Não é incomum que outros aplicativos limitem todos os emojis a quadrados, então não somos muito incomuns em nosso comportamento aqui (tanto Slack quanto Discord fazem isso, por exemplo)… mas alternativamente, poderíamos considerar permitir que emojis personalizados tenham dimensões opcionais definidas.
