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?
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.
This is the first mobile site I've designed where I've encountered this problem b/c of the magnitude of length. The homepage is set up like a 1 page brochure so the scroll is long-winded. Lots of modules and content.
My proposal would be for Adobe to recognize the intense resolution needed for iphones and either increase the limit of pixels or do away with it all together.
Here is the design:
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.
Just to clarify, there is no problem with reaching the pixel capacity or the exact pixel dimensions for these designs when saving out in both methods. the problem is the scaling degradation photoshop does to the jpg when exporting and viewing on your iphone.
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.
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.
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.
conroy, both comps are the same pixel width with two different heights. they both look sharp as a tack when viewing as jpg on a desktop. those two screens you are refering to are screengrabs from iphone to show the degradation.
noel, i said that i tried Save As jpg. it didn't make any difference.
it may very well be an iphone issue and not photoshop. i never disputed this fact but i did notice this in photoshop when comps exceed 8000px in height:
photoshop seemed to scale the comp. i don't know if thats just to fit inside the window or not.
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.
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.
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.
yep. works perfectly. bit out of my normal workflow but i doubt i'll be saving jpgs this big very often.
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.
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.
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.
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.
conroy, this is incorrect for the case i've provided. save for web will save at its proper width and height dimensions for retina ios devices. as stated by paul, SFW will save up to 30,000 pixels. the problem was that "progressive" was not checked for extreme cases for it to display properly on the iphone.
both designs were exported using SFW:
both look identical on desktop.
you will notice the difference when viewing these links on your iphone.
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!
Justin, what about your screenshot that I'm posting here:
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:
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.
yes, it shows that in the panel and that confused me at first. but it does not shrink the image. if you open up the exported jpg, its the correct size. i'm not sure why the SFW panel shows a resize.
bottom line is the fix is to check "progressive" when exporting jpgs larger than 8192px in height if you want it to display properly on a retina device.
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.