Some images not showing in mobile browser (but showing in desktop browser)

Question

I am having an issue where some images are not displayed in the mobile browsers on my iPhone, but I see them in all my desktop browsers. On my phone, I just see a blank box

Answer 1

Is it possible that your images are very large?

From this page regarding iOS Maximum Image Size:

IOS enforces a maximum image size in Safari Mobile. In most cases it's much larger than what would be used on a webpage. The limit can be encountered when developing HTML5 games and interactive applications that use large frame based animations. If an image is included that is larger than the maximum size, the image will not load.

Image types have different limitations: JPG images can be up to 32 decoded megapixels, while PNG, GIF and TIFF can be up to 3 - 5 decoded megapixels (depending on device). The maximum size for PNG, GIF and TIFF varies due to the RAM on the device. Devices with less than 256 MB of RAM can be 3 decoded MP, while other iOS devices are limited to 5 decoded MP.

Note the limitation is not measured by the file size of the image but the number of decoded pixels. One decoded megapixel (MP) is equal to an image with dimensions: 1024 by 1024 pixels regardless of the compression.

This page has some suggestions for handling large amounts of images (and by extension, large images). The content on the linked page simply suggests using javascript to load images as they are needed, and unload those images that are no longer visible on screen. The author found that images could be unloaded by modifying the src attribute of the img element to a much smaller image. After some period of time, the original image would get picked up by the garbage collector (~6 seconds, if I'm reading his code correctly)

Example from the link above:

var img = document.getElementById('idOfTheImageToUnload');
img.src = 'images/empty.gif';

Alternate approach which removes the image from the DOM entirely (which the author stated must be done on a timeout to ensure the removed image gets picked up by the GC.)

var img = document.getElementById('previous');
img.parentNode.removeChild(img);
img.src = 'data:image/gif;base64,' + 'R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
window.timeout(function() { img = null; }, 60000);