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 with a grey border where the image should be.

A couple notes:

• It seems to happen randomly because some images are displayed one day, and then will stop displaying the next day
• I noticed if I scroll through the page while it is still loading, I can often see the image, and then it disappears.
• All the images are placed in IMG tags and are not background-images. All the links and file names are correct.
• I have been able to fix some of these in the past by re-saving the image and then re-uploading, but it will then often revert to the same disappearing behavior

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);

Answer 2

Something that happened to me was that I was using background images and I was missing the closing ");" on the url. So images would still show in my computer but they would not show on any mobile browser. So, just for those crazies like me that might be too tired to figure this out. Don't forget to make sure the url is correct:

My mistake

url(resoures-services-dedicated-support.jpg

The correct way

url(resoures-services-dedicated-support.jpg);

Disclaimer, even though this might not be the right answer, believe me guys, seeing this would have saved me a couple of neurons.