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

Question

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

有没有办法让我仍然拥有相同的 link，在我的情况下甚至有分机。 (.png,.jpg) 同时提供下一代图像。

使用此代码对我的情况没有帮助，因为如前所述，图像 link 是从数据库加载的，这需要大量工作和手动步骤

<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# 作为网站的开发语言

在此先感谢任何建议或解决方案。

Answer 1

因为没有人回答我可以给你“如何”，但只能从 .htaccess 的角度。

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

.htaccess 的实现方式

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)$ /..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>

执行的步骤

我们所做的是检查浏览器发送的 headers %{HTTP_ACCEPT} image/webp

我觉得可以写成 <add input="{HTTP_ACCEPT}" pattern="image/webp" ignorecase="false"> 在 IIS 中（抱歉，这是我的 IIS 知识范围，没有可玩的实时服务器！）

然后我们在下一行检查请求是否存在（原始文件存在）（这是因为从技术上讲，如果原始图像是 jpg 并且请求是对于 jpg，您可以决定以不同方式处理。
然后我们检查我们是否有相同的文件但末尾有 .webp 扩展名（我们转换后的图像）
如果文件存在 .webp（第 3 步）扩展名并且浏览器接受 image/webp（第 1 步）我们重写请求并添加 .webp在系统将用于定位文件的文件名末尾，我们然后 return 类型 image/webp 以便浏览器知道如何处理它。
最后，在上一节中，我们发回了 header vary accept，以便浏览器知道可以使用与预期不同的 mime 类型的图像。

为了使用上述方法，它依赖于您将文件放在同一目录中并以相同的方式命名，但在末尾加上 .webp。

例如

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

需要一个名为：

的 webp 文件

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

上班。

显然，由于这些是在服务器端重写的，因此应该希望能保留您的 link 汁液（但请记住，您仍在发送不同的文件类型，因此它可能无法正常工作），但至少是您的结局用户会很高兴。

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

Serve images in next-gen formats, replace the images without changing the old links

c#

asp.net

asp.net-mvc

pagespeed

pagespeed-insights

.htaccess 的实现方式

执行的步骤