Previous 1 2 Next 17 Replies Latest reply: Mar 19, 2015 2:00 PM by Frozen Tundra
fiveshorts Level 1 Level 1

OK, so I'm a hardcore Photoshop user CS6 — designing user interfaces.
I use Keynote to make semi-interactive user experience demos — web/app walkthroughs etc.

Which often means making images larger than the slide dimensions, so I can animate mock scrolling actions etc.


Here's the problem:


If I export a top-quality JPEG from Photoshop at 1:1 size match to the Keynote, eg. 1024 x 768, I get a beautiful image that remains crisp and true all the way to the iPad presentation (via iCloud)


If, however, I create a "deeper" JPEG, say 1024 x 2200, so I can animate the image in Keynote to mimic the scrolling down of a web page, Keynote seems to always "crush" the quality of the image, as if I'd saved it at medium or even low JPEG settings (which obviously, I did not).


I've been messing with this and outputting different image dimensions — all at 1024px wide (the width of my slide), but gradually increasing the pixel height of the export:


1024 x   768 = 100% beautiful

1024 x 1500 = 100% beautiful

1024 x 1800 = 100% beautiful

1024 x 2048 = 100% beautiful (Attached image below)

1024 x 2049 = Compressed and unuseable (Attached image below)


So MY deduction is that Keynote will only tolerate an image with a pixel height UP TO twice its width. ONE PIXEL more than that, and it turns on the ol' hidden crusher and compresses the file.


Segment of 1024 x 2048:



Segment of 1024 x 2049:



If anyone has any insight into this phenomenon, I'd be very grateful as it's very restricting.


Many thanks in advance

