Replace base64 CSS images with regular sprite PNGs/WEBPs?

nolanlawson / pokedex.org

Offline-capable Pokédex web site (unmaintained)

https://www.pokedex.org

Apache License 2.0

2.27k stars 325 forks source link

Replace base64 CSS images with regular sprite PNGs/WEBPs? #20

Open nolanlawson opened 8 years ago

nolanlawson commented 8 years ago

I think there may be a clever way to do this without having to download the PNG/WEBP files invidivually (also HTTP2 ought to help here). As is, I believe this is contributing to a startup lag on Chrome and may be the cause of perf issues in Firefox OS.

samccone commented 8 years ago

could do the ol spritesheet hack here :)

nolanlawson commented 8 years ago

Spritesheets caused crazy bad performance on mobile, presumably due to the fact that each of the visible Pokémon was holding onto the entire spritesheet. :/

I'm wondering if a better solution is:

normal PNGs/WEBPs with url(/path/to/png)
service worker downloads one big binary (multipart?) and then stores them in IndexedDB as blobs.

samccone commented 8 years ago

I was thinking a single spritesheet and then canvas elements to paint the single pokemon via a imagedata blob extracted from the master sheet :)

nolanlawson commented 8 years ago

Okay, that's actually really clever! :) I like it.

samccone commented 8 years ago

it might be way worse though :) hard to say without trying