Working with images in Sencha Touch for different Resolution Touch Device
extjs, sencha-architect, sencha-touch, sencha-touch-2
Solution
1) For simplicity's sake, I personally go with using the highest resolution/size for each overall platform (Android, iPhone, Blackberry). The phones will scale the images accordingly. It just makes things way simpler; the only reason in my mind to not do this is if you have a truly massive total image size and optimizing is the difference between >10mb. Any time a phone has to scale any images, there is apparently a small performance hit, but it's ultimately not noticeable at all to me.
2) Sencha supports retina display. As long as you use a sufficiently high resolution image, it will be scaled properly. Make sure to include retina display splash screens and app icons, of course.
Problem
I'm planning to use Sencha Touch 2.x for my websites mobile (Light weight) view. I am new to Sencha development. I know HTML 5 very well. Couple of things I would like to know before I would proceed with the development. How Sencha manages the images. As I am planning to work with different resolution touch devices (i.e. iphone4s, iphone 5, iPad, Android and Blackberry 10). I know media query that used in HTML 5. Do we need to pass different images for each resolution or sencha will compare image for each resolution. (FYI... I also come across also How to add images for different screen resolutions in sencha touch? suggest the HTML5 media query. Is it the only way? and also refer Creating a splash screen in Sencha Touch for different mobile devices resolutions which is for splash screen) Is it support Retina Display? (i.e. @2x in iOS). if not than how we can manage the retina display images. Thanks in advance for any valuable suggestion.