Profile pictures and image elements in posts get lazyloaded by having the attribute loading="lazy" set. Emojis are missing out on this. :sloth: I could not find the location in the sources where the emoji tags are generated. Are emojis “baked” into the posts?

https://github.com/discourse/discourse/pull/15830

Personally I think it is like a good manner to always add width and height attributes to img elements on point where the img-element is generated. That is the place where I might know for sure which exact image-file I’m putting in. CSS is far away from the actual image-file. On top the browsers use this extra info about the image size to calculate aspect-ratio before loading the image file - and before CSS parsing. [image] Multimedia: Images - Learn web development | MDN Media, namely images and video, account for over 70% of the bytes downloaded for the average website. In terms of download performance, eliminating media, and reducing file size is the low-hanging fruit. This article looks at optimizing images and... For this case the emojis are used in many different places - and sometimes defining sizes via CSS will be skipped accidentally. E.g. see crawler view of this very same topic on PageSpeed [grafik]

I see, so the browser is using this to figure out aspect ratio and this allows people more flexibility with CSS (and limits blocking around CSS). Seems good to me, does make our html a bit more verbose though.

This PR has now been merged, thanks for the contribution @rrit!

Add lazy loading for emojis

Development

sam (Sam Saffron) February 8, 2022, 1:37am 3

Can you expand on why you added hard coded width and height? Why is our CSS solution not good enough here?

Topic		Replies	Views
Emoji issue when rendering on webkit - Issue with how HTML is rendered UX	4	1296	March 14, 2023
Allow user to specify size of image via attributes Feature	7	2682	August 12, 2015
How to speed up Discourse Emoji Product Support	8	1132	May 7, 2018
Emoji are huge when embedding Bug emoji , embedding	17	5690	September 24, 2015
How to include images that are lazy-loaded in post preview? Product Support	2	499	February 1, 2021

Add lazy loading for emojis

Related topics