Why is it that after i compile the app, the images/png's and icons are in a lesser resolution then in my design screen or even in my web environment. Nowhere can i find settings to modify that. I want my phonegap build to be 100% quality and not in the resolution that is in now. I'm really gutted with this!!!
Are you designing for a Retina display iPhone/iPad? If so, you will need two different sets of images for Retina and Normal display iPhone/iPad devices. I believe the Retina display uses 326 ppi, and the normal display uses 163 ppi.
Did you take both screenshots from an emulator running the build or is the after screenshot from a physical device?
I notice the After screenshot is 2x the Before screenshot. If it is an emulator, what device are you emulating on?
Many ways of doing this. You could create a conditional CSS file and load it only for Retina (HiDPI) devices such as iPhone 4s, iPad Retina, etc... You could also use media-queries in your existing CSS file to push different icons/ images for retina devices. Here are some tutorials/ walkthroughs you could follow:
All the best.