*** From the Archives ***
This article is from September 15, 2011, and is no longer current.
Image resolution for iPad publishing
What is the minimum image resolution required when designing for the iPad? The answer might surprise you: 72 ppi.
The pixel resolution of the screen of both the iPad 1 and 2 is 132 ppi. But, if you are designing a document at actual size for the iPad, with page dimensions of 1024 x 768 pixels (or points) or 768 x 1024 pixels, the minimum “effective” image resolution only needs to be 72 ppi. This is because InDesign considers a 1024 pixel wide screen to be about 14.22 inches wide, where the iPad screen is about 7.75″ wide when held horizontally.
In other words, lets say you create a page that is 1024 x 768 pixels in InDesign, and you place an image on the page and scale the image up. Look at the Info panel or the Links panel, and view the “Effective ppi”. As long as this is 72 ppi or above, your images will look their best on the iPad. If you go below 72 ppi, you will start to notice jagged edges and pixelization.
This rule applies whether you’re using Adobe Digital Publishing Suite, other iPad publishing InDesign plugins such as Twixl or WoodWing, or just creating a PDF specifically formatted for the iPad screen size. If the system that you are using will enable the user to pinch and zoom for more detail, you may want to include additional resolution for some images.
You can download templates for creating iPad pages with Adobe Digital Publishing Suite here. I just updated the templates to include a custom embedded iPad-specific preflight profile. This profile checks for a minimum effective image resolution of 72 ppi.
 |
