Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Use higher resolution images #84

Closed
Krinkle opened this Issue · 4 comments

2 participants

@Krinkle

GitHub now links to the 64px images (at least on devices with hidpi screens, such as a MacBook Pro with Retina display) and displays them in a 20px box.

It appears the 64px images are in this repository, but they're not being used on http://www.emoji-cheat-sheet.com/ ? This makes them look pixelated on hidpi screens:

Screen Shot 2013-02-21 at 11 12 17 AM

fyi: This screenshot is not enlarged, nor is the OS or browser zoomed in any way. This is a straight screenshot from my screen. It looks inflated on 1:1 pixel ratio displays due to the higher pixel ratio.

@arvida
Owner

Yeah, it time to fix this. :blush:

We currently generate a sprite on deploy, each emoji is 22x22 px in that sprite. I am going to double this and hope the sprite file size doesn't get to enormous.

@Krinkle

Hm.. how does that work though? Displaying a 64px crop from a sprite in a <= 32px background area.

I've abandoned sprites long ago in favour of data uris, especially when it is in a built script (since data uris are even worse than sprites to deal with manually, but that's irrelevant when it is done automatically).

The build script would read them from disk, base64 encode it and embed it as data URI in the stylesheet. Gets you the best of sprites without the restrictions of sprites, and all together after gzip is even smaller and saves one more http request (the one for the image).

See also the CSSMin library of MediaWiki's ResourceLoader, which does this (you may be able to borrow some logic from it if you need):

@arvida arvida referenced this issue from a commit
@arvida [#84] Retina sprite
* Generate a extra retina sprite
* Use media queries to select witch sprite to use
a18142e
@arvida
Owner

Interesting, I haven't worked that much with data-uri. Need to checkout those more.

I made it so a double resolution sprite is also generated and then I use media queries to select which sprite is going to be used. The retina sprite gets kinda big right now, gonna see if I can optimise it :sob:

@arvida arvida closed this
@Krinkle

Aha, background-size to the rescue. Nice.

btw, any idea why Gzip compression/encoding is not enabled? I thought that happened on GitHub pages by default. That should reduce the size a lot. It's several megabytes now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.