引子:
前段时间 做新版2.0 首页 的时候, 总感觉 新版首页 线上 精彩回顾下的 2张图片颜色怪怪的,当时以为是图片压缩太厉害导致的,由于实在太忙就没太在意!以下 是来自线上 截图:
红色方框 我认为 那2张 怪怪的 图片,大家感受下颜色是否不一样!
问题描述:
今天,测试同学找到我,说新版首页 精彩回顾下方 2张图片 在 ie8下 图片展现不出来了!
开始排查:
通过 浏览器 查看图片 DOM结构, 代码如下:
<img data-original="http://file.xxxx.com/view/banner/09e7286d39013387ff07e0efe7dc8c6ab3a51aef.jpg" src="http://g.tbcdn.cn/s.gif" width="174" height="113” >
起初, 第一反应是图片地址问题,结合查看到的图片DOM结构,怀疑是 image layzload 懒加载 机制导致,故而 尝试把 图片真实地址 直接写在 图片 img src 地址上 解决!
ps:图片懒加载机制原理:
通俗的讲就是js检测 用户鼠标滚动到 可视区域后,将预先埋在 img元素上 data-original 真实图片地址 替换到 图片 src上,从而达到图片懒加载的目的,实现性能优化!
结果 还是不行!
呃~
进一步分析:
快速列举下相关要素
- 非 ie浏览器 正常显示图片;
- 小于等于 原生ie 8 以下无法正常展现;
- 非图片 懒加载检测机制问题;
- 直接在浏览器中访问 图片地址 非 ie浏览器都正常显示, 原生ie8 及其以下不能正常显示(出现图片加载失败叉叉图标 )
初步分析结论:
基于上述情况, 由此 分析出是2个可能性:
- 图片地址问题(如:合法性、安全性等)
- 图片本身问题
继续排查:
最初怀疑是 file路径关键字 影响(纯属自己假设歪歪),因为在window系统下,//file 是本地图片 window系统特有的路径地址,但 :
- ie8以上ok;
- 浏览器未发出警告和错误通知!说明url路径 安全、合法~
- 其他 同域名:http://file.xxxxx.com/ 下的图片展现正常!
故而 图片url地址 首先被 排除掉!
进一步排查:
将 无法正常 显示的图片 下载下来,二话不说,先查看图片信息:
- 查看文件信息,如图:
看到没,CMYK!
猛然一惊,一眼 就瞅到 CMYK,顿时发现了 根本问题所在!于是也明白了 之前总觉得图片颜色怪怪的根本原因了!
先 特写感受下 RGB 和 CMYK 图片差异:
以下2张相同图片,使用 不同颜色模式 视觉差异( 红色方框 的是 用于工业印刷用的),大家感受下:
CMYK颜色模式 简单解释:
CMYK 颜色模式 主要用于 工业排版印刷使用,也被印刷业 称之为4色加色增强模式(青、品红、黄、黑值), 并不是 适用于 基于“光”色的3原色(红 绿 蓝) 256阶色的 屏幕 图片展示!
学过平面视觉设计或动画相关、美术专业 同学都知道,这里我就不多叽歪了!
知道了图片主流这2种(总共3种) 颜色模式的差异,但和浏览器有什么关系呢?不急,往下看!
CMYK 各大 浏览器 支持情况:
Browser support for CMYK encoded images
Browser | RGB | CMYK |
IE6, 7, 8 | Yes | No |
IE9 | Yes | Yes |
Firefox 2.x | Yes | No |
Firefox 3.x - | Yes | Yes |
Safari 4- | Yes | Yes |
Google Chrome 5 - | Yes | Yes |
解决之道:
修复这个问题 (Fixing this issue)
Image editors such as Adobe Photoshop, The Gimp, and others is capable of identifying if a jpg image is a CMYK image and saving a CMYK jpg as a RGB jpg.
最佳方式,使用 Adobe Photoshop 图片编辑器或其他能够转换的图片编辑器,将图片 颜色模式 从CMYK 保存为 RGB 颜色模式即可!比如我的:
至此,保存重新上传后,ie8等显示正常!10分钟,问题解决!!!
刨根问底:
可能你会问? 既然 你说图片色彩模式有问题,那为什么 非ie 浏览器 都可以呢?
其实你让我回答,我只能说 人家 浏览器渲染引擎 比你ie的 trident引擎 先进,兼容、渲染机制处理的好! 从支持浏览器支持列表中也可以看到, Firefox 2.x 想当初也是不行滴!
对于这个问题, 微软在新一代浏览器 里已经修复,故而从 ie9开始,可以正常展现!事实上从上面的支持 表中 或者 实际操作效果 来看,也是如此!
后记:
这是一个隐藏很深,不容易被发现的 细节 所带来的图片展现问题, 我这里也只是有针对性的、简单的 剖析下原因! 抛砖引玉,供大家参考!
希望 运营同学、PD同学等其他 上传图片 的使用者们,注意下这个问题,谢谢!