Question

我的网站是https://www.makarsky.dev，所有文件都位于Github上的https://github.com/jacobmakarsky/jacobmakarsky.github.io

我正在链接以下格式的图像-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"> <div class="ui one column centered grid"> <div class="column"> <div id="videoElement"></div> </div> <div class="one column centered row"> <div class="column center aligned"> <div class="ui segment"> <div id="textElement"></div> </div> </div> <div class="column center aligned"> <div id="navigationElement"></div> </div> </div> </div>

我的图像位于资源文件夹内的所有图像文件夹中，因此./resources/images/forbes.jp2在我的HTML文件中用于所有图像。

这会以某种方式影响Chrome吗？我在网上找不到任何可以解释为什么这些图片仅在Chrome和Brave浏览器中无法显示的信息。任何帮助表示赞赏，谢谢。

Answer 1

JPEG2000 is not supported by most browsers。看起来Safari是唯一的Safari浏览器。尝试将它们转换为常规JPEG。

Answer 2

如果您尝试这样做

<picture>
<source srcset="./resources/images/forbes.jp2" type="image/jp2"> <!-- safari -->
<source srcset="./resources/images/forbes.webp" type="image/webp"> <!-- multiple -->
<source srcset="./resources/images/forbes.jpg" type="image/jpeg"> <!-- multiple -->
<img src="./resources/images/forbes.jpg" alt="Forbes"> <!-- default -->
</picture>

您可以添加对其他浏览器的支持，同时仍支持Safari上的JP2图像。

Google无疑正在推动JPEG2000作为在更有效的文件大小上提供图像的标准，但是由于他们自己的浏览器甚至还不支持它们，因此您不必再担心这一点。

您可以阅读有关Google's Image Best Practices Here

的内容

为什么我的JPEG2000格式（.jp2）图像在Safari中显示而不在Chrome或Brave中显示？

2 个答案: