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 ?
Use SVG images (Optimizacion, perfomance, size of app) ??
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 ) for mobile devices.
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