iMac, OS X Mountain Lion (10.8.2)
  • Gary Scotland Level 6 Level 6

    Keynote  downsamples  images larger than that set in Inspector > document > slide size


    to prevent this, change the following setting:

    Keynote > Preferences  > General >   deselect;   Reduce placed images to fit on slide

  • fiveshorts Level 1 Level 1

    Thanks Gary.


    The thing is, that setting has always been off.

    The files are NOT being downsampled until they reach a pixel height that exceeds twice the slide's width

    None of the images is being scaled on the slide.



  • Gary Scotland Level 6 Level 6

    Are you setting the page size in Keynote preferences before or after inserting images?


    Are you changing the canvas size in Photoshop and then pasting in the image,

    or opening the image and changing image size?

  • fiveshorts Level 1 Level 1

    I've worked it all out now. Very interesting.


    Keynote will allow unscaled images up to (but not a pixel bigger than) TWICE the width of the master slide in BOTH dimensions.

    So, if your slide is 1024 x 768, it's OK to bring in an image UP TO 2048 x 2048 and all will be well, if you don't scale it either way.


    What's FASCINATING about this is that you can then TILE these 2048 x 2048 images and group them to make one, bigger image group that can then be animated.


    I just finished animating a 10-stage animation around a group measuring 4096 x 4096, within a 1024 x 768 slide, and everything worked out beautifully on the iPad (2).


    I'm thrilled to have worked it out and hope this is of use to someone somewhere.


    Thanks Gary for your help.

  • museumscapes Level 1 Level 1

    Hi there, I actually have a question for you regarding image size and keynote--you seem to know a lot about this. I'm working on a historical timeline for a museum kiosk that will be powered by an iPad that's hooked up to a flat screen monitor so that the visitor can scroll through the timeline on the iPad and see it larger. I'm building the presentation on my Mac first so I'm a litle uncertain about how to deal with image resolution for three different formats. The finished presentation will ultimately have to look best on the large monitor so I'm assuming that what looks good there should also look good on the iPad?? Is there a standard resolution for images that I should abide by--like 120 or 150?


    Thanks for any advice and if necessary, I'll post this to the whole community. I just wanted to try your expert advice first :-)

  • Gary Scotland Level 6 Level 6

    The current  iPad screen pixel count is 2048 x 1536 so you will need to set Keynote slide size to that.


    Inspector > document > slide size

  • fiveshorts Level 1 Level 1

    Yes, but that does not mean museumscapes is forced to use images with a maximum pixel dimension of 2048 x 1536.


    At 1:1 (or scale set to 100%, Original Size), this will deliver perfect on-screen resolution, but so will any image up to 4096 x 4096, as long as its set to 100%, Original Size. I do everything at 72dpi.


    Which means a much larger image can be animated to appear to scroll up, down, diagonally, whatever.


    You can't actually swipe it, as Keynote is not interactive in that way. But you can fake it and that's usually good enough.


    Now here's the clever bit. If you were to make an image 8192 x 8192 in photoshop, then break it into four, perfect tiles, each 4096 x 4096, you can reassemble and group them in keynote and the same rules apply re: animation and etc. The image will still be perfect resolution.


    Trust me, I'm giving up to three presentations a day using exactly this method.


    My slides are 1024 x 768 and I have images measuring up to 4096 x 4096 — which is four tiles wide; four tiles deep, then grouped. No problems at all. A litle much for my iPad 2 and its processor, but it works.


    Buying an iPad '4' today.


    Hope that helps.

  • museumscapes Level 1 Level 1

    Thanks for answering! I need to clarify a few things:


    1. If my slides are set to the default 1024 x 768, that should work for all three platforms, including the flat screen?


    2. If I created a background image in PS with the 1024 x 768 dimensions, what would be the optimal resolution I should use so that when seen on the large screen it would look ok?


    3. I want the image quality to be high but not slow down the ipad since this is designed for public use in a museum and it needs to last for a good while since they are buying it as part of the "deal."


    4. Just for reference, the monitor we purchased for hooking up to the iPad says it's 1080 p full HD.


    Thanks for any answers :-)

  • fiveshorts Level 1 Level 1

    The monitor seems to be the most important destination in all this, so....

    The pixel dimensions of a 1080P monitor are 1920w x 1080h

    That's the size I would make my photoshop masters.

    That's the size i'd make my Keynote slides.



    Save out the separate images from photoshop as PNGs or high quality JPEGs.

    Always use the Insert > Choose... option for bringing into your keynote file.

    Never drag from the desktop.


    Does that help?

  • museumscapes Level 1 Level 1

    Yes yes yes! Thank you so much. And I was dragging them from Bridge so I'll stop doing that

  • mechie8682 Level 1 Level 1

    Just documenting my experience a bit for posterity - I exported high res images from Aperture and brought them into Keynote (via the Insert/File Choose menu not drag/drop); added borders/frame options in Keynote via the inspector and then copied-pasted those images in Pixelmator for my final export into jpeg format. Worked like a charm.


    When I tried to export from Keynote as Image, regardless of what I did, there was always some loss of quality due to compression I thought. Pixelmator nailed it for me. Thought I would mention on this thread in case someone came here looking.


    Here's a link to the page on my site where I used final exported images from Pixelmator -

  • fiveshorts Level 1 Level 1

    Thanks Rohan.


    Just trying to understand... what was the reason for using Keynote at all? Just for the picture frame borders?
    Then you selected and copy/pasted them into Pixelmator? You're saying that copy/pasting out of Keynote preserves the original quality? I've had poor results when pasting into Photoshop. I'll have to try that.



  • mechie8682 Level 1 Level 1

    fiveshorts - yes. Adding the picture frame borders with those nice shadows was the only intent of going thru Keynote. Regarding copying pasting from Keynote to Pixelmator, I made sure the size of my images from Aperture and size of the canvas from Pixelmator were to the exact requirement of my final image that was going up on my website. In other words, I did not re-size the images at any step in the process. Hope that helps clarify.

  • Al Hatch Level 2 Level 2

    Sorry to come in on this late, but some of us have a Solomon's choice.

    The problem is that I make the same Keynote presentation just as often on iPad as on a 62-inch HD monitor.


    If you make your slides 1920 x 1080, they appear beautiful on an large screen, and letterboxed on iPad.


    If you make your slides 2048 x 1536, they appear beautiful on iPad, but ugly on a large screen.


    There is no way to set Airplay/System Prefs to fill the HD monitor without cropping. It either crops the top and bottom or it shrinks the slide so much it insets it, with black border top and bottom. Then, iPad’s retro 4:3 aspect ratio makes your slideshow look like an old SD (Standard Def) TV show.


    Given that, I’m about to convert all of my presentations to to 1920. Except…

    I have tested this on a non-Retina iPad. Can anyone tell me whether 1920 slides will be scaled to uglitude on a Retina screen?


    If that’s the case, I don’t what I’ll do.

Previous 1 2 Next