Getting images to look just right online involves many factors. First, understand that your images (and your website) will look different on different devices, different monitors, different internet providers and even different browsers.
We highly recommend that you look at your site on a different computer or mobile device, as well as accessing your site via a different internet provider (like going to your public library or a friend's) before spending oodles of time perfecting how it looks on your computer.
In regards to a computer monitor, you may want to consider calibrating your your monitor for color. Click here for a helpful article on How to Calibrate your Monitor.
You can find lots of info online by researching color profiles and color managed web browser .
The simplest solution for correcting an image appearance problem is to save your images as sRGB.
In Preview on a Mac.
- Open your image in Preview.
- Select the Tools (top menu bar)
- Select Assign Profile
- Select sRGB IEC61966-2.1 from the dropdown menu
- Select OK
- Select File (top menu bar)
- Select Export
- Make sure the Format is JPEG and the Quality is set to Best
- Save to your computer
In Photoshop:
- click on Edit
- click Convert to Profile
- choose sRGB as the Destination Space
- re-save and re-upload image(s)
~ or ~
- check the ICC Profile: sRGB checkbox when saving your image file
This may not be a perfect fix, as that would require a complete understanding and compliance with the Color Management process.
NOTE: sRGB profile is the image profile that is used for online images. This is done automatically by the internet. When someone has used an embedded profile in Photoshop, images must be saved as sRGB for web use. |
Color spaces
This article:
sRGB vs. Prophoto RGB vs. Adobe RGB: Which one is better?
explains the 3 most common color profiles and what they are used for.
The three most common color spaces are sRGB, Adobe RGB and ProPhoto RGB. Each has a different range of tones, brightness and colors it is capable of operating with and each is used for different applications.
1. sRGB (aka sRGB IEC61966-2.1): mostly beneficial for screen viewing
- Popular with all image driven mediums such as cameras, monitors, scanners and printers.
- sRGB has the smallest range of tones and colors of the three most popular color spaces.
- It is the most versatile and most widely used.
- It is supported by all cameras, screens and image viewing software.
- If you want to keep things simple and avoid color shift problems, this color profile is your best bet.
2. Adobe RGB (1998) – suitable implementation of full color management in Photoshop software. Typically carries more information for print. However, there are some complications associated with using this color space that you should be aware of.
Adobe RGB is not supported by all browsers. If you intend to place your images online it is most likely that people viewing your images will see them in slightly different colors if the file is in Adobe RGB color space.
Adobe RGB compresses colors and only special image viewing software can expand it back to reproduce all the colors in full gamut, all of the rest of the programs do not support this color space and will make the image look dull. So when you share your images, remember to convert them to sRGB.
3. ProPhoto RGB – was created by Kodak for advanced image reproduction on print. This color space is only recommended for photographers who have a very specific workflow and who print on specific high-end inkjet printers which can take advantage of such a high range of colors.
Additional resources regarding color space:
- focus.picfair.com
What is color space? Should I use sRGB or AdobeRGB? - photographylife.com
sRGB vs Adobe RGB vs ProPhoto RGB - diyphotography.net
sRGB, Adobe RGB, ProPhoto RGB – Which you should use, when and why
Also see these FAQs:
- Image color is inverted or shows a partial color overlay. How do I correct this?
- iPhone 11 HEIC Images Causing Image Uploading Issues
11152023 - 328912