iOS 设备上不显示背景图像的问题

Question

这是我网站的链接：http://oanceacezarfotograf.com

我在 iOS 设备上显示图像时遇到问题。当在其他所有设备上完全没有问题时，当从任何 iOS 设备访问我的网站时（我的 iPhone 6 和朋友的 iPhone 6 都试过），网站上根本不会显示任何图像。

该网站仅以 HTML 编码，因此所有代码都在那里。我已经尝试过这篇文章中显示的解决方案： 2017 Answer to "How to make background image fixed on iPhone6"

然后一切都搞砸了，如http://oanceacezarfotograf.com/test所示。

我完全不知道如何解决这个问题或导致问题的原因。任何帮助将不胜感激。

谢谢。

Answer 1

iOS（以及其他几种浏览器）不支持 webP 图片格式：https://caniuse.com/#feat=webp

要么使用支持的图像格式，例如 jpg，要么使用 picture 标签来支持两者：

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

来源：https://css-tricks.com/using-webp-images/

附注：还要考虑缩小图像，它们很大（6000x4000 像素），即使在高速连接下也需要一段时间才能加载。