Handleling image size on multiple device display

1

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

2

Hey Norwill,

use retina images -> the downscale will be done by the browsers automatically :wink: or you with your css (see mediaQueries for the different screen resolutions).

Greetz, bengtler

3

The mayor problem is android, when the screen is 2.x mayor for the images, this is more big that retina image. How handle this?

4

Sry, but i do not understand your last post.
Maybe you may say it with other words?

Greetz, bengtler

5

Right now my worry are the android devices

You can see here http://developer.android.com/design/style/devices-displays.html the list of resolutions or scale of resolutions in android, 1x (base line), 1.5x, 2x, 3x, 4x (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).

The retina image for apple device is 2x respect with the base line, how design or make image for the others 3x and 4x devices ?

Sorry for my english, i hope you can understand now.

Best Regards

6

For icons you can use icon-fonts -> there you have good quality for every font-size.

Than you could create images for the max. resolution.

If you have a backend, which stores for example cd covers for a cd list.
Your backend has to generate and calculate all image sizes and be able to provide the right one for the right device or you have to take the correct one on clientside (like my max-width of the device is >768px -> then use image_big…).

For verrrry big devices where the retina images does not fit -> use the images as background image with

background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

to stretch it over 100% width.
Then tt is maybe a little bit blurry.

With retina images you are on the save site (for now :wink: ) for mobile devices.

Maybe someone has an better idea?

1 Like
7

Thanks @bengtler i’m using icon-fonts example fontawesome and the ionic fonts default.

In the backend i have storage (the image in folder and the route in db) on the max resolution then on the code i do this

This class “item item-image” resize the image to the screen, then in my css override some attributes to fit on the width of the screen

For my screen backgrounds i’m using some like you suggest (making a little change for iPhone 5).

For mi image buttons i’m using the max resolutions and let the browser do the magic.

To now all works perfectly.

Thanks for your help

8

no probs :wink:

You have to use “preformatted text” to show us html code. The </> symbol in the toolbar when you write or edit a forum post.

9

I dealing with this “Any way to rearrange objects with css, javascript or any libs?” and post a question here

Now my dilemma is this rearrange all the objects for the application look more neat as possible, and not “empty” spaces are or very “tight” objects appear

This will be resolved with css media query (as i did for backgrounds and screen size), but after investigating the different screen sizes on smartphones market got me with the following:

Exist an average of resolutions that you can see in this chart

Similarly can review an interesting list on wikipedia that leads you think that there are no resolutions on the graph and can be important.

Whereupon i wonder there is a way to rearrange other than having to write a lot of media querys wide screen combination.

And this is based on that the next: the vertical space between a between an object A and an object B in 1280Hx720W screen should not be the same as on a screen 1920Hx1080W (though both have the same pixel ratio 16:9) as that would make are empty spaces. I know exist hearings where there is no choice, but you can arrange objects to be pleasing to the eye.

I hope I explained and can count on your support to end my dilemma

NOTE: on the web the majority speak of adapting images with css media queries, but not rearrange objects

PS: Resources investigated

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

Angular.js data-bind background images using media queries

http://bjango.com/articles/min-device-pixel-ratio/

http://en.wikipedia.org/wiki/Comparison_of_Android_devices