cdn本身不自动优化图片，需手动开启功能、配置参数并确保mime类型正确；cloudflare polish默认关闭且仅对代理下的静态图片生效，mime错误、缓存污染或动态url均会导致失效。
CDN 本身不自动优化图片，除非你明确开启对应功能、配置正确参数，并确保请求路径和 MIME 类型符合要求。盲目依赖“CDN 自动压缩”反而可能让图片体积变大、格式错乱或 fallback 失败。
Cloudflare Polish 开启后为什么没效果？
Polish 是 Cloudflare 提供的图片优化功能，但它默认关闭，且只对静态资源生效——前提是这些资源通过 Cloudflare 代理（即 DNS 解析走 CF），且响应头中 Content-Type 必须是 image/jpeg、image/png 或 image/webp。
- 未开启：登录 Cloudflare Dashboard → Speed → Optimization → 找到
Polish，设为Basic（转 WebP + 压缩）或Aggressive（额外降采样） - 路径需静态：动态生成的
data:、blob:或 JS 拼接的 URL 不会被处理 - MIME 错误：如果服务器返回
Content-Type: text/plain或缺失，Polish 直接跳过 - CDN 缓存污染：旧缓存未失效，新策略不生效，可临时加 cache-busting 参数如
?v=2验证
Imgix / Cloudinary 的自动参数怎么写才安全？
这类 CDN 的核心是 URL 参数驱动转换，但参数顺序、命名和取值范围极易出错，导致 404、模糊或格式回退失败。
- 尺寸缩放优先用
w/h而非fit=scale：例如https://demo.imgix.net/image.jpg?w=800&h=600&fit=crop比fit=scale更可控 - 质量控制必须显式指定：
q=75（Imgix）或q_75（Cloudinary），不传默认可能用 90+，体积无节省 - WebP 转换要配
fm=webp（Imgix）或f_webp（Cloudinary），但得确认源图支持透明通道——PNG 转 WebP 可保留 alpha，JPG 不行 - 避免嵌套参数冲突：比如同时传
auto=format和fm=webp，后者会覆盖前者
CDN 自动优化和 <picture></picture> 怎么共存？
CDN 自动优化和前端语义化标签不是互斥关系，但配合不当会导致双重压缩、格式错乱或 fallback 彻底失效。
- CDN 优化应作为兜底层：只对
<img src="...">这类基础引用生效；<source type="image/webp"></source>的 URL 也建议走同一 CDN，否则 WebP 地址被优化成 JPG 就崩了 - 不要让 CDN 改写
srcset中的 URL：某些 CDN（如老牌 Akamai）会重写所有图片链接，导致480w描述符与实际文件宽度不符，浏览器选图逻辑错乱 - 验证方式：在 Chrome DevTools → Network 中查看某张图片的 Request URL 和 Response Headers，确认
X-Imgix-Features或Cf-Polish头存在，且Content-Type是预期格式 - 本地开发时禁用 CDN 优化：用
localhost或127.0.0.1绕过代理，避免测试环境误触发线上策略
最易被忽略的一点：CDN 的“自动优化”从不理解你的布局意图。它不会因为你写了 sizes="(max-width: 768px) 100vw" 就主动给你生成 375px 宽的图——它只按 URL 参数或全局策略机械处理。真正起作用的，永远是你亲手写的 srcset、sizes 和 <picture></picture> 结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
