HTML - JPEG Image Formats
The table below displays three different versions of the same JPEG image. The first image will not display in most browsers because it's actually a compressed digital camera format (EXIF). The second image has been saved in CMYK format so also won't display in a lot of browsers. Finally we have a normal RGB JFIF-formatted JPEG which will display properly in all (graphical) web browsers.
Displaying different JPEG formats in your browser
The table below contains three different JPEG file formats of the same photo. Depending on which browser you're using, some of the images may not render or render in an unusual way.
|MSIE (5.23)||No - broken||No - broken||Yes|
|Opera (9.23)||Yes - corrupted||Yes||Yes|
|Safari (419.3)||Yes - inverted||Yes||Yes|
All the browsers listed above are on the Mac platform. A Yes indicates that an image is rendered at the correct size, though not always in the correct format as you can see below. A simple No indicates that only the alt tag is displayed for the format in question.
Displaying different JPEG formats in Safari
web browser seems to do best at the moment at rendering the different
JPEG formats. Here is a snapshot of how the three images in the table
above are displayed in Safari:
If you're not using Safari then you could probably only see the third image which is in standard JFIF JPEG (RGB) format. In Opera the EXIF image is rendered more as outlines than as the digital negative you see in Safari, and it's also the only other browser that renders CMYK images.
Update: As indicated in the table above both Firefox and Opera now render all three images correctly. The output from Safari has not changed and Internet Explorer is still the worst.
EXIF is a compressed image format used by many digital cameras, but not suitable for direct upload to the web. Similarly CMYK is a print file format, with the letters CMYK represent the basic printer colors: Cyan, Magenta, Yellow and blacK. JPEG images that are uploaded to the web should always be in in RGB (Red, Green, Blue) format.
If you have anything to add or correct on this page, get it touch using the Feedback link below.
Send a message to The Art of Web:
press <Esc> or click outside this box to close