C# 以下一代格式提供图像，在不更改旧链接的情况下替换图像

我正在努力提高网站在PageSpeed Insights中的排名。 它建议我将我的图像更改为下一代图像。 这样做的问题是，旧图像已经被索引，并且在搜索引擎上有很好的排名，而且大多数图像链接都存储在数据库中，而不是静态链接

有没有一种方法，我仍然可以有相同的链接，在我的情况下，甚至有ext.（.png，.jpg），而服务的下一代图像

在我的例子中，使用这段代码并没有真正的帮助，因为正如前面提到的，图像链接是从数据库加载的，这需要大量的工作和手动步骤

<picture>
  <source srcset="img/yourImage.webp" type="image/webp">
  <source srcset="img/yourImage.jpg" type="image/jpeg"> 
  <img src="img/yourImage.jpg" alt="Your image">
</picture>

我正在使用MVC.NET C#作为网站的开发语言

提前感谢您的建议或解决方案，我们将不胜感激

---

由于没有人回答，我只能从

.htaccess

的角度向您介绍“如何”

希望这足以让您在IIS中应用相同的规则

.你是怎么做的

AddType image/webp.webp
重新启动发动机
重写cond%{HTTP_ACCEPT}image/webp
RewriteCond%{REQUEST_FILENAME}-f
RewriteCond%{REQUEST_FILENAME}.webp-f
重写规则^/？（.+？）\（jpe？g|png）$/$1.$2.webp[NC，T=image/webp，E=EXISTING:1，E=ADDVARY:1，L]
标题附加“更改”“接受”

执行的步骤

我们要做的是检查浏览器发送的带有

%{HTTP_ACCEPT}image/webp

我认为这可以写成

在IIS中（很抱歉，这是我在没有实时服务器的情况下了解IIS的范围！）

然后我们在下一行检查请求是否存在（原始文件是否存在）（这是因为从技术上讲，如果原始图像是

jpg

，并且请求是

jpg

，则应该是404，您可以决定以不同的方式处理）

然后，我们检查是否有相同的文件，但末尾有

.webp

扩展名（转换后的图像）

如果文件的扩展名为

.webp

（步骤3），并且浏览器接受

图像/webp

（步骤1），我们重写请求并将

.webp

添加到系统用于定位文件的文件名末尾，然后返回类型

图像/webp

，以便浏览器知道如何处理它

最后，在最后一节中，我们将返回头vary accept，以便浏览器知道可以使用与预期不同的mime类型的图像

为了使用上述方法，它依赖于您将文件放在同一目录中，并以相同的名称命名它们，但最后使用

.webp

例如

https://example.com/img/imagefolder/myimage.jpg

需要一个名为：

https://example.com/img/imagefolder/myimage.jpg.webp

工作

---

显然，由于这些都是服务器端的重写，因此希望能够保留您的链接（但请记住，您仍在发送不同的文件类型，因此可能无法正常工作），但至少您的最终用户会很高兴。

可能会帮到您-如果按照建议，您仍然以旧格式提供回退链接，这样它们就不会从搜索中消失。另外，这与ASP.NET MVC或C#几乎没有任何关系，这实际上是一个HTML和图像问题。我正在尝试另一种方法，因为这需要手动更新，我们有数千个图像，我们可以批量生成WebP图像，但我正在寻找一种解决方案，可以在没有手动更新的情况下解决问题，正如您所知，一些图片链接来自数据库，我将尝试编辑我的问题并添加更多详细信息

AddType image/webp .webp

<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^/?(.+?)\.(jpe?g|png)$ /$1.$2.webp [NC,T=image/webp,E=EXISTING:1,E=ADDVARY:1,L]

  <IfModule mod_headers.c>
    <FilesMatch "(?i)\.(jpe?g|png)$">
      Header append "Vary" "Accept"
    </FilesMatch>
  </IfModule>
</IfModule>