I'm having an issue displaying my retina sprite sheet on iOS devices. It was displaying correctly original but now - since adding more images to the sprite - it no longer shows up on the front end.
I'm wondering if there is some sort of size limit to images that can be displayed on iOS? The sprite itself is very large in terms of pixels (thankfully not in terms of file size). 1780 x 6300.
I've search around and this blog says there is a size limit:
http://dev.billysbilling.com/blog/The-retina-trifecta-CSS-sprites-IMG-tags-and-SVGs-oh-my
Is it true?
On very old iOS devices, the largest texture that can be created in OpenGL is 1024x1024. Newer devices support 2048x2048 and higher. It's unlikely that any devices support textures larger than 4096x4096. Try those 3 sizes and see which is the largest that work for the devices you're targeting. Non-square textures are limited to the same maximum width or height as a square texture.
Related
from UIImage reference:
#property(nonatomic, readonly) CGSize size
The dimensions of the image, taking orientation into account.
Discussion
In iOS 4.0 and later, this value reflects the logical size of the image and is measured in points. In iOS 3.x and earlier, this value
always reflects the dimensions of the image measured in pixels.
What's the difference between pixels and points in iOS?
A pixel on iOS is the full resolution of the device, which means if I have an image that is 100x100 pixels in length, then the phone will render it 100x100 pixels on a standard non-retina device. However, because newer iPhones have a quadrupled pixel density, that same image will render at 100x100 pixels, but look half that size. The iOS engineers solved this a long time ago (way back in OS X with Quartz) when they introduced Core Graphics' point system. A point is a standard length equivalent to 1x1 pixels on a non-retina device, and 2x2 pixels on a retina device. That way, your 100x100 image will render twice the size on a retina device and basically normalize what the user sees.
It also provides a standard system of measurement on iOS devices because no matter how the pixel density changes, there have always been 320x480 points on an iPhone screen and 768x1024 points on an iPad screen.*
But at the same time, you can basically disregard the documentation considering that retina devices were introduced with iOS 4 at a minimum, and I don't know of too many people still running iOS 3 on a newer iPhone. But if such a case arises, your UIImage would need to be rendered at exactly twice its dimensions in pixels on a retina iPhone to make up for the pixel density difference.
*Starting with the iPhone 5, the iPhone's dimensions are now no longer standardized. Please use the appropriate APIs to retrieve the screen's dimensions or use layout constraints.
The Ultimate Guide To iPhone Resolutions
These guys did an awesome job, take a look here — The Ultimate Guide To iPhone Resolutions.
Using data from http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions I set up the formula sqrt(pointWidth^2+pointHeight^2)/diagonalInches to figure out how many points each phone displayed per inch.
Results:
iPhone 2G, 3G, 3GS, 4, 4s = 164.825201164068082 Points Per Inch
iPhone 5, 5s = 162.9846618550346903
iPhone 6 = 162.8061416117083255
iPhone 6 Plus = 153.535954278463216
As you can tell a point is roughly the same size on each phone. Using the same webopage, you can set up the same formula with the pixel values, and you'll notice large irregularities due to higher pixel densities on the newer phones.
iOS pixels, points, units
We should review them in context of
coordinate systems
absolute and relative positioning
Differences
pixels(absolute) - pixel-based coordinate systems of current screen. Is used in very specific cases. For example CGImage (The width/height, in pixels, of the required image), CGContext
points(virtual pixels, logical pixels)(absolute) - default Point-based coordinate systems. It is a kind of density independent pixel - dp in Android.
units - unit coordinate systems(relative). From 0.0 to 1.0. For example CALayer.anchorPoint
[iOS Frame vs Bounds]
I don't quite understand what the window.devicePixelRatio value is, and how it dictates what size image (2x, 3x, etc) I need for that device.
For instance, on an iMac 5K Retina (Late 2015), I'd expect the pixel ratio to be at least 3 or so, but it's actually 2, the same as an iPad Air and iPhone 6s. Does that mean it prefers a 2x bitmap? 3x?
devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on a given device. You can think of dips as what the display "acts" like.
For example: a non-retina 27" iMac has a width of 2560 physical pixels. Everything is displayed 1:1, so it's also 2560 dips wide, so the devicePixelRatio is 1.
On your retina 27" iMac, the width is 5120 physical pixels. But the display "acts" like it's only 2560 pixels wide, so that everything is shown at the same physical size as the non-retina iMac. Therefore, it's still 2560 dips wide, so the devicePixelRatio is 2 (5120 / 2560), and you would serve 2x images.
(You can look up what the dips values are for your system – if you have a retina display – by going to System Preferences > Displays > Display and switching the Resolution toggle to Scaled, then hovering over the different options. For Default, on the 5K iMac, it'll say "Looks like 2560 x 1440").
To date, standard practice for graphics destined for Retina displays is still to provide an image that's twice the usual, non-Retina size.
Reminder: it is good "bandwidth hygiene" to serve an image only as large as needed for the current user's device size and resolution. Solutions to that are outside the scope of this question.
I'm writing Windows Phone 8.1 application (I don't care about tablets and desktops in this case) and I'm not sure which screen size psds should I ask from a graphic designer?
I have read design guidlines for Windows Phone 8.1, I get the system of scaling images and their name convention, but I haven't found the advice which screen sizes should I consider in real?
I got a psd from graphic designer in size 720x1280 and there is a background image. Is it enough?
If I get it right, Nokia Lumia 1520 has a screen resolution 1920 x 1080 so I need also that size, right?
How scaled psds do you usually get from a graphic designer for Windows Phone?
Thank you
Windows (Phone) uses a scale factor depending on the pixel density (DPI) of the device. Therefore, there is no default resolution any longer.
Screens with high DPI get a high Scale Factore applied, so all resources are scaled up together with the (all vector based) UI.
Image assets get automatically scaled up, but you can add the scaled items by hand for better results.
So the answer to your question probably is: Yes, it is enough, but you can add additional higher resolution assets for better results.
Also, Phone Store apps allow you to create bundles, containing only the assets for the device you install the app on (if it is installed from the store), so you don't need to care about package/download size.
See:
Quickstart: Using file or image resources
Guidelines for scaling to pixel density
It depends on whether you are building for Silverlight or Windows XAML.
For Silverlight, all phones are considered to be 480 x 800 pixels (for 15:9 devices) or 480 x 854 pixels (for 16:9 devices). The platform will map each of those effective pixels to either 1, 1.5, 1.6, or 2.25 physical pixels depending on the actual resolution of the panel (WVGA, 720p, WXGA, or 1080p). So all UI designs should be built for 480px wide, but you can build higher-resolution assets if needed.
For Windows XAML apps, the story is more complicated. The effective resolution of phones ranges from 384 x 640 up to around 450 x 800 (and possibly higher), based mostly on the physical size of the device. Scale factors range from 1.0 to upwards of 2.4, and each effective pixel is "bigger" in terms of actual physical size compared to Silverlight pixels.
There is more information in my //build talk
So I am about to create a full screen game for iPad. The retina display (new iPad) has a resolution of 2048 x 1536 pixels while the old iPad has resolution of 1024x768 pixels.
My question is, should I set width of my container div to be 2048 pixels and then use media queries to change dimensions and positions of different HTML elements based on window width? I will be using lots of absolute positioning and I am not sure how will that work between old and new iPad.
Or will the retina display still return 1024 in media queries?
Also, do I need two sets of images? One set of images for the retina display and one set of images (with half the size) for the old iPad display?
I am slightly confused. Thank you for explaining this to me.
You should set it at 1024, and then target retina and higher resolution displays with device pixel ratio media queries.
Read more here:
http://menacingcloud.com/?c=highPixelDensityDisplays
A recent project made use of very pixel-large (~5e3px2) but still byte-small (~100kb — GIF) images, which both IE8 and iOS Safari refused to render. Both seem aware of the image size, but simply do not render them. A practical solution is to slice the image, but are there any documented arbitrary restrictions on maximum image pixel size for these browsers?
Mobile Safari has a 3-megabit buffer for non JPG images. Anything larger than that will not display. Calculate size = w * h * 8 for GIFs.
Any element using CSS "Filters" on IE8 will fail to display on anything with a dimension bigger than 4096 pixels.