Skip navigation
Justin Freiler
Currently Being Moderated

CS6 Save for Web image size limit (Retina)

Apr 5, 2013 4:33 AM

Tags: #iphone #save_for_web #retina #photoshop_cs6 #iphone_4 #size_limit

I have been designing for a lot of mobile sites these days, in particular: iphone retina display (640w).  Most of the time these designs can be long in the tooth with the height of these documents - exceeding 8000 pixels at times.  I noticed that 8000 pixels is the threshold limit for the "save for web" export.  Anything greater than 8000 pixels will be downgraded in quality on retina devices by scaling the image.  The jpg will still be the correct height and width, but when viewed on an iphone, you can easily see the degradation.   Images and text are blurry.  This is no bueno when trying to show a client what their site will look like on an iphone.

 

So my question is, is there a work around?  A preference to be changed?  Am I missing something to get the full quality of my design comp in order to preserve retina display quality?

 
Replies
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Apr 5, 2013 9:21 AM   in reply to Justin Freiler

    The first thing that comes to mind is:  Multiple smaller image slices and presentation via some sort of slide show...

     

    Out of curiosity, are you proposing site designs with one page that must actually be scrolled through more than 8000 pixels to work?  Only sites I've come across like that are forum sites, where user content causes pages to grow vertically.

     

    -Noel

     
    |
    Mark as:
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Apr 5, 2013 9:28 AM   in reply to Justin Freiler

    Is there something that's compelling you to save your JPEGs via Save for Web?  You can save a JPEG up to 30,000 pixels in height with File - Save As.

     

    -Noel

     
    |
    Mark as:
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Apr 5, 2013 9:41 AM   in reply to Justin Freiler

    What didn't work?

     

    The iPhone downscaled the image, and thus reduced its quality, when the image was over 8000 pixels?

     

    If so, that sounds like an iPhone limitation, not a Photoshop problem, which is what I was alluding to in my first response in advising breaking up the image into multiples.

     

    -Noel

     
    |
    Mark as:
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Apr 5, 2013 9:43 AM   in reply to Noel Carboni

    Oh, and there's no such thing as an "uncompressed JPG".

     

    Can you please try to be more specific in your writing?  Perhaps I'm just having a "senior day", but your posts are not clearing up your points very well for me.

     

    -Noel

     
    |
    Mark as:
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Apr 5, 2013 10:01 AM   in reply to Justin Freiler

    File - Save for Web has a height limitation, that's true.

     

    I'm not talking about File - Save For Web, here, but File - Save As:

     

    1.  Photoshop File - Save As - JPEG has no 8000 pixel limitation.  The limitation is 30,000 pixels if I recall correctly.

     

    2.  If you are seeing a visual degradation on your iPhone when you view an image that's very tall and saved via File - Save As it is likely because the iOS system downsized the image so as to avoid using too much internal memory.  Apple does that.

     

    You can verify this by saving your very tall design at 640 x 10476 pixels via File - Save As - JPEG, then closing and reopening it in Photoshop (or any other viewer).  The image is just as sharp as when you saved it. 

     

    If you then view it on the iPhone and it looks fuzzy, the fuzziness problem has nothing to do with Photoshop.

     

    -Noel

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 10:00 AM   in reply to Justin Freiler

    The second comp (with the woman) has top black bar and top and bottom blue bars which are as sharp as in the first image. The rest of it is fuzzy, but not because of Photoshop degrading the output. It's fuzzy because it has been upscaled to about 200% before being placed in the comp.

     
    |
    Mark as:
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Apr 5, 2013 10:03 AM   in reply to conroy

    Conroy, I interpreted the images linked in post 5 as screen grabs from his iPhone.

     

    I have the answer here, but it's not getting through I guess.

     

    -Noel

     
    |
    Mark as:
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Apr 5, 2013 10:21 AM   in reply to Justin Freiler

    Now that you understand that the iPhone is reducing the quality of very tall images, please reconsider my suggestion in my first response to split the composition up into smaller chunks.

     

    Regarding your comment about being "some wizard of Photoshop", you made me laugh.  Thanks for that.  I'm just another user like you, trying to muddle through my day.  Please rest assured none of my responses were meant to be offensive.

     

    -Noel

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 10:26 AM   in reply to Justin Freiler

    My mistake.

     

    I'm seeing that SFW does limit size to 8192 pixels high or wide, scaling down anything that's greater, which your iPhone is then scaling back up to make the image fit the width of its screen. The downscale by SFW then upscale by iPhone = very fuzzy.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 10:36 AM   in reply to conroy

    For example, say your original design is 640 x 12000 pixels.

     

    SFW will resample it to 437 x 8192 because 8192 is its max for a dimension.

     

    Then iPhone will resample back to 640 x 12000 to make the image fit width of screen.

     

    Very fuzzy.

     
    |
    Mark as:
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Apr 5, 2013 10:47 AM   in reply to Justin Freiler

    So you're saying the "Progressive" JPEG option keeps the iPhone from downsizing large images internally as it's downloading them?  That's good to know if it's true.

     

    -Noel

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 10:55 AM   in reply to conroy

    8192 does show in SFW but you can save upto 30,000 pixels without a problem, well you can with Photoshop CS6 and Windows 7, just give it a try.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 11:03 AM   in reply to Noel Carboni

    Noel, the iPhone wasn't downsizing a large image. It was upsizing an image that wasn't as wide as the screen.

     

    My replies #16 and #17 explains why the iPhone was upscaling an image that had been downscaled by Save For Web because the original design was taller than 8192 pixels.

     

    Save As JPEG will produce a good result because it will not need to downscale an image that's bigger than 8192 pixels and then the iPhone will not need need to do any upscaling because the JPEG will already be the full screen width of 640 pixels wide.

     
    |
    Mark as:
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Apr 5, 2013 11:02 AM   in reply to Justin Freiler

    Hm, kind of says Apple needs to revisit parts of their design, though to be fair they still do support running the latest iOS on older iPhones which may not have the resources.  I wonder what one of those does when you dump a really big Progressive JPEG on it...  Probably locks up.

     

    -Noel

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 11:02 AM   in reply to Paul Riggott

    Paul Riggott wrote:

     

    8192 does show in SFW but you can save upto 30,000 pixels without a problem, well you can with Photoshop CS6 and Windows 7, just give it a try.

     

    Paul, SFW in CS6 on a Mac refuses to allow a dimension to be greater than 8192 pixels. It will insist on scaling down.

     
    |
    Mark as:
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Apr 5, 2013 11:04 AM   in reply to conroy

    There's a factor you're missing, Conroy - magic in the iPhone (and iPad) behind the scenes - and it's eplained in that article Justin linked.  I've seen it happen in big images myself on our iPad, which is how I recognized what was going on early in the thread.

     

    -Noel

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 11:05 AM   in reply to conroy

    Glad I'am using a PC

     
    |
    Mark as:
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Apr 5, 2013 11:26 AM   in reply to Paul Riggott

    Paul Riggott wrote:

     

    Glad I'am using a PC

     

    Me too, but for a lot of reasons other than this.  An iDevice is a great thing to have while away from the desktop, though.

     

    By the way, I just tested that Save For Web business saving an image larger than the numbers shown in the SFW UI...

     

    Not that I WANT it to downsample, but it's a travesty of the UI that it will actually save a larger image, even though it's showing a smaller number than 100%.  There's no indication there whatsoever that resampling will not take place, and that some limitation in the UI has prevented it from showing you 100%.  This needs to be fixed!

     

    -Noel

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 11:34 AM   in reply to Justin Freiler

    Justin, what about your screenshot that I'm posting here:

     

    4bab.png

     

    You posted that as an example of SFW downsizing to 78% to make its output be no taller than 8192 px, resulting in a width of 500 px. The iPhone will scale a 500 px wide image to make it fit the screen's 640 px width.

     

    And my CS6 SFW set to progressive JPEG (or anything else) refuses to allow a dimension to be greater than 8192 px. Here's the message when I try to make it larger:

     

    Screen shot 2013-04-05 at 19.12.05.png

     

    Likewise, the scale percentage cannot be made greater than the value which produces a dimension of 8192 px.

     

    Anyway, I'm glad you found a solution.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 11:43 AM   in reply to Justin Freiler

    I've just tried SFW (progressive JPEG) with a document that's 100 x 12000. The SFW dialog insists on making the W and H fields be no larger than 68 x 8192 and the actual JPEG definitely is 68 x 8192.

     

    I guess SFW is simply unreliable in behaviour.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 12:05 PM   in reply to Justin Freiler

    That's making no difference here. The 8192 limit is still being enforced. Time for me to move on.

     
    |
    Mark as:
  • Noel Carboni
    23,526 posts
    Dec 23, 2006
    Currently Being Moderated
    Apr 5, 2013 1:11 PM   in reply to conroy

    If I don't actually CHANGE any of the size fields, I find it saves the image at original size without resampling.  That's the "travesty" part I described.

     

    -Noel

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2013 1:20 PM   in reply to Noel Carboni

    Aha! Yes, that works: ignore the size fields and just do the export. Thanks!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points