# Add lazy loading for emojis **URL:** https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024 **Category:** Development **Created:** [February 3, 2022, 10:18pm UTC](https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024 "2022-02-03T22:18:02Z") **Posts on this page:** 6 **Page:** 1
### Author: ![rrit](https://avatars.discourse-cdn.com/v4/letter/r/b5ac83/32.png) [@rrit](https://meta.discourse.org/u/rrit) #### Post date: [February 3, 2022, 10:18pm UTC](https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024/1 "2022-02-03T22:18:02Z")
Profile pictures and image elements in posts get lazyloaded by having the attribute `loading="lazy"` set. Emojis are missing out on this. šŸ¦„ ```xml :sloth: ``` I could not find the location in the sources where the emoji tags are generated. Are emojis ā€œbakedā€ into the posts? ---
### Author: ![rrit](https://avatars.discourse-cdn.com/v4/letter/r/b5ac83/32.png) [@rrit](https://meta.discourse.org/u/rrit) #### Post date: [February 6, 2022, 9:08pm UTC](https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024/2 "2022-02-06T21:08:15Z")
[https://github.com/discourse/discourse/pull/15830](https://github.com/discourse/discourse/pull/15830) ---
### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam) #### Post date: [February 8, 2022, 1:37am UTC](https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024/3 "2022-02-08T01:37:16Z")
Can you expand on why you added hard coded width and height? Why is our CSS solution not good enough here? ---
### Author: ![rrit](https://avatars.discourse-cdn.com/v4/letter/r/b5ac83/32.png) [@rrit](https://meta.discourse.org/u/rrit) #### Post date: [February 8, 2022, 2:42am UTC](https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024/4 "2022-02-08T02:42:47Z")
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](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Multimedia)** > > 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](https://pagespeed.web.dev/report?url=https%3A%2F%2Fmeta.discourse.org%2Ft%2Fadd-lazy-loading-for-emojis%2F217024) ![grafik](https://global.discourse-cdn.com/meta/original/3X/1/0/108a83766e92a8a16c6d254324d83ec1bc3d68a0.png) ---
### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam) #### Post date: [February 8, 2022, 2:55am UTC](https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024/5 "2022-02-08T02:55:27Z")
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. ---
### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj) #### Post date: [February 9, 2022, 11:23am UTC](https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024/6 "2022-02-09T11:23:38Z")
This PR has now been merged, thanks for the contribution @rrit!