Why does my website look different on Apple products?

December 21, 2010 12:23 PM

Just bought an iPad and realized that Apple products do strange things to the photos on my website, but everything looks fine on a PC.

Here is the main photo gallery in question. I built this website on my PC (with a very nice calibrated monitor) and everything looks fine, however I just got an iPad and it looks like the colors are reversed in every photo in this gallery. The same goes for my iphone. The other galleries look relatively normal and I can't figure out why this would happen- I'm pretty sure I made everything the exact same way.

Also, all my photos look much darker on the iPad. I'd like to be able to show my portfolio on it so this is really problematic. I know there will be differences between every monitor but is there a way to adjust my screen without altering and re-uploading the photos?

posted by Thin Lizzy to Computers & Internet (11 answers total)

I get the negative-image effect on Chrome and Safari, but not Firefox - smells to me like you have a problem with how Webkit renders your images. Why that is I have no idea - "webkit negative image" doesn't yield anything obviously helpful in Google - but it's at least helpful to know it's not Apple products per se that have the problem.
posted by Tomorrowful at 12:28 PM on December 21, 2010

Best answer: You posted CMYK images -- convert them to RGB and they should be fine.
posted by spilon at 12:29 PM on December 21, 2010 [3 favorites]

I can't help you except to say that this is totally bizarre, and it's doing the same thing on my 21" iMac, both in Chrome and Safari.
posted by iarerach at 12:33 PM on December 21, 2010

Best answer: 2nding spilon: the weird-looking images are in CMYK.

When saving images for the web, always use RGB, and make sure the images are converted to the sRGB color space. That's the best you can do to make sure your images look as uniform as they can across different monitors and operating systems.
posted by zsazsa at 12:41 PM on December 21, 2010

spilon has it. The large images seem to be fine but the thumbnails are CMYK. When saved locally to my Mac they are inverted; in Firefox they look OK but Safari interprets the CMYK settings and thus inverts them from the intended color space.
posted by caution live frogs at 12:46 PM on December 21, 2010

If you're saying to yourself "CMYK what?":

CMYK (Cyan Magenta Yellow blacK) are the basic colors which make up different pigments, just as RGB are the basic colors for light. If you have access to Photoshop, you can change from one to the other by going to Image>Mode>RGB.
posted by ocherdraco at 12:55 PM on December 21, 2010

Best answer: If you're using photoshop there's a “save for web” command that will take care of all the nitty gritty details for you.
posted by thsmchnekllsfascists at 1:28 PM on December 21, 2010 [1 favorite]

Also, make sure to use/embed the sRGB colorspace. Otherwise, some older browsers and photosharing websites (especially Flickr) will choke, and your images will look a bit off.
posted by schmod at 1:39 PM on December 21, 2010 [2 favorites]

Safari for Mac supports different embedded color spaces (e.g AdobeRGB), so be careful which one you tick.
posted by flippant at 7:14 PM on December 21, 2010

Is there a way to make an iPad see these images correctly?
posted by gjc at 8:06 PM on December 21, 2010

Is there a way to make an iPad see these images correctly?

As mentioned above, the ipad is misinterpreting a CMYK color scheme. That means the images were saved for print, not for the web. Webkit uses the sRGB color space, so the images need to be re-saved with sRGB embedded.
posted by thsmchnekllsfascists at 7:00 AM on December 22, 2010