4
\$\begingroup\$

I have been researching this night and day for months now. Photos viewed on my website look terrible compared to the same file viewed with other mediums. I have contacted many website support specialists (many of who can not even view a difference between the photos) with out any luck of fixing this problem. I am starting to think it takes a photographers eye to see the difference.

I am a artist / photographer and I use my website through WordPress to display my work. I typically resize my photos to max 600 w/h and save as high quality JPEG in Photoshop. When I view them on my website the contrast, sharpness, and vibrancy is lost. I have toggled between seeing the same photo off the web, in a blank web browser window, on social networking platforms such as Facebook, and using Windows Picture Viewer. There is a drastic difference when viewing the same photo on my WordPress website vs. having it just in a browser. Sadly, my website is where I would like them viewed in their native quality. The website takes my photos and makes them look like point and shoot snap shots, and its starting to make my blood boil because I can not get to the root of this problem.

I have tried saving the photo in every possible format (.png, .tiff, .gif, etc.) and uploading them. They're always the same when viewed on my website

My roommate is a web programmer and he can not understand it himself. His explanation is that the browsers are making the photos lighter. This does not agree with me because when I view the photos right off the server in a browser they're pretty close to perfect. But then they are viewed through my website they look terrible.

I realized that there is one difference between seeing them on my website and seeing them off my server, the WordPress gallery program.

  • Step 1. I upload the files to my server via FTP
  • Step 2. I then go into word press and import the photos using nextgen.
  • Step 3. I then insert the code on a post in my website allowing the images to be seen.

Its not the fact that they are online that is distorting them its that they go through this secondary uploading type process.

This is driving me mad. The only time I can view them perfectly off my website is when I use the change the options in the gallery and change the JavaScript Thumbnail effect to highslide. but then they are opening up to just a browser window and not being viewed on my website. At that point I'm not entirely sure where that script is showing the image from. My server or NextGEN.

If some of this does not make sense I apologize, I am not that literate in this dept and only know what I have been able to teach myself.

Here is a series JPEG of the screen shots from each viewing platform. The website (top photo) is of the poorest quality. Facebook (the middle) is close to the original (the bottom) photo. You can see a clear difference in the saturation and contrast.

samples

Improve this question
\$\endgroup\$
3
  • \$\begingroup\$ Try displaying an externally hosted image on your website to see if it displays properly. \$\endgroup\$
    – AttackingHobo
    May 7, 2011 at 18:54
  • 3
    \$\begingroup\$ Check this out: stackoverflow.com/questions/5773032/… \$\endgroup\$
    – Alix Axel
    May 7, 2011 at 23:26
  • \$\begingroup\$ I think Alix has the root cause. The GD2 library is the one used in Wordpress/NexGen and your display in the site context is using resized images. \$\endgroup\$
    – Joanne C
    May 7, 2011 at 23:42

4 Answers 4

Reset to default
6
\$\begingroup\$

This kind of thing is usually a color space issue. Make sure you save the images as sRGB, not Adobe RGB; the latter is intended for print, not web display.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ I just completed another test of srgb vs rgb. uploaded/ launched/ screen shot. davidmccarthymedia.com/russ/test.jpg \$\endgroup\$
    – David
    May 8, 2011 at 1:24
  • 1
    \$\begingroup\$ @David: One of those is Apple RGB...which as far as I know is a pretty small color space, smaller even than sRGB. Normally, one should work in Adobe (not Apple) RGB, and convert to sRGB as the final step before saving for display online. The reason for that is most web browsers just assume the profile in use is sRGB, even if the image is tagged otherwise. That can cause undesired color shift when using other ICC profiles. \$\endgroup\$
    – jrista
    May 8, 2011 at 1:37
4
\$\begingroup\$

As the other answer suggests, this may be related to color management, though you say that you are viewing the image in the same browser, but from your server vs the website, which to me suggests there is some modification being done by code in your website.

My recommendation is to check to see if any of the several stylesheets you have going on are impacting the images. Try removing them one at a time to see if there is any change in the image to isolate it down to one. For example "prettyPhoto.css" sounds like a candidate to me.

You are also forcing image sizes, make sure that the sizes you are forcing are the sizes you are uploading, or there will be some resizing going on by the browser or server, which can lead to impacts.

Good luck

Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ I appreaciate all this help and advice. I just completed another test between rgb and srgb and took screen shots from my website that show apple rgb having better results. davidmccarthymedia.com/russ/test.jpg I am no longer sure what is happening. =\ \$\endgroup\$
    – David
    May 8, 2011 at 1:20
  • \$\begingroup\$ @David — be aware that that image itself is sRGB, so it can't possibly show any real advantages of a different color space. It's simulated for effect. \$\endgroup\$
    – mattdm
    May 8, 2011 at 2:09
  • \$\begingroup\$ +1 for uploading at adequate resolution. Don't let the server resize your full size photo (it is ok for thumbnail). \$\endgroup\$
    – jihems
    Feb 8, 2019 at 8:25
