Emoij image too large (over 7MB)

[jhades]

Hello everyone, although I would love to use quill-emoji, I had to turn it off because the emoji image is too large (over 7MB). On an IPhone over fast Wifi, the first time that the user opens the emoji icon it takes a long time to load and the website is unresponsive, looking broken to the user. To reduce the size of the image It would be ideal to have multiple sets of emojis to choose from via configuration, instead of only the full list of emojis. At least an alternative set of emojis including only the most commonly used 100 ones or so would be great to have.

[imhvost]

Hello everyone, although I would love to use quill-emoji, I had to turn it off because the emoji image is too large (over 7MB). On an IPhone over fast Wifi, the first time that the user opens the emoji icon it takes a long time to load and the website is unresponsive, looking broken to the user. To reduce the size of the image It would be ideal to have multiple sets of emojis to choose from via configuration, instead of only the full list of emojis. At least an alternative set of emojis including only the most commonly used 100 ones or so would be great to have.

.ap{
  background-image:url(emoji-sprite.png);
}

@media (-webkit-min-device-pixel-ratio: 2),
  (-o-min-device-pixel-ratio: 2/1),
  (min-resolution: 192dpi),
  (min-resolution: 2dppx){
    .ap{
      background-image:url(emoji-sprite@2x.png);
  }
}

emoji-sprite.png

emoji-sprite@2x.png

[MartinMalinda]

If you want to just not use the image and rely on unicode, do this:

#emoji-palette .ap, .ql-emojiblot .ap {
  background-image: none;
  text-indent: 0;
  /* It's also possible to adjust spacing. To make selecting emojis easier */
  /* width: 25px; */
  /* height: 25px; */
}

It might happen that some emoji won't render to certain users though. It can still be worth it, rather than loading such a large image.

[ginobean]

Thanks, @MartinMalinda ! I was prepared to remove quill-emoji due to the 7MB issue, until I discovered your post.

Frankly, I think his css setting should be the default, going forwards.

I was not happy to discover the 7MB issue. Only reason I discovered this was that I noticed that my app seemed to freeze on first load, on my mobile device. Then, I realized it was just taking a long time to download..