While making iOS Apps, we generally used to supply #x,#2x,#3x images. And based on my knowledge in case of android, there was some approx six different sizes
I have started working on react-native and came across the image issue.
My Question are: Do I need to provide images with all different sizes (i.e. approx 6-7 image sets by combining iOS and android) Or only 1 image and rest will be taken care internally? Will it look blurred on higher resolution phones?
Thanks.
You still need to provide multiple images. According to the Images documentation, if you are using an image named check.png, you also have to include check#2x.png and check#3x.png.
Quoting:
The packager will bundle and serve the image corresponding to device's
screen density. For example, check#2x.png, will be used on an iPhone
7, whilecheck#3x.png will be used on an iPhone 7 Plus or a Nexus 5. If
there is no image matching the screen density, the closest best option
will be selected.
Related
When running my application in Expo all images look fine and lovely, it's just when I deploy to the app store suddenly my images are huge.
I made sure that I follow Expo's standard on image spec as written here;
https://docs.expo.io/versions/latest/react-native/images/
Even weirder is the images look fine on iPhone X but the size is off on iPhone 7 (but on that same iPhone 7 in Expo everything looks ok). So just wondering if anyone has experienced any issues going from Expo to App Store with images and if they did how did they solve them?
Note: I am yet to deploy to Google play so haven't been able to see the effects there yet.
All input greatly appreciated
Just try to use WIDTH and HEIGHT from Dimensions
And then set width to your image by multiplication of WIDTH on some coefficient.
Im building multiple apps in React-native and I know that there its possible to put in multiple images that have a different density. React-native selects them automatically in the tag. I know for native Android and iOS they do the same.
I get it if you want to have some changes for lower density devices. Maybe a other design of a icon or something like that. But what if you have the 3x and then resize it to a 2x and 1x. Then you have the same image but with a smaller file.
Now my question is does it really matter to add the 2x and 1x if I already have the 3x? I don't see any performance of quality issues with that.
I guess (but not sure) it can give a RAM issues with large amount of images shows simultaneously.
Plus a famous android developer says that Android has an issue with downscale big images.
I am making an app, and recently, out of the blue there has been a problem.
When I ran my app on my iPhone, (which I have been doing fine for the last few weeks) the images show up at completely different sizes.
For example:
The start button on the Xcode simulator is xScale 2.0f. On the iPhone it shows to be roughly half that size. I keep all the images in a .atlas file, and they are all .png. I am using sprite kit as well, and the iPhone I am using is on iOS 7.
Here is what I'm getting:
Unwanted result (As is on iPhone)
Here is what I would like:
Desired Result (As is on simulator)
This has also happened throughout the app, with other sprite nodes. Does anyone know how I can fix this problem? Thank you in advance, and I would have posted screenshots if it wasn't for the 10 rep limit.
Edit:
I have now got most of the images working, by creating a #2x version of all the images.
But there is still one graphic that is this time TOO LARGE on the iPhone. Thank you for all your help so far, does anyone know how I can make that one image smaller on the iPhone?
Your PNGs need to be labeled with a 2x or 3x. This is Apples way of accounting for the retina screens.
"ImageFileName#2x.png"
for Iphone 4,5,6
"ImageFileName#3x.png"
for Iphone 6 Plus
If you have no extension, Apple will assume it should make your image 2 or 3 times bigger to account for the extra pixels in the retina displays. If you add the #2x or #3x, Apple assumes you provided the image already accounting for the retina pixel count.
I am developing an iOS application for iPad. Currently I am using images of resolution 2048×1536 px (iPad3 resolution). If I run this app on iPad2 or iPad1 will it get fitted to its resolution (1024×768 px)? Or should I use a 1024×768 images and specify image#2x for iPad3?
Since I only have iPad3 , cannot know how the images will be seen in the lower resolution devices. But it should work perfectly on them too.
Any help greatly appreciated. Please cite your sources.
You could try this in the simulator if you don't have a non-retina device.
It's certainly possible and will usually look fine (at least for photos, text and icons may look worse when scaled down), but you are wasting quite a lot of memory which is pretty scarce on an iPad 1 (it only has 256 MB), so you should usually also include non-retina images.
Automatically scaling down images typically results in visual artifacts, which is why the SDK includes an easy way to include different versions of any image, instead of just a single big one.
As far as I know, all iOS devices (within the same family) have resolutions that are multiples of each other so automatic scaling artifacts are somewhat mitigated, but it is still best to include the correct resolution.
I am developing a cocos2d game. I need to make it universal. Problem is that I want to use minimun amount of images to keep the universal binary as small as possible. Is there any possibility that I can use same images I am using for iphone, retina and iPad somehow? If yes, how can I do that? What image size and quality should it be? Any suggestion?
Thanks and Best regards
As for suggestions: provide HD resolution images for Retina devices and iPad, provide SD resolution images for non-Retina devices. Don't think about an all-in-one solution - there isn't one that's acceptable.
Don't upscale SD images to HD resolution on Retina devices or iPad. It won't look any better.
Don't downscale HD images for non-Retina devices. Your textures will still use 4x the memory on devices that have half or even a quarter of the memory available. In addition, downscaling images is bad for performance because it has to be done by the CPU on older devices. While you could downscale the image and save the downscaled texture, it adds a lot more complexity to your code and will increase the loading time.
There's not a single right answer to this question. One way to do it is to create images that are larger than you need and then scale them down. If the images don't have a lot of fine detail, that should work pretty well. As an example, this is the reason that you submit a 512x512 pixel image of your app icon along with your app to the App Store. Apple never displays the image at that size, but uses it to create a variety of smaller sizes for display in the App Store.
Another approach is to use vector images, which you can draw perfectly at any size that you need. Unfortunately, the only vector format that I can think of that's supported in iOS is PDF.