Put another way (I was explaining this in detail recently in another forum), InDesign considers a point and a pixel as synonymous, so to maintain the pixel dimensions of any image you’ve placed in a web- or device-destined document, you MUST ensure that 72 ppi is the output resolution. It’s the only way to maintain the as-designed dimensions of any pixel-based project.
InDesign is a little single-minded on the subject, and can be baffling if you don’t grasp the fixed idea planted in its noggin.
With the iPad 3 right around the corner, and a higher res Retina Display, will this change the way we plan our future publications? Or is it just too soon to know for sure.
@Steve: No, it won’t change the process, but it will probably change the dimensions. One of the important but not-entirely-intuitive things about publishing to screens (whether mobile device or monitor) vs. print is that in print the dimensions (mm, inches, picas) are fixed while the number of dots per inch can vary, but on screen the resolutions (“x” pixels by “y” pixels) are fixed. — Image sizes on screen, as measured by a ruler, will vary depending on the device and the zoom level chosen by the user.
For InDesign Magazine the PDFs are always created at 150 ppi. I think this is a good resolution for interactive PDF files, because it allows for zooming in. Because DPS doesn’t currently allow zooming, 72 is fine.
Another way to put this is the old photoshop adage that size doesn’t matter, only pixel dimensions matter. A 1024 x 768 image at 20ppi or 2000ppi is the same thing.
Hi Keith,
Let plugins worry about the screensize in InDesign for you (as well as Android if you need). On our planning tool it will create the right pages for you as well as allow you to add your own interactivity and display on an iPad for no fee directly from InDesign, see below press release and download.
We now have a 100% free version of our iPad and planning software which you can use for free to create versions of your magazine which can be published to the iPad.
See our website: https://www.gomobile.go-publish.co.uk/gomobilepro/
Here’s how we solve a problem with HTML imagery on our end here at mag+. Because the mag+ InDesign template is based on the resolution of 72dpi and the iPad’s resolution is 132dpi, the images in html elements are not converted by the plugin and need therefore to be at the exact size for the iPad before reviewing. The formula for this is to have the image being 1,83 times bigger (132/72 = 1,83) than what it is in the template. So if the image shown in the template is 558 px by 419 px than the image in the html element should be 1023 by 766px. Another good way to remember this is that the template is 560×420 while the resolution of the iPad is 1024×768 (1.83 times bigger)
Anyone out there playing with out tools yet?
Right! Only pixel counts at screen devices.
Unfortunately neither the iPad nor other devices like Adroid respect their own resulution.
Plus: you surely don’t want to create and publish different sizes = files for the same picture, being displayed at different devices, right?
=> They just display one pixel of an image to one pixel on the screen.
So there is no 10 cm (or 4 inch) wide picture on the ipAd, nor on Android, nor a web browser.
Even, if we are able to CSS encode fonts sor a certain pt size, like in print – the fonts will definately be displayed different at different screens and devices.
Think one step farther: even IF browsers would respect a screen resolution – imagine what would happen, if I have 2 screens connected to a computer – both being a 21” monitor, but one is an old one with a 72dpi resolution and the other with a 96dpi resolution…..
What would happen if I drag the browser window from one display onto the other?
Answer: nothing!
That is because a browser can not get a feedback on wich monitor it is displayed.
As long as both monitors run at the same screen resolution (i.e. full HD) really nothing would happen to the images and text.
What does that mean to the original question about the iPad devices?
=> Pixel is pixel. Not more not less.
Publish the same pictures to a pad than you would publish to the web.
So the author of this article is right: 72dpi is righ (and UNimportant as well).
Tilo Rust
Worldwide trainer and Top-Level Supporter for Adobe Master Collection and more…
tilorust.com
I’m creating a multi-page PDF that I want users to be able to read on their desktops (and print out) as well as on Ipad. I am doing a number of layouts in Photoshop first b/c I’m most comfortable using it – would I make this 1024×768 at 72 DPI or 11 x 8.5 at say 150-300 DPI. So confusing!
Elizabeth: Photoshop isn’t the ideal tool to use for this, since it creates bitmaps, and the resulting PDFs are going to be large. Ideally you’d have 8.5 x 11 inches at 300 ppi for print, and 1024 x 768 at 72 for the iPad. There isn’t any great way to create a single PDF that serves both purposes well.
we are in the process of converting our printed books to ebooks. all our layouts were done in InDesign. my problem right now is what will be the effective resolution for the images? i’m trained for print production so that all images were enhanced in photoshop at 300 dpi resolutions. my boss insists that we keep the same resolution for the ebooks. i told him that it isn’t the case as it would result to an ebook with a bigger file size. am i correct or not? please enlighten me on this matter.
Bottom line question:
If you are using InDesign and want to create a PDF with text and photos that can be viewed on a computer screen and an iPad, do you design for 8.5″x11″ and photos at 72 or 132 resolution? Or do you specify 768x1024px for size. If photos are 300 resolution, the file size would be huge I think, but you do want good screen (iPad and computer) clarity.
@Steve: If I were designing a PDF that is mainly going to be viewed on a computer screen and an iPad, I would design it at 768 x 1024, with the photos at 72 pixels per inch. It will look great on both the computer screen and the iPad.
Okay, I’m designing HD images for the iPad 3. After a lot of research I think I have a pretty good grasp on what the ideal size is. The Images need to be the exact size of the iPad 3 Screen and resolution as well as be able to zoom while still maintain TRUE HD format. Am I to understand that when looking at the full image without zooming, the image should export to a RASTOR (Bitmap) PDF at 150 ppi so it leaves room to zoom in? The top zoom would essentially display at 72 ppi?
All that considered, what are the precise “pixel dimensions” I should see in Photoshop? Or should I look at Document Size.
As I said I have a pretty good idea of how to execute this, but I am hoping to find someone to confirm these things –
Thanks!
We need to create the following deliverables for a client and I’m curious what approach you recommend.
/ PDF that is optimized for best quality for viewing on iPads versions 1, 2, and 3.
/ This InDesign file will be repurposed for the DPS workflow to create an iPad app that is optimized for iPads versions 1, 2 and 3.
For the iPad app, we were planning to create the InDesign file at 1024×768 and create a 2048×1536 folio and use renditions to have appropriate folio version distributed to the correct iPad version.
For the PDF file, should we keep that InDesign file at 1024×768, create it at 2048×1536 or should we have one for each iPad resolution version? Our hope is to have one PDF optimized for all iPads.
Thanks for any recommendations.
Josh
Thanks for all the info in this article. Pretty much same situation as Zachary’s question.
A children’s book, 55 pages, all colored drawings, photoshop files, 300 ppi with some text on top.
We didn’t use InDesign at all. Just Photoshop.
Since the new ipad retina display is coming, 72 ppi might not do it. A PDF with 150 ppi seems the logical way to go, does that sounds right?
Also all the drawings are in landscape orientation, perfect for ipad. But we want to go to epub as well, that only allows vertical orientation… (Splits page when you turn your ipad) So we will be doing a separate PDF for that, accommodating the pics to the new orientation.
Thanks
There seems to be a lot of confusion about the whole retina story amongst print designers.
It is actually quite simple folks.
When you design something for iPad 1 or 2 use a 1024×768 pixels document at 72 ppi.
When designing for the retina ipad make a document 2048×1536 pixels at 72 ppi.
If you don’t believe me I’ll do the math for you: 2048 pixels wide on a 7.75 inch wide display > 2048 / 7.78 = 264. And 264 just happens to be the advertised resolution of the Retina iPad.
If you want to let users zoom in on images without the images becoming pixelated, use higher resolution images.
Use Indesign to layout the documents and create the PDF not Photoshop as mentioned before. Photoshop will produce rasterized text while a PDF from Indesign will offer crisp text at any zoom level.
I’m redoing a very simple e-letter for iPad display. Mostly text with a few vector graphics and occasional photo.
I created it in Indesign (CS6) with New Doc preset for iPad at 768×1024. I noticed as I was plugging in text, I was having to use HUGE font sizes to be able to read the text. Converted to PDF (using Print/PDF), opened on iPad, and only about a quarter- third of page shows up…the page is hugely oversized on screen
What did I do wrong?
FYI…. I started with an 8.5×11″ document, then decided to switch to iPad. Is that what messed it up perhaps? I went I to Doc Settings and switched to iPad. When I went back to check my settings, it was saying iPad at appropriate px dimensions,
I’ll keep plugging away, but hope some one can shed some light
I created PDF mainly to be viewed on a computer screen and an iPad and stuck to 768 x 1024, with 72 pixels per inch. It’s look great on PC and iPad.
Very good blog post. I certainly love this website. Stick
with it!
HI All,
I have set up a few files at double the size for retina so I only have to work off the 1 file when amends come in. when i proof I export at 72 for the retina (1200px wide) then half it and export at 36dpi for the actual desktop size (600px wide) Any suggestions/ideas i can take onboard to improve this workflow?
Thanks guys.
naja wie imma 308) Albi aus Schweiz schrieb am 4.Oktober 2002 um 18 Uhr: — Fuck Off No Exit Habt uns im letzten Herbst Marzan versprochen, dass ihr entlich mal die Schweiz mit einem Konzert beehrt!!!
special one