Handleling image size on multiple device display on cordova-ionic-angular app

Question

I'm building a new app with this great tool and i have a question to solve.

What is the best way to handle imnage size for multiple scren and multiple devices.

Apple = retina and non-retina Android = ldpi, mdpi, hdpi, xhdpi, xxhdpi and tablets (all this with multiple screen resolution) BlackBerry10 = one resolution (but not equal to the others) WindowsPhone8 = one resolution (but not equal to the others)

For this case, what is the best way ?

1. Use SVG images (Optimizacion, perfomance, size of app) ??

2. Dedicate CSS tags for device pixel ratio (CSS Image Replacement) (the designer can kill me :smile: lol ) see the list http://bjango.com/articles/min-device-pixel-ratio/

3. CSS Sprite sheet

4. Another way

Before the decision, think in what is the best to apply in all devices.

Thanks in advance

Solution

There really isn't a single way to do this since each implementation of an image will require a different approach depending on its purpose. SVGs are great but not everything works as an SVG.

Media queries will be your ally.

See this: supporting multiple resolution and density of images in phonegap

and this for an alternate approach: Angular.js data-bind background images using media queries

There are also some nice polyfills for the html5 picture element which you might find useful.

See: https://github.com/scottjehl/picturefill

...and its angularjs directive implementation https://github.com/tinacious/angular-picturefill

Comments

[Brujodedor]

What do you think about use a high resolution image that support in the more big devices example: Samsung S5 or Nexus 5 and the browser do the magic?

[jnsnvt]

Having the browser scale down a large image isn't ideal but it works in a pinch