Support for reactions and smilies in HiDPI (e.g. Retina Displays)?

Moshe1010

Moshe1010

Well-known member
It seems that reactions and stock smilies are all blurry for users with an iPhone X (released in 2017) and newer, or any Macbook Pro that was released after 2012.

This is probably also true for Android users (e.g. Samsung Galaxy and windows machines with QHD or QHD+ displays).

Just to demonstrate how does it look like on my iPhone (feels a bit like 1999):

1666819746871.jpeg1666819739930.png
 
Last edited:
The 2x image replacement doesn't apply to sprite based images.

The width of the smilies in the sprite sheet is 44px and using the default parameters we set for the sprite mode, they are scaled down to 22px so, effectively, to a point they are already "ready" for retina displays - at least circa 2017.

Pixel density of displays may well have increased in recent years thus making them feel slightly less defined, but as always there's a trade off. We could double the native width of the images and scale them down with the sprite parameters which would help but then the file size of the sprite would be doubled too.

FWIW if this didn't already support retina ways to a point, this is what it would look like:

1666861733626.webp

The first few including Cool are scaled down to 22px and served at 22px.

Stick out tongue and the following ones are 44px scaled down to 22px so there's a bug difference.

Still not quite 1999 it has to be said. That would look something like:

1666862322478.webp
 
Chris D said:
Pixel density of displays may well have increased in recent years thus making them feel slightly less defined, but as always there's a trade off. We could double the native width of the images and scale them down with the sprite parameters which would help but then the file size of the sprite would be doubled too.
Click to expand...
What's the size difference when doubling them? if it's a few kb more, then with the internet speeds these days I guess it won't be an issue. Maybe can also optimize the images before making a CSS spirit and decreasing the size even more. Or if it's not that hard changing the entire reaction mechanism to support font (emoji) insertion instead of just images/css spirit (like GitHub's reactions).
 
Moshe1010 said:
What's the size difference when doubling them? if it's a few kb more, then with the internet speeds these days I guess it won't be an issue. Maybe can also optimize the images before making a CSS spirit and decreasing the size even more. Or if it's not that hard changing the entire reaction mechanism to support font (emoji) insertion instead of just images/css spirit (like GitHub's reactions).
Click to expand...
I mean, if you double the size of an image, the file size is going to roughly double.

But, regardless, they do not look bad as they are and no one is going to be scrutinising them that closely. Feel free to make a suggestion in the suggestion forum for future consideration but for now it is what it is.
 
I'm using SVGs for my reaction images, but I've been forced to render them to PNGs for mobile devices because otherwise a number of lower-end mobile devices have horrible performance (it made the entire page stutter and lag when scrolling).
 
Xon said:
I'm using SVGs for my reaction images, but I've been forced to render them to PNGs for mobile devices because otherwise a number of lower-end mobile devices have horrible performance (it made the entire page stutter and lag when scrolling).
Click to expand...
Hhmmmm.... I'm using SVGs also but haven't seen problems with performance like that. Do you recall which devices were problematic?
 
Would be great if XenForo just supported using Font Awesome icons or native device emojis for all the things. PNG images and sprites are so 2000. Give me vector without needing to download anything extra. :)

Personally, I'd use these device native emojis for the 6 default reactions.

1666985183601.webp
Being vector based, someday if there are 5000dpi devices, it doesn't matter because they are infinitely scalable and the font used to render them is built into people's devices already.

Would be nice if you had the option to use image/sprites, Font Awesome icons or native device emojis for reactions, editor smiles, etc.
 
Kevin said:
Hhmmmm.... I'm using SVGs also but haven't seen problems with performance like that. Do you recall which devices were problematic?
Click to expand...
I can't find the support threads, but it was relatively recent (mid last year-ish). It is why my SVG Template add-on had the "Render SVG's as PNG for mobile devices" option added in this update:
xenforo.com

Svg Template by Xon - Updates

xenforo.com xenforo.com
 
You must log in or register to reply here.
Back
Top Bottom