NOTE: This post is a little out of date now. The iPad 3 screen is 2048×1536 resolution, for those wondering, and I will try to get some new info out eventually.
iPad 2 has hit the market, OnSwipe has spiced up WordPress blogging, and designers everywhere are using this slick little mobile device to promote their work and display their portfolio; so how do you format your graphics for the best possible viewing experience on the iPad? Glad you asked!
I remember stealing default wallpapers off of my old LG flip phone so I could open them in Photoshop and make my own based on their template. Yeah, I’m a geek, but it means that my images should always look good and be the right size for the media I create them for. Mobile graphics are everywhere today. There is a small army of little tablet like devices being released by big players in the tech game, so why is this just about the iPad? Why not all the competitors as well? Mostly because this little device has outsold them all and is still flying off the shelves around the world. You may not own an iPad, and that’s ok. This post isn’t for people who own iPads. This post is for people who make graphics that go online (and we assume you are encouraging people to look at them) because there is a good chance that someone has already viewed your content on an iPad…so did it look good? Maybe you blog. Maybe you have an online portfolio with a gallery of images. Maybe you have a flickr account that you update randomly. These are just a few of the possible scenarios in which you will have people attempting to view your images on Apple’s iPad or iPad 2. The tips I’m going to give you here will apply to either of these devices and should help you produce appropriately formatted content for the iPad.
KNOW YOUR ENEMY
Let’s assume you know nothing about the display on the iPad 2. Here are the basic display specs you should be aware of:
- 9.7-inch (diagonal) LED-backlit glossy widescreen Multi-Touch display with IPS technology
- 1024-by-768-pixel resolution at 132 pixels per inch (ppi)
- See the full tech specs on Apple’s official iPad info page
What does this mean to you? If you have a 640×480 image at 72 pixels per inch there will be a good bit of quality loss when someone tries to view it full screen on an iPad. On the flip side, if you are uploading iPhone photos at 2048×1536 (if you don’t know what resolution your camera shoots at, check out this HANDY MEGAPIXEL CALCULATOR) the images will be much larger than the viewing area on the iPad (you may like it that way if you choose to zoom in). The image below will tell you what I just told you, but with a picture. That’s for all of you who hate to read and won’t remember anything I write unless there is a picture to go along with it.
Well, there might be a few reasons you should bother. If you are compressing images for an online gallery, it might be in your best interest to have your images large enough that they can be viewed on an iPad without pixelating badly. If you blog, particularly here on WordPress where OnSwipe has transformed the iPad viewing experience, your post images might be grabbed by default and displayed as a cover image on the iPad. This is a nifty feature if your image is large enough, but it’s an ugly experience if it tries to take a small image and inflate it to fit the iPad screen. Maybe you don’t read blogs on the iPad, but there is a good chance someone is reading yours on an iPad. According to THIS article, 75% of iPad owners are regularly using their device to access the internet (I.E. your blog, website, facebook, etc). We are about to enable you to make full resolution iPad backgrounds, blog images that fit, portfolio images that are crisp and beautiful, and a good experience for your iPad users.
Get your resolution right! If you are using Adobe Photoshop, here is a template file that you can steal from us to make sure your project starts off right:
Now that you have the template, just drop your images into the file and, shazam, you’ve got your formatting! Alternatively, just save any of the images in this post, open them in the editor of your choice, and put your graphic over them. Don’t forget, the resolution you need is 1024×768 at 132 pixels per inch (more is ok, less is loss of quality). Here are some free resources you can use in your quest to create perfect iPad graphics:
- ShrinkImages – a free online image resizer
- Image Size Calculator – a free online image calculator to help you with the tricky math of resolution
- iPadPeek – how your graphic might look and load on an ipad using your browser (no need for an ipad!)
- Gimp – free image manipulation software
Here is a free background you can steal and use on your iPad. This graphic was actually created in SketchBook Mobile using a stylus specially designed for the iPad, iPhone, and iPod touch. Enjoy!
Also check out 5 reasons Charlie Sheen needs an iPad 2