这是一个全栈式图片加载优化解决方案，旨在通过“客户端感知 + 服务端实时处理”的配合，实现极致的流量节省和加载速度提升。

本方案与懒加载相似，但与传统的响应式图片（srcset）不同，本方案不需要在 HTML 中硬编码多个尺寸，而是通过 JavaScript 在运行时根据用户的 真实环境上下文（屏幕宽度、DPR、网络状况）动态计算最佳尺寸，由于计算和替换发生在浏览器请求图片之前，从而实现“精准投递”。

1. 本方案根据图片当前展示尺寸请求对应大小图片，节约流量，解决Light House测试中改进图像传输(Improve image delivery)问题
2. 可选定提供包括Webp和Avif在内的多种图片格式。所有经由代理服务器处理的图片，都会自动转换为 WebP 格式。相比 JPEG/PNG，WebP 通常能提供 30%~50% 的体积缩减，且画质肉眼几乎无损。

比如你网站页面中有一张长宽2500×900（90KB）的横幅，实际上用户页面只渲染1000×360（仅34KB），那么你可以通过使用此代码让图片请求1000×360大小的图片以节约60%的流量。

DEMO：见https://www.zibll.top/forum-post/43405.html，打开F12查看请求的图片可看到优化后的请求。
为网址添加params?idp-false可查看不启用优化的表现。

# 代码未经严格测试，可能存在兼容问题