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. [תמונה] 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!

הוסף טעינה עצלה לאמוג'י

מפתח

sam (Sam Saffron) 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?

נושא		תגובות	צפיות
Emoji issue when rendering on webkit - Issue with how HTML is rendered UX	4	1297	14 במרץ,‏ 2023
Allow user to specify size of image via attributes Feature	7	2685	12 באוגוסט,‏ 2015
How to speed up Discourse Emoji Product Support	8	1135	7 במאי,‏ 2018
Emoji are huge when embedding Bug emoji , embedding	17	5705	24 בספטמבר,‏ 2015
How to include images that are lazy-loaded in post preview? Product Support	2	499	1 בפברואר,‏ 2021

הוסף טעינה עצלה לאמוג'י

נושאים קשורים