WebKit Limit on Retina JPG Image Display

#1

Post by mikecane » Thu, Mar 22, 2012, 11:54 AM UTC

WebKit Limit on Retina JPG Image Display
duncandavidson.com

Re: WebKit Limit on Retina JPG Image Display

#2

Post by orta » Thu, Mar 22, 2012, 12:46 PM UTC

When working in UIKit developers are warned now to use images that are larger than 1024x1024 because that is the limit on the size if a texture in openGLES. I wouldn't be surprised to see this being doubled for the retina and Apple using that as the hard limit.

( You should avoid creating UIImage objects that are greater than 1024 x 1024 in size. Besides the large amount of memory such an image would consume, you may run into problems when using the image as a texture in OpenGL ES or when drawing the image to a view or layer - http://developer.apple.com/library/ios/#documentation/uikit/...)

Re: WebKit Limit on Retina JPG Image Display

#3

Post by jbrennan » Thu, Mar 22, 2012, 1:10 PM UTC

orta wrote: post #2

When working in UIKit developers are warned now to use images that are larger than 1024x1024 because that is the limit on the size if a texture in openGLES. I wouldn't be surprised to see this being doubled for the retina and Apple using that as the hard limit. ( You should avoid creating UIImage objects that are greater than 1024 x 1024 in size. Besides the large amount of memory such an image would consume, you may…

I believe that limit was lifted as of the iPhone 3GS (i.e., for OpenGL ES 2.0 devices and greater).

Re: WebKit Limit on Retina JPG Image Display

#4

Post by mva » Thu, Mar 22, 2012, 1:16 PM UTC

Another issue, but also there: PNG images above a certain height failed to load on the iPhone 4. We were facing that problem with our mobile testing tool. Converting the images to JPG solved the problem.

Re: WebKit Limit on Retina JPG Image Display

#5

Post by apinstein » Thu, Mar 22, 2012, 1:29 PM UTC

We ran into this issue while building our HTML5/Mobile Webkit panorama viewer. It took a long time to figure out what was going on, I almost feel that webkit would've been better to just skip the image and log an error to the console, since by resizing your image without your permission typically causes rendering bugs since they literally resize your image down in-line without telling you.

We didn't realize it could be circumvented with PNG's, that's an interesting idea, though it certainly hurts on the bandwidth side.

Re: WebKit Limit on Retina JPG Image Display

#6

Post by daeken » Thu, Mar 22, 2012, 1:30 PM UTC

jbrennan wrote: post #3

orta wrote: post #2

When working in UIKit developers are warned now to use images that are larger than 1024x1024 because that is the limit on the size if a texture in openGLES. I wouldn't be surprised to see this being doubled for the retina and Apple using that as the hard limit. ( You should avoid creating UIImage objects that are greater than 1024 x 1024 in size. Besides the large amount of memory such an image would consume, you may…

I believe that limit was lifted as of the iPhone 3GS (i.e., for OpenGL ES 2.0 devices and greater).

There's also no reason you can't split the image up (e.g. 2048x2048 -> 4x1024x1024) and render it in 4 pieces. Where a hard limitation like that exists, implementations frequently sidestep them.

Re: WebKit Limit on Retina JPG Image Display

#7

Post by woogley » Thu, Mar 22, 2012, 1:36 PM UTC

mva wrote: post #4

Another issue, but also there: PNG images above a certain height failed to load on the iPhone 4. We were facing that problem with our mobile testing tool. Converting the images to JPG solved the problem.

In case you're wondering why that is ..

> JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.

Reference: https://developer.apple.com/library/IOs/#documentation/Apple...

Re: WebKit Limit on Retina JPG Image Display

#8

Post by mistercow » Thu, Mar 22, 2012, 1:37 PM UTC

daeken wrote: post #6

jbrennan wrote: post #3

Earlier quoted context omitted.

I believe that limit was lifted as of the iPhone 3GS (i.e., for OpenGL ES 2.0 devices and greater).

There's also no reason you can't split the image up (e.g. 2048x2048 -> 4x1024x1024) and render it in 4 pieces. Where a hard limitation like that exists, implementations frequently sidestep them.

If you do this though, make sure you split at JPEG block boundaries. That means that every column should have a width divisible by 8 except the rightmost, and every row should have a height divisible by 8 except the bottom. Otherwise you may see a noticeable seam.

Re: WebKit Limit on Retina JPG Image Display

#9

Post by bbwharris » Thu, Mar 22, 2012, 1:50 PM UTC

Had this problem with a large background image (over 2 Megapixels, I believe). The solution that we came up with was to split the image in two, and then use css3 multiple backgrounds on the ipad, iphone. At that time, those were the only culprits.

Re: WebKit Limit on Retina JPG Image Display

#10

Post by hetman » Thu, Mar 22, 2012, 2:42 PM UTC

On a mostly unrelated note, I wish blatanly marketing driven terms like "retina display" would stop getting thrown around like this. Thanks to Apple's latest marketing adjustment for the iPad 3, it turns the phone I've owned for over 2 years now actually posesses a "retina display" (N900 for anyone wondering). At the viewing distance specified by Apple, the human retina is in fact capable of discerning a far higher pixel density anyway.