Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Web Graphics look fine on Macs terrible on Windows

Posted on 2004-04-27
Medium Priority
Last Modified: 2010-04-03
I have a web image I created in PS with its original resolution being 200dpi.  When I Save For Web as a JPG or GIF I get this color distortion ring around the outside of it.  At first I thought it was the drop shadow but removing it did nothing. The thing is only Windows machines show this.  Everything is fine on Macs (what I'm using).  Though GIF's do show less of this it still bothers me.  I think I had this problem once years ago (and never since) but don't remember what's happening.  Can anyone shine some light?  Here is where you can view the graphic.


Thanks  \m/
Question by:fatfe
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
  • +1

Author Comment

ID: 10935036
Well here is a screenshot of what it looks like..


My question is could it be the color depth being 16 instead of 32 that's doing this?  If so, how can I check in PS to make sure this doesn't happen?

Author Comment

ID: 10935157
Okay,  so I bumped the monitor bit depth up to 32 bits and it looks fine.  So now my question is how in PS do you check your graphics look good under 16 bits?

Author Comment

ID: 10935164
edit:  So now my question is how in PS do you check your graphics to ensure they look good under 16 bits?

(would be nice if you could edit your posts)
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 30

Accepted Solution

weed earned 252 total points
ID: 10935641
I don't bother. There's really nothing you can do to "fix" it for 16bit monitors other than use awful dithering, or fewer colors and then youre crippling it for people with 32 bits.

Expert Comment

ID: 10936726
Better,first decide the useofgraphics and choose the appropriate mode (32/16/8 bit).

If you design on a specific mode and applied on different modes, it is distorted because of the color range variation. Do not (probably NEVER) use jpg format if you guess it would be seen on different color depths because jpg is the highly compressed data matrix that is specific to the originated color depth. Solution: use gif format.

To have better view for 16 bits be aware of the dithering as 'weed' says.

Another efficient way to reduce distortion on web graphics is to design them on high resolutions and producing them later on required resolution and size.

anShu, 28 Apr

Author Comment

ID: 10943800
Thanks for the comments guys.  I created the image in 8bit-RGB.  It just doesn't sit well that the background color of the html page (#575A4A) which is sampled from the image looks fine yet the image border is quite obviously off.  I'll stay away definitely from the dither and use the gif format for this.

Is there a way in PS to toggle between different simulated bit depths to see what the effects will be?

Expert Comment

ID: 10945849
LVL 30

Expert Comment

ID: 10945904
Geez no. Web safe colors are a COMPLETE misnomer. They are NOT "safe". You can completely ignore the web safe color palettes because theyre all interpreted differently depending on which browser youre using. Even lynda of lynda.com doesnt prescribe using web safe colors and she's the premier web design guru of the western world.

Assisted Solution

huafi earned 248 total points
ID: 10948192
Hey, is that the Sackler Museum's main staircase? I used to sit there and draw -- the basic forms are so cool, and the light does amazing things in there over the course of the day.

Try this: save the foreground image as a JPG. Create it from the original PSD file, not by re-saving the GIF you already have.
Then, *in addition to* specifying the background color in HTML, create a tiling JPG background image. This image should be an even multiple of 8x8 (e.g., 32x32), created in RGB, filled with the same solid background as the background color of the original PSD, and saved at a high quality setting.

The issue you're seeing arises because, at 16-bit or lower color depths, the operating system doesn't have enough unique colors available to specifically represent every possible color that a given application wants to draw to the screen. When this happens, the OS displays what it thinks is a best match instead. Macs have always done a better job at this best-guessing, dithering intelligently to get close to the original color. This dithering is noticeable at 8-bit color (256 colors), but almost imperceptible at 16-bit color (thousands of colors). Windows has always been much worse at this, usually forcing the desired color to the mathematically nearest available color -- which often is visually quite different. To make things worse, the colors available at a given bit depth are different from OS to OS. To make things even worse, color representation models may differ from application to application, and certainly differ from monitor to monitor. Worst of all (for your purposes), color interpretation models differ depending on how the desired color is specified.

The technique I describe above usually works for me because, rather than trying to create your image in a way that looks the same on every user's screen (which is impossible), you try to create the foreground and background in a way such that any given user's computer will be likely to represent the colors in the same way. So if one user's computer screws up that exact shade by XYZ, it'll be screwing up both the foreground and background by XYZ, and they'll still match. Understand?

The key is to not only match the colors in the original Photoshop documents, but to specify the foreground and background colors in the same way. In your earlier case, the foreground color was being specified by pixel-level color values in the GIF image, while the background color was being specified by an HTML hex value. A given user's computer will interpret and represent those using different color models. At 24- or 32-bit color depth, there are enough colors available that the two representations will end up indistinguishably close; at lower color depths, as you saw, the computer may end up nudging the background color one direction and the foreground color in another. If you specify both the background and foreground colors with the same color *and* the same method (pixel-level color values in a JPG image), the computer should interpret and represent the same color using the same color model, and the two images should match seamlessly on anyone's computer -- even at very low color depths.

The reason I suggest JPG rather than GIF is that on Macs, the JPGs will dither more gracefully for users running low color depths on their monitors.

Hope this helps --


Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction When sharing photos, especially via e-mail, the large resolution images that most cameras take today make for extremely large file sizes. The time required to upload these files to forums, send in e-mails, post to blogs or even placi…
This article outlines the struggles that Macs encounter in Windows-dominated workplace environments – and what Mac users can do to improve their network connectivity and remain productive.
In this tutorial viewers will learn how to correct colors in Photoshop using the Curves adjustment Open a photo for editing in Photoshop: Begin by creating a new adjustment layer by going to Layer > New Adjustment Layer > Curves: Select "OK" on the …
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.
Suggested Courses

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question