为什么我的 .png 图片在 Chrome 浏览器中被替换为 .webp 图片？
Why is my .png image replaced with a .webp image in Chrome browser?
这是我的第一个问题，请轻点。我在一个网站上工作。我已将所有代码部署到我的 Web 服务器。除了公司徽标图片外，本地主机和 Web 环境之间的一切看起来都一样：
Example in Chrome browser - Left: localhost rendering; Right: web server rendering
我显然已经检查过图像的路径是否正确并且加载了相同的图像文件。
当我检查 Chrome、Edge 和 Opera（Windows 的所有最新版本）中的图像时，src 属性是一个丑陋的东西，并且提供的图像显示效果很差：
<img src="images/Nx80xbrr_final_logo_white.png.pagespeed.ic.6XkhN2MIrr.webp" alt="logo" height="80px">
在 Firefox 中，src 属性与我在本地环境中的属性相匹配，并且显示如我所料：
<a class='navbar-brand' href='index.php'><img src='images/brr_final_logo_white.png' alt='logo' height='80px'></a>
我已经搜索了 interwebs 但没有成功地弄清楚网络服务器上可能发生了什么来改变 src / 图像。非常感谢任何帮助！
看起来您的生产环境正在使用 https://www.modpagespeed.com/doc/filter-image-optimize 来优化图像，这就是为什么它最终成为非常不同的 URL 和不同的文件扩展名的原因。这似乎是通过降低图像质量来减少您的页面加载时间。
来自 their documentation：“PageSpeed 通过更改网页上的资源以实施网络性能最佳实践来改善网页延迟”，这解释了为什么您的图片来自 URL 与本地主机。
这是我的第一个问题，请轻点。我在一个网站上工作。我已将所有代码部署到我的 Web 服务器。除了公司徽标图片外，本地主机和 Web 环境之间的一切看起来都一样： Example in Chrome browser - Left: localhost rendering; Right: web server rendering
我显然已经检查过图像的路径是否正确并且加载了相同的图像文件。
当我检查 Chrome、Edge 和 Opera（Windows 的所有最新版本）中的图像时，src 属性是一个丑陋的东西，并且提供的图像显示效果很差：
<img src="images/Nx80xbrr_final_logo_white.png.pagespeed.ic.6XkhN2MIrr.webp" alt="logo" height="80px">
在 Firefox 中，src 属性与我在本地环境中的属性相匹配，并且显示如我所料：
<a class='navbar-brand' href='index.php'><img src='images/brr_final_logo_white.png' alt='logo' height='80px'></a>
我已经搜索了 interwebs 但没有成功地弄清楚网络服务器上可能发生了什么来改变 src / 图像。非常感谢任何帮助！
看起来您的生产环境正在使用 https://www.modpagespeed.com/doc/filter-image-optimize 来优化图像，这就是为什么它最终成为非常不同的 URL 和不同的文件扩展名的原因。这似乎是通过降低图像质量来减少您的页面加载时间。
来自 their documentation：“PageSpeed 通过更改网页上的资源以实施网络性能最佳实践来改善网页延迟”，这解释了为什么您的图片来自 URL 与本地主机。