Retina Emoticons

[AutoItScript]

The new IPB4 looks great on a retina/HiDPI screen. Except for emoticons - it's like someone is sand papering my eyes . Please consider adding some sort of support for retina emoticons. Even if it's just adding a customizable width/height to each emoticon so that you can use @2x assets and scale them down. Preferably be able to load @1x @2x assets and use the img srcset tag (for all browsers apart from IE, fallback to JS for that maybe). Anything!

As a proof of concept I wanted to come up with something for my 3.4.7 / soon-to-be-4.0 site that would allow me to use retina emoticons without modding the board at all so that if such support becomes available in a later version I wouldn't have issues on upgrade. This is my first attempt at a crazy solution - if anyone can think of a different approach then let me know as what I've done seems a little elaborate. The way the storage system works in IPB 4 (where emoticons can end up in monthly folders with GUIDs on the end) complicates a few of the ideas I had.

My first thought was to just upload @1x and @2x version of each emoticon and then use http://imulus.github.io/retinajs/ to rewrite the images for retina clients. The problems with this is:

• Forums can serve a lot of image assets, and the javascript would be checking for and receiving 404 errors for 95% of images on a page. Not really performance friendly for the client or my server.
• If an emoticon is called "monthly_2015_04/my_emoticon.png.14229aa3222" then there is no easy way to upload the @2x version that would need be "monthly_2015_04/my_emoticon.png.14229aa3222" - sure you can manually upload it via ftp into the same foldert but it's going to get nuked the next time a "Remove Orphaned Attachments" task is run.

Without modding my board a javascript file still seems like a decent idea so I've modified retinajs with the following changes:

• Allowed it to work with filenames that can have a guid at the end
• Additional config options for a source_url.  Only filenames served from this url are subject to the retina treatment
• Only files with @1x in the filename are processed. Along with the source_url this means that most of the images on the forum will bypass the script so performance should be maintained. I just need to make sure I add @1x in the filename of my emoticons.
• Additional config options for destination_url. When the @2x file is requested it can use a path outside of the forum rather than the original source folder. Therefore I won't risk any forum task "cleaning" my @2x emoticons. 

So on my IPB4 board I have a folder structure like this (with a custom folder called cdn that I added):

forum / uploads / monthly_2015_05 / my_emoticon@1x.png.14229aa3222   (uploaded through the ACP)
forum / cdn / js / retinajs-custom.js
forum / cdn / retina-redirect / monthly_2015_05 / my_emoticon@2x.png.14229aa3222    (manually uploaded through FTP and named to match that from the ACP)

When a page is loaded the @1x emoticons are loaded for everyone, then the retinajs script checks if it is a HiDPI device and if so it scans img tags for paths that match @1x and the URL we configured. If it matches it checks for the @2x version on the alternate URL and then loads it in. It sounds crazy but it's the same technique the Apple site uses - if you refresh you can see the @1x assets briefly before they are replaced with the @2x ones.

This is a lot of work, but people like their emoticons   Hopefully what I've done is upgrade-proof. But again, please add some support for this into the software so I can retire it - for my sanity!

 

 

[Kirill N]

You can download the Emoticon Class plugin  by @sijad from the Marketplace and change the size of the image in css.

Please no more javascript...

[AutoItScript]

Unless I misunderstand that won't be work because:

• You'll be serving the @2x image all the time. So it will look good on retina but a 40x40 icon that's shrunk to 20x20 for non-retina tends to look terrible.
• IIRC you can only specify absolute widths/heights in css - percentages only apply to containers. So unless all your icons are exactly the same size you will have issues. Not a bad limitation I suppose, but I currently have some short but wide emoticons

[Vikestart]

• IIRC you can only specify absolute widths/heights in css - percentages only apply to containers. So unless all your icons are exactly the same size you will have issues. Not a bad limitation I suppose, but I currently have some short but wide emoticons

img { width:auto;height:18px; }

 

[AutoItScript]

You can download the Emoticon Class plugin  by @sijad from the Marketplace and change the size of the image in css.

Please no more javascript...

​I just browsed the emoji plugin that @sijad has done. That looks very interesting. If those emojis looks OK scaled down then I think that may be an option. I do worry about plugins though. I heavily modded my 2.0 IPB and I really suffered. I've been keeping it standard since

[Kirill N]

​I just browsed the emoji plugin that @sijad has done. That looks very interesting. If those emojis looks OK scaled down then I think that may be an option. I do worry about plugins though. I heavily modded my 2.0 IPB and I really suffered. I've been keeping it standard since

​No I meant the plugin called "Emoticon Class", not the Emoji one. It simply adds a "class=emoticon" to the emoticon img and you can edit it with css.

[opentype]

… but a 40x40 icon that's shrunk to 20x20 for non-retina tends to look terrible.

​Why? Today’s browser apply anti-aliasing for any type of image-resampling and at least downsampling works almost identical to an image downsampled in Photoshop and then used as 1x image. You would hardly see a difference. 

On my 4.0 site I used this technique for the emoticons and basically all images (in posts, articles and so on) are delivered in a larger resolution than a regular screen can show. That’s perfect for a responsive theme, where the image size changes with the screen size anyway. Forcing 1x images wouldn’t make much sense. 

[sobrenome]

It would be nice if there was a font-icon for emoticons!

[sobrenome]

http://emojisymbols.com

[opentype]

It would be nice if there was a font-icon for emoticons!

​I have a list of Emoji fonts: http://typography.guru/list/emoji-fonts-r8/

But since it’s like 700 to 800 individual graphics, Emoji fonts can get quite large. 

[AutoItScript]

​Why? Today’s browser apply anti-aliasing for any type of image-resampling and at least downsampling works almost identical to an image downsampled in Photoshop and then used as 1x image. You would hardly see a difference. 

On my 4.0 site I used this technique for the emoticons and basically all images (in posts, articles and so on) are delivered in a larger resolution than a regular screen can show. That’s perfect for a responsive theme, where the image size changes with the screen size anyway. Forcing 1x images wouldn’t make much sense. 

​There's a big difference in some images. I've always used the scale down method for big items that resize well (like my logo) but I'm usually disappointed by how smaller images scale. There's a reason that ckeditor has @1x and @2x images in the toolbar - some just looked blurred when scaled down so they need hand retouched versions. It's like when you try and make a 16x16 favicon from your 48x48 icon. You can't just scale it - it generally looks like a blob. However, since I've had my macbook and gotten used to the retina display I care less about how things look on older machines and am sometimes tempted to just let them have blur - that feels a bit selfish though 

A lot of people are shying away from that scaling method too because @3x and @4x assets are already here and then scaling small images down from @4x to @1x will definitely look awful. Best to have a flexible method in advance.

The method i'm really interested in is this: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ - that way you can choose on an image by image basis which asset gets served to which browser and only a single asset is served. That's the best of all worlds. I just need to work out how to implement it within the current emoticon system because it's not something that can be done with pure css.

[AutoItScript]

​No I meant the plugin called "Emoticon Class", not the Emoji one. It simply adds a "class=emoticon" to the emoticon img and you can edit it with css.

​I'll take a look - thank you.

Edit: This has actually given me an idea. I can create my own plugin in a similar way but instead of adding an emoticon class I can also optionally add the srcset attribute which points to my HiDPI images.