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

you can resize the image according to the display size. This is Sample code for my project logo and it worked.

<div class="image"><a href=/displayimage.php"><img src=/dir1/dir2/image.png" srcset="/assets/image.png **0.8**x" alt="image"/></a></div>

choose a reliable size 4x, 3x, 0.5x or include a number of them for dynamic display.

Answer 2

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 3

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.

Answer 4

I understand this post was from 5 years ago although,I recently came upon this problem and it was as simple as using a supported picture format for mobile browsers.

example: Instead of using a less common file type as in (.webp) try using more common types as in .jpeg or .png.