2
\$\begingroup\$

This is a problem with the ICC profile used to RENDER the image when you save it out. Color Management workflow is still a rather niche thing these days, and few applications, including browsers, support a proper color managed workflow. Most web browsers make the assumption that all images should be displayed as if they are tagged with the sRGB ICC color profile.

Generally speaking, you want to keep your images in a wider gamut, such as Adobe RGB (not Apple RGB) while you perform your post processing, as this gamut better represents the displayable color range of higher quality or professional LCD screens these days (i.e. Apple CinemaDisplays, Eizo, LaCie 730 series, NEC photographic screens.) After post processing, and at the time you crop, scale, and render for final output media, its generally best to convert to the de-facto industry standard color space, sRGB. Most computer devices support sRGB, and most software will by default render images as if they were sRGB.

If an image that is tagged with another color space (such as Adobe RGB or ProPhoto RGB) is rendered by a non-color managed program, colors will usually appear less saturated than they should be...hence the washed-out appearance. Converting your images to sRGB as part of final rendering will ensure they look correct on the broadest range of devices and software possible.

Improve this answer
\$\endgroup\$
10
  • \$\begingroup\$ It's a tangent, but this is very worth reading on Adobe RGB vs. sRGB: cambridgeincolour.com/tutorials/sRGB-AdobeRGB1998.htm \$\endgroup\$
    – mattdm
    May 8, 2011 at 1:53
  • \$\begingroup\$ I've read the cambridge page, and they approach the issue from one particular angle. From another angle, its about performing your photographic processing in the gamut that best matches the medium your working in. Cheaper computer screens would benefit more from working in sRGB than Adobe RGB, but if you have a decent screen that supports 90% or more of Adobe RGB, then using that gamut will usually give you more accurate results. It all boils down to saturation extent...and you want to use the saturation your screen provides to accurately process color. \$\endgroup\$
    – jrista
    May 8, 2011 at 1:57
  • 1
    \$\begingroup\$ But if you're going to be producing sRGB results in the end anyway, you may be disappointed by the gamut compression, if distinct cyan/green colors were important to your image. If you're working on an image with multiple final destinations, it may be easiest to just use the workflow you describe, but if you're aiming for something in particular, and if your screen covers the final gamut anyway (which it will, for sRGB), I think it's best to work in that space too. (Unless you are doing radical color changes, in which case you may want something really big like ProPhoto RGB or BetaRGB.) \$\endgroup\$
    – mattdm
    May 8, 2011 at 2:06
  • 1
    \$\begingroup\$ And in any case I think that the suggestion to stick to sRGB when working with 8-bit color depth unless your image really calls for the extended colors is very sound. \$\endgroup\$
    – mattdm
    May 8, 2011 at 2:06
  • \$\begingroup\$ Realize, though, that once you have down-converted from a larger gamut, there really isn't anything that will allow you to expand back up to a larger gamut if you need to. Gamut conversion, at least in tools like Photoshop (there may be open source code out there that can do more) only really affect an apparent color change when you convert down to a smaller space, not up. You should also be aware of what you ARE losing by moving to sRGB, where as if you start in sRGB, you'll never know. \$\endgroup\$
    – jrista
    May 8, 2011 at 2:16
0
\$\begingroup\$

I just figured something else out with the help of my roommate who is a web programmer. When the website has a black background the image quality is sacraficed, when the website has a white background the image is at full quality, reguardless of a sRGB conversion.

http://davidmccarthymedia.com/russ/website%20white.jpg

http://davidmccarthymedia.com/russ/website%20black.jpg

Can anyone see this? I have tested it on several monitors and it only seems to be happening on my main editing monitor sadly.

Improve this answer
\$\endgroup\$
3
  • 2
    \$\begingroup\$ I can't tell the difference between these two images (although I haven't tested it by cropping and differencing the images in photoshop). Have you considered the possibility that you perceive the colours differently based on neighbouring colours? \$\endgroup\$
    – fmark
    May 9, 2011 at 17:48
  • \$\begingroup\$ I thought about that, but its been shown to 4 pairs or eyes and they all agreed. My monitor is actually adjusting the image contrast based upon the abundance of white or black around it, I even created two layers in Photoshop. A giant white and black border. Then I toggle through them its made very apparent that the images are changing, and offline. Its something my monitor is doing. My worry is that I am not sure what the public is seeing, the increased or reduced contrast. \$\endgroup\$
    – David
    May 13, 2011 at 14:24
  • \$\begingroup\$ That is a plausible hypothesis. Don't discount visual perception, however, it is usual for human perception to vary depending on neighbouring colour. \$\endgroup\$
    – fmark
    May 14, 2011 at 6:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.