Support for outputting PNG's in many different pixel ratios. #20

wants to merge 7 commits into from

3 participants



  • Better support for Android 2.x.
  • Some assets in our projects are also used in apps and other websites

The available pixel ratios are configurable:

pngpixelratio: [1, 1.5, 2]

This will output CSS files for fallback and data png: icons-fallback.css, icons-fallback-1.5x.css, icons-fallback-2x.css etc.

It will also output PNG's: bear.png, bear-1.5x.png, bear-2x.png etc.

grunticon.loader.js is also updated with feature detection by using devicePixelRatio to determine which version of the files that should be included.

Hope this intrests you!

Filament Group member

This sounds great! I'll look it over, thank you.

Filament Group member

Okay, looked it over. I like the idea, but we're wondering if there are enough devices that have HD resolution but have no SVG support. In our device lab, it seems there are very few that would fit that category... like maybe an older Android running 2.3 browser that happens to have a screen with higher than 1x density.

Mostly, I'm concerned about adding JS to the loader to support a seemingly small set of devices (particularly when a fallback SD image already works okay).

Your thoughts?

Filament Group member

Yeah; I’m with Scott on this one. It’s a good idea for sure, but it does mean a lot of added complexity for the sake of a slightly enhanced experience on a handful of devices.


Thanks guys for your answers!

I do agree that this comes at a cost.

Some more background info: This is going to be used on a high traffic mobile site in Sweden where HTC Desire and similar devices was very popular back in the day and we still get traffic from 480px Android 2.3. They have 1.5x pixel ratio. We can live without it, but would be nice to get crisp graphics on those devices as well.

Another reason for doing this, and probably what made us do it, is that we have apps, desktop websites and other sites that use the same assets, but they do not use SVG. So it is very handy to let grunticon generate 2x graphics for us as well.

So there is probably a few different solutions:
1) let the code stay in the fork as is
2) make it easier and less complex by only supporting 2x (Android devices with 1.5x would download a bit more but still get high resolution graphics)
3) Create 2 versions of the loader

Either way, it would be nice to make it available as an npm package in some way.


Hi guys, would it be ok for you if I add this as an npm package as grunt-grunticon-highrespng? I rather do that than and keep it open than to commit it to a private project repo.


Filament Group member

Ok, thanks!

@4nd3rs 4nd3rs closed this Jan 7, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment