还在为了不同分辨率的设备手动生成小图？WebP Cloud Services 上线 Adaptive Resize 功能

用过 Wordpress 的同学肯定知道，Wordpress 为了优化图片在不同分辨率设备下的访问效果，会将上传的图片进行后台处理，变成多个不同尺寸的图片，比如，我们的 Wordpress 演示站 上有这么一张图片：

我们上传的时候图片的 URL 是： https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224.jpg ，这张图片的分辨率是 3200px*2133px，文件体积 4.4MB。

Wordpress 在后台帮我们转换成了好几张图片：

• https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224-1024x683.jpg
• https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224-150x150.jpg
• https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224-1536x1024.jpg
• https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224-2048x1365.jpg
• https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224-300x200.jpg
• https://wordpress.webp.se/wp-content/uploads/2023/06/DSC7224-768x512.jpg

从 Wordpress 的后台可以直接看到这些文件：

 ls -lh | grep 7224
-rw-r--r-- 1 www-data www-data 126K Jun 28  2023 DSC7224-1024x683.jpg
-rw-r--r-- 1 www-data www-data  22K Jun 28  2023 DSC7224-150x150.jpg
-rw-r--r-- 1 www-data www-data 224K Jun 28  2023 DSC7224-1536x1024.jpg
-rw-r--r-- 1 www-data www-data 363K Jun 28  2023 DSC7224-2048x1365.jpg
-rw-r--r-- 1 www-data www-data  31K Jun 28  2023 DSC7224-300x200.jpg
-rw-r--r-- 1 www-data www-data  86K Jun 28  2023 DSC7224-768x512.jpg
-rw-r--r-- 1 www-data www-data 4.3M Jun 28  2023 DSC7224.jpg
-rw-r--r-- 1 www-data www-data 556K Jun 28  2023 DSC7224-scaled.jpg

Wordpress 会在实际展示的时候通过 src-set 等方式给不同分辨率的设备展示不同的图片，类似这样：

<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683"
        src="https://wordpress.webp.se/wp-content/uploads/2023/06/DSC6975-1024x683.jpg" alt="" class="wp-image-14"
        srcset="https://wordpress.webp.se/wp-content/uploads/2023/06/DSC6975-1024x683.jpg 1024w, https://wordpress.webp.se/wp-content/uploads/2023/06/DSC6975-300x200.jpg 300w, https://wordpress.webp.se/wp-content/uploads/2023/06/DSC6975-768x512.jpg 768w, https://wordpress.webp.se/wp-content/uploads/2023/06/DSC6975-1536x1024.jpg 1536w, https://wordpress.webp.se/wp-content/uploads/2023/06/DSC6975-2048x1365.jpg 2048w"
        sizes="(max-width: 1024px) 100vw, 1024px"></figure>

这样的好处非常明显：不同的分辨率的设备可以直接使用处理好的图片，例如给一个手机用户展示 4.4M 的原图显然没有必要，不仅加载速度慢还会浪费流量。

但坏处也挺明显，用户本地会保存多个尺寸的图片，对于 Wordpress 这种 Fully managed 的方案可能还好（虽然每个图片都会产生大约额外 7 个小文件，迁移时会有 7 倍的小文件 IO），如果不是 Wordpress 的场景的话，手动 resize 图片且保存这些不同尺寸的图片，并且在 HTML 上加入 CSS 为不同的用户渲染不同的图片显然不是一个非常轻松的事情。

那这里我们设想一个场景，你和我一样是个“摄影爱好者”，有个自己的网站对外展示了拍摄的图片，为了方便管理，照片原图全部放在了 AWS S3/Cloudflare R2 上，每个 Album 一个目录，网站每个 Album 页面的 thumbnail 图片使用了 WebP Cloud 上的 ?width=300 之类的参数渲染缩略图。

那每个 Album 内部的照片应该如何展示？直接给用户展示原图显然不科学，普遍相机拍摄的照片都在 4000x4000px 以上，所以这里我们需要一个比较方便的可以针对不同尺寸设备自动 resize 的功能，正好，我们最近上线了一个新功能——Adaptive Resize 可以做到这一点。

在 Dashboard 中，每个 Proxy 都提供了一个 Adaptive Resize 的功能，目前用户可以配置两类（桌面端和移动端）设备的最大分辨率，默认值为桌面端 1600px，移动端 800px。

在配置完成并启动了这个功能后，我们会根据访客的 User Agent 判断是桌面端设备还是移动端设备，并对于网站上任何宽度大于对应设备环境设定值的图片，会被自动等比例 resize 到设定宽度，从而进一步减小图片的体积，加快渲染速度。

当然，如果你需要其他不同尺寸的图片的话，依然可以参考我们 Image Resize 功能，通过在图片后面加入 ?width=100 类似的参数来获得不同尺寸的图片，这个参数优先级会高于 Adaptive Resize （但如果这里参数的尺寸大于 Adaptive Resize 的尺寸的话，会以 Adaptive Resize 尺寸为准）

例如，一张图片的尺寸是 4000x4000px，Adaptive Resize 设定了桌面端是 2000px，那如果请求的路径是 http://path/to/image.jpg?width=3000 的话，依然会输出一张 2000x4000px 的图片

和往常我们添加的新功能一样，WebP Cloud 一直坚信所有用户应该获得同等的使用权利。因此无论你是付费用户还是免费用户，Adaptive Resize 功能均可无限使用且没有额外费用，欢迎来尝鲜！（以及汇报可能的 Bug 😇）