0

this is the link to my website: http://oanceacezarfotograf.com

I have an issue when displaying images on iOS devices. When on every other device there is no problem at all, when accessing my site from any iOS device (have tried with my iPhone 6 and a friends iPhone 6) no images at all on the website will be shown.

The website is coded just in HTML so all the code is out there. I have already tried the solution shown in this post: 2017 Answer to "How to make background image fixed on iPhone6"

But then everything just screws up, as shown on http://oanceacezarfotograf.com/test.

I have no idea at all how to solve this or what causes the problem. Any help would be much appreciated.

Thank you.

Iulian Oancea
  • 11
  • 4

1 Answers1

0

iOS (and several other browsers) does not support webP image format: https://caniuse.com/#feat=webp

Either use supported image formats like jpg or use the picture tag to support both:

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

Source: https://css-tricks.com/using-webp-images/

Side note: Also consider downscaling the images, they are huge (6000x4000px) and take a while to load even at a higher speed connection.

Capricorn
  • 2,061
  • 5
  • 24
  • 31
  • Thanks for your reply. I have also encountered this issue with the images in PNG format. I will re-scale them though and also try your solution. Can you tell me though how to integrate it with my actual code? I don't know how to do it without breaking stuff. Thank you. – Iulian Oancea Aug 20 '18 at 03:43
  • Added the background image code as it is now in the main post. – Iulian Oancea Aug 20 '18 at 03:48