Ever spent ages working on a photo, only to upload it and find out it looks completely different in your browser? Let How To Geek explain why, and how you can easily fix the problem with Photoshop or GIMP.
This is a problem that has plagued most of us that use the internet to share any sort of photography. You might have just thought that the browser displayed photographs differently, and that nothing could be done to fix it. The simple truth is, it’s a quick, easy fix, and one that can be done with freeware GIMP or Photoshop.
The Short Answer: It’s Your Color Profile
When you work in photo editing programs like Photoshop or GIMP (or, indeed, even when you shoot photos) your image is embedded with a color profile, and this color profile is sometimes not the color profile that browsers use—sRGB. Browsers force images to use the sRGB color profile, and thusly change the way the colors look. That seems simple enough, right? But what the heck is a color profile, anyway?
The Long Answer: What is a Color Profile?
Color Profiles, sometimes called ICC profiles, are the information embedded in image files to translate them from picture data into the colors that appear on your monitor or come out of your printer. While colors may seem absolute to our eye, the math and science behind creating the values we see in digital imaging have created lots of different color models, including CMYK, RGB, HSL, Lab, and others. In addition to this, only limited color ranges are available for each medium. A monitor might be able to display 24 million colors, and a piece of paper run through a inkjet might only be able to display half of that. Color profiles are a layer of translation between the steps of the abstract RGB or CMYK values, and the actual, real representation on a monitor, television, or printed page.
Basically speaking, they describe what colors are possible for each medium, and these colors possible are the “color space.” As you can see above, the sRGB space most commonly used by browsers is the smallest, while Adobe RGB has a much wider gamut. Any file created with an Adobe RGB or CMYK color profile will be automatically downsized to the sRGB profile, and a very noticeable color shift happens. So what can be done to sidestep this problem?
The Solution: Changing Your Image’s Color Profile
Change it in Photoshop: You’ll find that Changing color profiles is pretty simple, as many of them come with the program. Navigate to Edit > Convert to Profile, which will keep the same colors, but translate them into the proper color profile. By contrast, “ Assign Profile” will simply keep the same values, allowing them to be run through the filter of a different color profile—exactly what your web browser does. So remember to use “Convert to Profile.”
It’s as simple as changing the destination space to sRGB and pressing OK, and your image is ready to be viewed in a browser.
Change it in GIMP: There are two ways to convert a color profile using GIMP. The long way is to open a file, then navigate to Image > Mode > Convert to Color Profile.
You’ll be given the opportunity to convert the color profile to sRGB or select a profile you’ve downloaded. You can download sRGB, as well as some other important color profiles here, if you need them. Once you pick sRGB here, you’re ready to “Convert” and upload your image.
GIMP’s second method: Of course, before you get that file open, GIMP will actually warn you that you’re working in an embedded color profile, and ask if you want to convert it to sRGB right off. If you do, go right ahead and tell it to “Convert,” and your image is Web ready in an instant.
You can rest easy. Your photo is now ready to be viewed in a browser, and will look identical to how it looks in your graphics editing program.
Have questions or comments concerning Graphics, Photos, Filetypes, or Photoshop? Send your questions to ericgoodnight@howtogeek.com, and they may be featured in a future How-To Geek Graphics article.
Image Credits: Photography copyright the author. sRGB gamut and Color space via Wikipedia.