I am building a mobile application that will target iPhone/iPad and Android phones. The application will involve users taking photos and uploading to my server and later on the users will be able to look at those photos on their mobile devices (although not necessarily their own photos so an Android user might be looking at a photo taken with an iPhone).
Which sizes should I save the photos to be able to cover the most use cases? iPads are 1.333 W/H, most mobile phones are 1.5 or 1.333 W/H with some rare 1.666 W/H. Specifically:
iPad: 1024x768, iPad3: 2048x1536, iPhone and some other phones: 960x640, 480x320, 800x480.
To be able to keep it manageable, I need to decide on a few certain image sizes and save the photos in those sizes. I am not really looking for help on the technical side. I can do image scaling on the server side etc. I am looking for recommendations / best practices / lessons learned about image sizes before I go too far into building it.
Which sizes should I save the photos in to cover the most use cases?
Do you recommend any client side scaling before uploading to server to save on transfer time (for example scaling down 2048x1536 iPad photos) or should I always transfer originals?
How should I handle incompatible image sizes (showing a picture taken with an iPad on an Android device for example)? Should I pre-cut those images on my server before sending to client or should I let the client phone handle image resizing?
There is also the issue of UI. There will be other things on the page other than the photo maybe a button or two for navigation. Should I go for something smaller than the full screen size while keeping the same aspect ratio when saving pictures?
I know some of these questions don't have one answer and the answers are relative but I wanted to get some opinions. Thanks.
For Android, I think the best place for you to start would be here, it has a lot of information including standard screen sizes and how to display images while keeping them in the best possible quality.
http://developer.android.com/guide/practices/screens_support.html
I'd also suggest doing as much image manipulation as possible on your server. Images are a pain to work with on Android due to memory constraints and fragmentation. Two phones may store pictures taken the same way with different orientations, and there is no simple way to handle rotations, though it can be done (thankfully, I've yet to encounter a phone that incorrectly records Exif data, but I wouldn't be surprised if they existed...). The more you rely on the phone to do, the more chances you have for error due to manufacturers putting wrappers around and otherwise customizing how it handles media.
As for how to display, ideally if your back end is already doing a bunch of different resizes, you can include your screen density when you request the images and send the best size based on the dev guide. If you want to keep differences to a minimum, at least support med or high density for phones, and extra high density for tablets.
Just my two cents, I'm sure you'll have a lot of opinions. Good luck.
I don't have a full answer for you, but I do have some thoughts...
1) I'd suggest reducing the image sizes before uploading. If I were using your application and I had to upload a 4 meg photo, everytime I wanted to use your application, I'd probably pass. And as we venture forward, we're hitting much better technology in terms of camera phones; Nokia has released a 41 megapixel camera, which I'm guessing will create rather large images. Users having to download a 4-6 MB image is also not a great idea. Just some thoughts from a user point of view.
2) I wouldn't cut the images. You don't necessarily know what parts of the image aren't important, so how would you know where to crop it? Let the phone size the pictures accordingly and rely on the ability to zoom into pictures to see things at a larger size.
3) You could try to make a UI that hides buttons. If you have something really simple (like just going forward or backwards) you could rely on gesture controls (swiping) to move around your application. You can implement sliding drawers and menus that take up space temporarily, when in use, but give you the space back when you want to look at the main content (pictures, in your case). I've typically found that hiding buttons doesn't work well and people seem to want/search for buttons that let them navigate, but the Android gallery works just fine with menu + swiping only, so who really knows.
Related
Does android want that we put different version of an image (for different dpi) to avoid resizing-artifact because their scaling algorithm is not quality-efficient (to be fast i think) ?
But anyway, it's obvious that android will scale all image just for maybe some pixels, so, resizing-artifact does ONLY appear when we do a big resizing ?
Through this questions , i want to understand the utility of putting different size of image and why we don't just put a big resolution image and let android scale down every time.
(I have also a suppositon that i want to confirm, maybe the algorithm take more time when the scale factor is important)
Thx.
If you put the highest quality images in your app, your app consumes more memory (RAM) and if the device has less memory than your app freezes more frequently. This will not provide a good user experience as we all want that our app should be smooth in performance.
Besides all, I had also tested that if we put larger images and try to display them, Sometimes the app also crashed by giving an error of out of memory.
If you want to only place one image in your app to reduce the size of your app than I advise you to do it with .svg images. These images are scalable and the CPU does not have to do extra processing to display them.
I hope it will help you. Thank You
I am having a problem on how to display user provided images to other users across different devices. For example, I have multiple copies of varying sizes for the same image for my app. These are images I created during development and are part of the app which can support different sized screens. Inside of my app though users can upload a picture of themselves. Obviously now I do not have control of the dimensions of this image. Some users may have new fancy phones which produce very high quality pictures while other users may have not so great phones and produce lower quality images. As well, with user uploaded pictures there is only one image upload. What is the best practice to display these images across various devices. So a user who took a picture on their new iphone 6 will appear nicely on a smaller 3 year old android device as well as a photo taken on a smaller 3 year old android device will appear nicely on an iphone 6?
http://developer.android.com/guide/practices/screens_support.html provides information on how to control images inside of android if I the developer have control of the images, but what if I don't? What if I receive a low quality image from a user, what is the best practice to show it nicely on an ipad for instance?
You can read those guide:
http://developer.android.com/training/displaying-bitmaps/index.html
http://developer.android.com/training/displaying-bitmaps/load-bitmap.html#load-bitmap
When receive your image, you can read its size and decide the scale size it base on user device. (But a small image still looks nasty on a big screen).
Beside, I think you can use other download library like Picasso or Glide to support download and decode image.
Hope this helps.
After some years of Android development, i took months wondering why should i use xml layouts to make the UI of my Android App.
I understand that part of MVC and real-time graphical interface design.
If im wrong please take me out of ignorance and forgive me but , I´m Unable to set a view´s position, exactly, 8% of screen width for margin and 70% of screen width for width, for example.
Creating the UI in that way and taking care of screen aspect ratio ensures the app will look proportionally exactly the same in all devices.
As this post sums it up, we are told to use dip units and a nice bunch of xml files for every layout of our app if we want to support different screens. (Why they call it density-independent if we have to make it different for each screen density?)
But, even doing that, as (again) the Google Doc says
The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion.
And in place of not necessarily they should say mostly never looking at the incredible number of different devices. Depending of your project, this may be a problem. (Or do you want your client looking at your "slightly-decomposed" UI on a who knows chinese device)
I could ask the same for the image resources, but that whould be another question, i use to put the highest resolution on -nodpi then downscale by code to screen-width-dependent desired size, instead of putting 10.000 images at all resolutions.
Creating the UI in that way and taking care of screen aspect ratio
ensures the app will look proportionally exactly the same in all
devices.
This is the way Apple does it, and this why when you open a folder on a 9.7 inch iPad with beautiful retina display, it only displays 9 icons.
A tablet is not just a bigger phone. It's really not. Also, iOS devices have mostly the same aspect ratio, so that's how they took care of the aspect ratio.
On Android however, you can't just say that you "took care of the aspect ratio" problem and that this problem magically goes away. Your best bet is to use Android best practices to handle aspect ratios correctly.
That being said, don't over do it either. You don't need to use all 8 density buckets for instance. Look at the official dashboard to see what devices people are actually using, before you try to optimize for every scenario possible.
Also, you don't have to listen to Google all the time. For instance, I am sure that Google would love that you translate your application so that it's available in more then 68+ different languages worldwide, but what's good for Google is not necessarily good for you. Android actually lets you choose the tools you want to use to make your application. They don't force you to use any particular one.
I understand that Andengine gives us option to scale our scene to any size screen that the user may have.
My question is if it would be better to develop for a larger resolution, say 1280/800 and scale it down for smaller screens OR to go for smaller resolution, say 800/480 and scale it up on bigger screens?
I did try to test this in a sample game by developing it for 1280/800 and scaling down (by ratioResolutionPolicy) to 800/480, and the results weren't satisfactory, there was stutter every here and there the framerate on the debugger though showed 60+. Is it bad programming on my part or does it have to do with the scaling down of the pixels, should I develop for smaller screen and scale it up?
I guess it depends on what kind of graphics you are using.
Say, for example, you want to create something in a retro-gameboy-pixel style, then it makes more sense to use small images and develop for a small resolution (like 480x320). Pixel graphics can be scaled up without loosing quality, but not down (then the pixels loose form).
But if you want high resolution graphics you are most likely better of developing the whole thing for a big resolution and let the AndEngine scale it down.
In both cases the quality of the pictures also depends on the TextureOption of your TextureAtlases as well.
Anyway, I can imagine that neither scaling down, nor scaling up is more efficient. Scaling is done by openGL and should go quite quickly. The downside of using big resolutions though, is that the device has to hold huge images in it's memory and the of course processing big images always takes more time than processing small images. So maybe the best way is to develop for middle-size devices (e.g. 960x640) ?
I know this isn't much help, unfortunately it is a lot of try and error to get the best results for your specific requirements.
christoph
To achieve good result on all type of android device you have two ways to follow from my perspective.
First, you have to develop and use two graphics to handle all the type of devices. For example one with resolution 1024x600 and other with 480x320. Based on device current resolution you have to load specific one type of graphics.
Second, you choose any single resolution that best suits to you and have great share in the market. Develop and use graphics only for that resolution. For other resolution scale that graphics based on aspect ratio. For this you have to create super class of sprite and change value of x,y,height and with based on aspect ratio calculate.
This was my experience that I share with you. If you have any doubt then feel free to ask it.
As we know it there are several screen layout out there on various android devices. Now, my question is, what's the best solution for displaying image on screen (full sized image) on that various device?
Should I (this is several strategy I have in mind right now):
resize every images for that target device? (with the cost of resizing it and lost of quality on larger device)
create several images for all or several common screen size? (with larger download size)
create core application and let them download images appropriate to that screen size (that means, I have to prepare hosting of those images)
something I don't know yet...
So, if you guys have experience in this kind of situation, your recommendation is greatly appreciated.
Update: My application will have several (20-30) images.
This is documented ( http://developer.android.com/guide/practices/screens_support.html ) and answered quite a few times already I believe.
Create different images for the different screen resolution (store in drawable, drawable-hdpi... accordingly).
You can also define different layouts for different screen sizes (although to display full screen images, it does not sound like you need that).