如何在Blogger中无JS为特色图片添加srcset并适配WebP

核心解决方案：自定义模板函数生成适配链接 #

Blogger模板支持服务器端自定义函数（无需JS），可直接处理特色图片链接，生成带-RW后缀的WebP格式链接和多尺寸srcset。

1. 添加自定义模板函数 #

在Blogger模板的<head>标签内或<b:skin>标签上方，插入以下代码：

<!-- 生成带-RW后缀的WebP格式多尺寸srcset -->
<b:function name="generateResponsiveSrcset" var="imageUrl, sizes">
  <b:loop values='data:sizes' var='size'>
    <b:if cond='data:index &gt; 0'>,</b:if>
    <b:eval expr='imageUrl.replace(/s\d+/, "s" + data:size) + "-RW.webp " + data:size + "w"'/>
  </b:loop>
</b:function>

<!-- 将原始特色图片链接转为WebP格式（带-RW后缀） -->
<b:function name="getWebpFeaturedImage" var="imageUrl">
  <b:eval expr='imageUrl.replace(/\.(jpg|jpeg|png)$/, "-RW.webp")'/>
</b:function>

2. 修改特色图片的Img标签 #

替换你原来的特色图片代码为以下内容：

<img 
  expr:src='getWebpFeaturedImage(data:post.featuredImage)'
  expr:srcset='generateResponsiveSrcset(data:post.featuredImage, [256, 512, 945, 1684])'
  expr:title='data:post.title'
  fetchpriority='high'
  height='720'
  loading='eager'
  sizes='(min-width: 1024px) 725px, (min-width: 768px) 70vw, 60vw'
  width='1280'
  expr:alt='data:post.title'
/>

3. 关键说明 #

• 适配B类型链接：函数通过正则匹配链接中的sXXX尺寸标识（如s1600），替换为目标尺寸并添加-RW.webp后缀，完美适配尺寸参数在中间的B类型图片链接。
• WebP自动生成：Blogger图片服务器会自动根据带-RW的链接生成对应WebP格式图片，无需手动上传。
• 无重复加载：保持用<template>包裹原特色图片的操作，<template>内的内容不会被浏览器渲染，避免重复请求。
• 服务器端处理：所有链接生成逻辑在Blogger服务器端完成，完全不需要前端JS，符合需求。

内容的提问来源于stack exchange，提问作者صالح الاخرم