WebP/JPG - 在HTML文件中只预加载所需类型

Question

WebP/JPG - 在HTML文件中只预加载所需类型

8

我有一个网站，使用webp和jpg作为备用图像。在头部中，我有一个大尺寸的图片和一个手机用户用的小尺寸图片。

所以我一共有4个文件：

header-big.webp
header-small.webp
header-big.jpg
header-small.jpg

因为它在头部，所以我想要预加载图像，但只需要我需要的图像。对于小的和大的图像，我可以使用media属性进行预加载。

<link rel="preload" href="header-small.jpg" as="image" type="image/jpg" media="(max-width: 575px)">
<link rel="preload" href="header-small.webp" as="image" type="image/webp" media="(max-width: 575px)">
<link rel="preload" href="header-big.jpg" as="image" type="image/jpg" media="(min-width: 576px)">
<link rel="preload" href="header-big.webp" as="image" type="image/webp" media="(min-width: 576px)">

在此情况下，浏览器始终预加载两个文件，取决于其宽度，但仍然只使用其中一个。

是的，这是有道理的，因为jpg和webp都可以实现。所以当然浏览器会预加载两者。

但我能否说“如果支持webp，则预加载webp并且不预加载jpg”？

谢谢， Florian

- kanuddel

类似这样的内容？ - Rojo

不，那是关于已经运作的实现部分。我的问题在于图片的预加载。我想避免预加载未使用的图片格式。 - kanuddel

其实是一个非常好的问题！我刚刚遇到了同样的问题，并搜索了“动态预加载”的解决方案，因为有些浏览器仍然不支持WEBP，我想给它们预加载JPG（JPEG）但是无论从哪里都没有找到实现这一点的方法！你的问题得到了我的赞同。 - Martin

2个回答

3

因为我想要改善最新的谷歌搜索信号更新中的LCP，所以我来到了这个问题。我也希望在支持Webp时预加载Webp，不支持时预加载JPG。

当浏览器支持预加载但不支持Webp时，只能预加载JPG。当我查看https://caniuse.com/webp并将其与https://caniuse.com/link-rel-preload进行比较以确定交集区域的大小时，我注意到支持预加载但不支持Webp的浏览器版本并不多，主要是Safari。我在下表中总结了该交集区域。“Webp”和“preload”列分别显示具有足够支持Webp和link元素及preload的第一个版本。版本间隔列显示属于“支持preload但不支持Webp”的版本，而%用户间隔则显示全球用户中有多少百分比属于该类别并受益于预加载的jpeg。百分比是从https://caniuse.com/usage-table汇总而来。

浏览器	WebP	预加载	版本间隔	版本间隔用户占比
IE	不适用	不适用
Edge	18	17	[17-18)	0.03%
火狐	65	85（默认情况下禁用56*，57-84）	56	0.01%
Chrome	32	50
Safari	14*	11.1	[11.1-14)	0.65%
Opera	19	37
Safari(iOS)	14.4	11.3	[11.3-14.4)	1.24%
Opera Mini	全部	不适用
Android浏览器	4.2	91
Opera Mobile	62	不适用
Chrome for Android	91	91
Firefox for Android	89	89
UC for Android	12.12	不适用
Samsung Internet	4	5
QQ浏览器	10.4	不适用
百度浏览器	7.12	不适用
KaiOS	不适用	不适用
总计				1.93%

因此，全球大约只有1.93％，如果您的受众主要在美国，那可能少于这个数字，基于这样一个假设：'发达'世界的人们使用的最新硬件和浏览器比其他地方的人们更多。我也预计这个数字会随着时间的推移而渐近地下降到零，并且那些使用较旧浏览器的用户也更有可能连接速度较慢。

我的分析评估是，如果您有webp资源可用，尝试进行任何jpegs预加载可能不值得，因为从中受益的用户 a) 总体上只占极小比例 b) 可能更难以优化，因为用户升级到新版浏览器的收益递减。

如果您像我一样的目标是将Core Web Vitals上的“差”和“需要改进”的用户移动到“良好”范围内，以满足Google所指出的75％用户阈值，从而获得某种特殊的“快速网站”搜索结果指示，那么您可能不必担心这个群体。

- Erikest

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MigueMike · Accepted Answer

我实现的解决方案包括一个小脚本，从 https://avif.io/blog/tutorials/use-avif-in-css/ 获取，用于检测 AVIF 和 WEBP 格式，因为我后来需要为这两种格式添加 CSS 支持，但对于您的用例可能可以简化。一旦我知道它得到了支持，我就在头部添加一个 preload 链接。

我将脚本放置在头部的最末尾，因为在我的特定情况下，我不需要更早地加载图像。

<script type="text/javascript">
  function addPreloadLink(img, type) {
    var fileref = document.createElement('link');
    fileref.setAttribute('rel', 'preload');
    fileref.setAttribute('as', 'image');
    fileref.setAttribute('href', img);
    fileref.setAttribute('type', type);

    document.head.appendChild(fileref);
  }

  function AddClass(c) {
    document.documentElement.classList.add(c);
  }

  var webp = new Image();
  webp.src =
    'data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==';
  webp.onload = function() {
    AddClass('webp');
    addPreloadLink('header-small.webp', 'image/webp');
    addPreloadLink('header-big.webp', 'image/webp');
  };
  webp.onerror = function() {
    //load JPG
    addPreloadLink('header-small.jpg', 'image/jpg');
    addPreloadLink('header-big.jpg', 'image/jpg');
  };
</script>