CSS側では簡単に実装できます。
img.emoji {
width: auto; /* width: 20px; を置き換え */
height: 20px;
vertical-align: text-bottom;
}
（説明については DEV: add native lazy loading for emojis by rr-it · Pull Request #15830 · discourse/discourse · GitHub を参照してください。）
より難しいのは「カスタム絵文字」と絵文字のレンダリングの部分です。
- カスタム絵文字には、絵文字ごとに
aspect-ratio（または代替としてheightとwidth）の追加属性が必要です。 - 絵文字のレンダリングでは、カスタム絵文字が
aspect-ratioを使用してwidthをそれに応じて変更する必要があります –heightは20pxのままです。
カスタム絵文字の迅速かつ簡単なアプローチ：
カスタム絵文字の img タグでは、height="20" のみ設定し、width はまったく設定しない – これにより、aspect-ratio/width と height を設定する利点を捨てます。
CSS: img.emoji { width: auto; }