ie8浏览器 图片本身问题导致 无法显示图片--- 诡异现象的排查分享

引子：

前段时间 做新版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" alt="" 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地址 首先被 排除掉！

进一步排查：

将 无法正常 显示的图片 下载下来，二话不说，先查看图片信息：

怀疑问题图片url地址： http://file.xxxxxx.com/view/banner/bdb3a244b3ba0774512223bd5442fa46c1ea7fbb.jpg

查看文件信息，如图：



看到没，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同学等其他 上传图片 的使用者们，注意下这个问题，谢谢！