Wednesday, April 28, 2010

Understanding iPad wallpaper image size

Most Fridays since we started the Able Pear blog (over two years now), we have shared a set of iPhone wallpapers: 320x480 portrait images that also work on the iPod touch and the Palm Pré. We love doing this and call it iPhone Fridays.

The Friday before Apple's iPad launch, we started producing iPad wallpapers in parallel with the iPhone wallpapers using the same images but at a much higher resolution: 768x1024, the resolution of the iPad screen. Up until then we did not have an iPad to view them on. The next day we all picked up our iPads. The images were beautiful but there was one exception I had not anticipated even though I've seen it in over and over in the media hype; the iPad can be in any orientation.

The images that we had created were nice but when you rotated the iPad from portrait (tall) to landscape (wide) the image was scaled up 133% to fill the width of the device.


Later that week I created a PNG file in Illustrator to load on my iPad to visualize how the device was presenting the image in the background. I knew that the highest resolution was 1024 pixels and the smallest was 768 pixels and that I would have to create an image that was 1024x1024 so that I would fill the iPad's screen in any orientation without scaling the image.


We can also see that the "always" viewable image area is 768x768 in the center of the 1024x1024 image.  The upper and lower parts of the image are presented in portrait and the left and right are seen when in landscape, but the image itself is not scaling the fit the screen.


So this is my conclusion:  iPad wallpapers need to be 1024x1024 to accommodate both orientations.  Okay, that's a given, but now I'm left with a new question:  What's up with the corners and if they are never presented then should you omit the image data from the wallpaper to save on file size?  After all, adding the corners up, that's 128 pixels by 128 pixels, times four.

What are your thoughts?  Keep the image data intact or delete the corners and save it as a 24-bit PNG?  If you're making iPad wallpapers, will you use 1024x768 or will you adopt the larger square format?  If you are an iPad owner what would you rather download?  Let us know and we'll see you on iPhone Friday.  Cheers!

2 comments:

Jerry said...

Oooh. Good question. You could leave the corners there so the photo looks nice by itself. However, if you wanted a stronger "iPad branding" of the image as distributed on your site, it might be unique and distinctive to use transparent corners.

Can you see the corners of the image as it rotates from one orientation to another? I don't have an iPad yet, so I can't check.

From a technical standpoint, it probably consumes the same amount of RAM either way. At some point, they need to render the image as a bitmap for the LCD (where absent corners provide no savings--they'd likely be rendered with a background color) & they're hopefully doing this in memory-optimized way already.

Kevin Bomberry said...

@Jerry, I don't seem to see the corners of the image when rotating from one orientation to the other. And your thoughts as to the rendering of the image in memory are very insightful, I didn't think about that. I was thinking about the actual file size, and if you host the images yourself and get any traction the amount of bandwidth it would consume.

Also you made me think about something else - many photographers want to push up their images as wallpapers and they want a way to mark the image as theirs (aside from using meta data in the file). Consumers normally don't want this branding to be seen on their device. As the corners are not visible that would be an excellent place for branding, copyright, or other information. That way you could have the wallpaper on the device that looks clean and crisp and when it's viewed by itself the corners would have that branding, logo, camera settings, etc... I'll have to check that out.

The other thing I noticed, and you can see this too when you get you iPad Wi-Fi + 3G, is that the icons act differently on the iPad than they do in the iPhone/iPod touch. When viewing the iPad in portrait orientation the icons are four across by five down, for a totally of 20, and in landscape orientation they are five by four. As I was checking to see what was happening with the background image I saw something very interesting... the icons fade from one image to another... Yep, that's right. They don't just slide around and reorganize themselves as when you press and hold on an app icon to adjust their location, but rather they have a nice transition to handle presentation.

I happened to have Netflix in a location that was being supplanted by iTunes when changing orientation. I have to say when I noticed this fading effect I turned the device from one orientation to the other over and over and over and over — just to see the magic in action... (^_^)