35

The emoji picker is incredibly slow for me when it comes to previews. Can I cache all the emojis so it becomes useable?

you are viewing a single comment's thread
view the rest of the comments
[-] AernaLingus@hexbear.net 3 points 3 months ago

There's probably too many to serve the entire thing as a single compressed file every time, but I wonder if something like sprites could work (I know that's what reddit would do for custom icons in subreddits). I don't know how best they could be divided up--every n emotes, grouping emotes of similar palettes to maximize compression efficiency, grouping to reach a target maximum size per sprite, etc.

That's all a bit academic, though, since I just scrolled through the emoji picker and the number one problem became immediately obvious: all images are being served at full size even though they're displayed as tiny icons with a max width/height of 24 px. The total size of all the requests was something like 100 MB (!!) and once I started scrolling back up my browser had actually unloaded most of the images and had to reload them from the disk cache.

Just as a single example, the left-unity-4 emote is 348,162 bytes. If I chuck that into ImageMagick and resize so that the largest side is 24 px using resize ">24", the resulting image is 1,936 bytes--that's a 180x reduction in size. Separate from that, additional image optimization can be done to reduce size: using Efficient Compression Tool with the -strip and -9 parameters (to remove metadata and apply maximum compression, respectively) I can reduce the size of the larger by 26% and the smaller by 19%. Those savings are nice, and I think should be done eventually for the free bandwidth savings, but implementing variable image size should clearly be the priority when we're talking a potential two orders of magnitude in savings. That obviously won't be the case for every image (e.g. with the GIFs you'll probably get large absolute reductions since they're some of the heaviest files but small relative reductions because the dimensions are already fairly small), but it's definitely worth doing. An intermediate max 60 px width size could be used for the keyword picker (the one that pops up when you type :). We could even go further and resize the actual inline emotes in comments/posts, but there's more nuance there and it's not relevant to the emote picker performance.

I will be honest and say that I have zero web dev experience, but I don't think it ought to be too complicated (especially compared to the sprite or compression solutions). It's a matter of doing the initial bulk generation + optimization of alternate sized images, storing each of the sizes in separate subdirectories, and having the three different cases point to the image in the correct subdirectory instead of the original image.

this post was submitted on 28 Aug 2024
35 points (100.0% liked)

hexbear

10297 readers
84 users here now

Hexbear Proposals chapo.chat matrix room.

This will be a place for site proposals and discussion before implementation on the site.
Every proposal will also be mirrored into a pinned post on the hexbear community.

Any other ideas for helping to integrate the two spaces are welcome to be commented here or messaged to me directly.

Within Hexbear Proposals you can see the history of all site proposals and react to them, indicating a vote for or against a proposal.

Sending messages will be restricted to verified and active hexbear accounts older than 1 month with their matrix id in their hexbear user profile.

All top level messages within the channel must be a Proposals (idea for changing the site), Feedback (regarding non-technical aspects of the site, for technical please use https://hexbear.net/c/feedback), or Appeals (regarding admin/moderator actions).

Discussion regarding these will be within nested threads under the post.

To gain matrix verification, all you need to do is navigate to my hexbear userprofile and click the send a secure private message including your hexbear username.

founded 4 years ago
MODERATORS