IE8 browser picture itself problem causes unable to display picture---strange phenomenon of the troubleshooting sharing

Introduction:


A period of time to do the new version of the 2 first page, the total feeling of the new version of the Home Line wonderful review of the 2 pictures of the color is strange, at that time thought is the picture compressed too much, because it is too busy to care too much! The following are from the online:

Red Box I think the 2 strange pictures, we feel the color is not the same!



Problem Description:

Today, the test classmate to find me, said the new homepage wonderful review below 2 pictures under the IE8 Picture Show!



Start Troubleshooting:

View the DOM structure of the picture through a browser, with the following code:

http://file.xxxx.com/view/banner/09e7286d39013387ff07e0efe7dc8c6ab3a51aef.jpg"Src="Http://g.tbcdn.cn/s.gif"Width=" 174 "height=" 113 ">


At first, the first reaction is the picture address problem, combined with the picture DOM structure to see, suspect is image layzload lazy loading mechanism caused, so try to put the real address of the picture directly in the image IMG SRC address to solve!

PS: Picture lazy loading Mechanism principle:

Popular speaking is JS detection user mouse Scrolling to the viewable area, will be pre-buried on the IMG element data-original real picture address replaced with the image SRC, so as to achieve the purpose of lazy loading, to achieve performance optimization!


The result is still not!

UH ~



Further analysis:

Quick list of related elements

• Non-IE browser normal display picture;
• Less than or equal to the native IE 8 does not display properly;
• Non-picture lazy loading detection mechanism problem;
• Directly in the browser to access the picture address non-IE browser is normal display, the native IE8 and the following does not display properly (the picture load failed fork icon)

Preliminary analysis Conclusion:

Based on the above situation, it is analyzed that there are 2 possibilities:

• Image address issues (e.g. legality, security, etc.)

• Problems with the picture itself

Continue troubleshooting:

The initial suspicion is the file path keyword effect (which is purely hypothetical), because under the window system,//file is the path address peculiar to the local picture window system, but:

1. IE8 above OK;
2. The browser does not issue warning and error notifications! Description URL Path secure, legal ~
3. Other same domain name:http://file.xxxxx.com/ under the picture to show normal!

Therefore, the image URL address is first excluded!

Further troubleshooting:

Download the pictures that can't be displayed properly, apart, and view the picture information first:

• Suspect problem picture URL address: http://file.xxxxxx.com/view/banner/bdb3a244b3ba0774512223bd5442fa46c1ea7fbb.jpg

• View file information,

See, cmyk!.

Suddenly startled, a glance to see CMYK, suddenly found the fundamental problem lies! So also understand before always think the picture color strange root cause!



First close-up experience the RGB and CMYK picture differences:

The following 2 identical pictures, using different color mode visual differences (red box is used for industrial printing), we feel the following:




CMYK color Mode simple explanation:

CMYK color model is mainly used for industrial typesetting and printing, also known as the printing industry 4 color enhancement mode (cyan, magenta, yellow, black value), is not applicable to the "light" color of 3 primary colors (red green blue) 256-step color screen picture display !

Have studied graphic visual design or animation-related, art professional students know, here I will not much of the crooked!


I know the difference between the 2 (total 3) Color patterns in the mainstream of the picture, but what does it have to do with the browser? No hurry, look down!



CMYK Major browser support situation:

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

The way to solve it:

Fix this problem (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.


Best way to save the picture color mode from CMYK to RGB color mode using the Adobe Photoshop picture editor or other image editor that can be converted! For example, my:

At this point, save re-upload, IE8 and so on display normal! 10 minutes, problem solving!!!




inquiring:


Maybe you would ask? Since you say that there is a problem with the picture color mode, why not IE browser can do it?

In fact, you let me answer, I can only say that someone else browser rendering engine than you IE Trident Engine advanced, compatible, rendering mechanism to handle the good! From the Support browser support list can also be seen, Firefox 2.x think it was not a drop!


For this problem, Microsoft in a new generation of browsers have been repaired, so from IE9 start, can be normal display! In fact, from the support table above or the actual operation of the results, the same is true!




Postscript:


This is a hidden very deep, not easy to find the details brought about by the picture display problem, I here is only targeted, simple analysis of the reason! For everyone to reference!

Hope to operate students, PD students and other users upload pictures, pay attention to this problem, thank you!

IE8 browser picture itself problem causes unable to display picture---strange phenomenon of the troubleshooting sharing