Quick Links

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

renfairgirl

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?

CIExy1931_srgb_gamut

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.

 

Colorspace

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

sshot-328

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.”

sshot-330

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.

sshot-333

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.

sshot-335

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.

sshot-331

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.

sshot-337
sshot-338

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.