• ARTICLES
SEARCH

How-To Geek

My Photos Look Different on the Internet! How Can I Fix Them?

sshot-325

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-337sshot-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.

Eric Z Goodnight is an Illustrator and Graphics Geek who hopes to make Photoshop more accessible to How-To Geek readers. When he’s not headbanging to heavy metal or geeking out over manga, he’s often off screen printing T-Shirts.

  • Published 08/10/11

Comments (7)

  1. Marios

    Using photoshop you could also “save for web & devices”.

  2. Lord

    When saving for web & devices in Photoshop, What option in PREVIEW: is similar to this setting?

  3. Josh B.

    Great find.

  4. TheGift73

    Also having your monitor correctly calibrated is also very important.

  5. jimkiler

    Thank you, i always go batty when my photos look different on the web. But usually it attribute it to a dark background on my photo editor and a white background on flickr or facebook.

  6. conga

    Having a picture with Adobe RGB color space is not something particularly common, not at least for ordinary people who don’t know exactly what it is. I think all cameras and softwares default to sRGB.

  7. dave

    is it possible to use GIMP to convert RGB to CMYK ready for professional printing?

Get Free Articles in Your Inbox!

Join 134,000 newsletter readers

Email:

Go check your email!