Add lazy loading for emojis

Profile pictures and image elements in posts get lazyloaded by having the attribute loading="lazy" set.
Emojis are missing out on this. :sloth:

<img src="https://emoji.discourse-cdn.com/twitter/sloth.png?v=12" title=":sloth:" class="emoji" alt=":sloth:">

I could not find the location in the sources where the emoji tags are generated.
Are emojis “baked” into the posts?

1 Like
3 Likes

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

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.

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

2 Likes

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.

1 Like

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

2 Likes