Tancy's Blog

CDN 图片组件规范

CDN 图片组件规范

由于目前各个前端团队都有自己的开发框架,业务组件,各自的依赖,导致各个团队都有自己的CDN图片组件,为了更好的性能和体验,我们制定图片组件规范,罗列必须要有的功能和特性。

必须功能

  • 无线端域名收敛

    ~图片地址收敛至 单个域名(减少DNS解析时间)

  • CDN 最佳尺寸适配

    ~ 给出期望尺寸配对CDN尺寸列表给出最佳图片尺寸(没有一样尺寸按最佳尺寸小的配对)

    • 取高度最佳
    • 取宽度最佳
  • webp格式适配,android 设备支持webp格式

    ~ 通过检测浏览器是否支持webp格式,输出webp格式

  • 适配设备DPI,给出2x图片

    ~根据设备DPI 给出2X图片,DPI等于

  • 支持网络环境判断,输出不同的CDN图片Q值

    ~ 推荐DPI>=2的情况下强网q50 弱网q30 ,DPI<2 强网使用q9,弱网使用q75。锐化可根据实际情况选择 s150。可以适当根据实际情况选择q90,q75,q50,q30。

  • 裁剪功能
    ~可以根据参数配置图片裁剪功能。

建议

在DPI参数大于2的时候建议使用2x的图片。在RetinaHD这类的设备3x图片在webview中内存不足造成容易App Crash。

CDN 尺寸列表

各团队根据自己的实际CDN图片尺寸列表为准。

可选功能

  • Lazyload功能

默认占位图片base64

`(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)

常见问题

  • gif图片:只做域名收敛,不加任何后缀。
  • png图片:q值无效,sharpen值会使图片失真,两个值会过滤掉
  • png|gif图片:不加_.webp参数,小米2s上png加webp图片不显示,gif加webp动画失效

晓田 ronntx@gmail.com

2015-5-21