Reading diglloyd.com on the Apple iPhone / iPad
Related: Apple iOS, Apple iPhone and iPad, How-To, image scaling, iOS, Java, memory
Update Sept 2016: as of iOS 10, color spaces are now supported on iPhone, and presumably iPad also which presumably stems from Apple’s newfound support for the DCI(P3) Digital Cinema color space. Apple’s iPhone/iPad do blur fine detail in high resolution images by downsampling to smaller size, but results are generally quite nice now.
This is a photography web site. Images are therefore presented at high quality— high resolution, minimal compression and appropriate color space / color gamut.
Update October 15, 2012: Apple iOS 6 is improved in its display, and it is worthwhile to view retina grade images. However, full quality is not presented on iDevices even with iOS 6.
Update July 2019: newer devices have more memory and may performa better with larger (though not the largest) images.
...
The iPad / iPhone can greatly degrade the high quality images presented at diglloyd.com. It is a mistake to use the iPad or iPhone to evaluate image quality at diglloyd.com (or any web site).
The high resolution Retina Display of the Apple “New iPad” sounds good as all Apple marketing hype does, but Apple’s iOS web browser destroys image quality, making a blurry mess of the high quality images at diglloyd.com (or anywhere else offering similar quality).
Some will make excuses for the poor results: “it’s not a bug”, it’s for “memory management”. In short, the awful results are justified because _______. Whatever.
There are at least three serious defects in image display on the iPhone and iPad (IOS 5.1.1). These would apply to any site displaying quality graphics at higher resolutions:
- Images exceeding the resolution of the device are downloaded in full resolution, then downsampled to a fixed resolution (~1920 pixels), then interpolated up from the badly downsampled version when zoomed in. The final result is a pixellated mess when zoomed in. Even when not zoomed in, image sharpness is degraded, because the scaling process is badly done.
- Images viewed in landscape vs portrait orientation of the iPad differ. The iDevice scales in one orientation (to fit), making the image a different size, resulting in loss of image sharpness from the resampling process. There might be other scaling cases that similarly damaged the quality.
- Colors and tones are destroyed (blown-out) and/or improperly rendered because the iPad / iPhone ignore embedded color spaces in images.
What might be going on?
Update! Reader John W referred me to the Creating Compatible Web Content page, which describes tight limits on the size of web content.
The lack of forward thinking feels like the 1990's on an MS-DOS computer. Scratch the very idea of the iPad being anything but a joke for presenting high quality images, at least until Apple fixes iOS to not have such severe limitations.
Because of the memory available on iOS, there are limits on the number of resources it can process:
- The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM. That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.
- The maximum decoded image size for JPEG is 32 megapixels using subsampling. 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.
- The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
The height and width of a canvas object is 150 x 300 pixels if not specified.- JavaScript execution time is limited to 10 seconds for each top-level entry point. If your script executes for more than 10 seconds, Safari on iOS stops executing the script at a random place in your code, so unintended consequences may result. This limit is imposed because JavaScript execution may cause the main thread to block, so when scripts are running, the user is not able to interact with the webpage. Read “Debugging” for how to debug JavaScript on iOS.
- The maximum number of documents that can be open at once is eight on iPhone and nine on iPad.
I wrote what follows below prior to having a reader send me Safari Downsamples Your Images, No HD, over at TomsHardware.com. If accurate, it’s an egregious bug (which presumably would be defined as “working as designed” by Apple).
Example of iPad image destruction
Mouse-over or toggle the image below to see the version as displayed on the computer compared to the version displayed on the New iPad. The issue is in iOS, so it doesn't matter whether it’s iPad or iPad* or New iPad or iPhone.
Note: as shown below, these are CROPS from a far larger image. The crops display fine on the iPad. It is the full-res JPEG that is the problem. The full-res version is accessible by login, to subscribers.
The New iPad has obliterated the image quality. Progressive JPEG might be one solution for new images, see further below.
Use the Toggle control above, or view the New iPad version below.
