Posted by Andy Brehm on January 27, 2009 at 11:19 PM
I just bought my first Mac today and went to my website and noticed that all of my photos have dark rings around them. I know what this probably is but don't know how to fix it. I have an outer glow that goes around all of my images that should blend into the background, on on safari it looks like there is a dark ring instead of the outer glow.
I only mention that this is a Mac issue because when I was on my PC using Internet Explorer or Firefox i didnt notice this issue so it seems to be unique to Safari.
Just wondering if anyone here knows what the problem is and what I can do to fix it.
Thanks,
Andy
Posted by Jesse Speer on January 27, 2009 at 11:48 PM
Post a link for us. I'd like to see it. Macs usually have a different default gamma setting, so your colors/levels may look completely different than what you're used to seeing.
Do not embed color profiles with graphics or images with graphics. You see it with Safari because it is a color-managed browser, while the others are not. Here is some good information:
Posted by Jon LaBass on January 28, 2009 at 11:42 AM
Without fully seeing the issue and associated html, it could very well be a browser rendering issue if you are using CSS to display the glow. If you view the page in Firefox on your Mac does it render properly?
Posted by Andy Brehm on January 28, 2009 at 12:05 PM
Sorry for not posting a link. I forgot that there isnt a link associated with my profile. You can see my site at www.andybrehm.com
Looking over the code on your site, it appears that you must be using some Dreamweaver automation that is creating the images.... as the images themselves contain the drop shadow. It then appears that Safari is not blending them with the background as firefox is.... I assume (bad word) that this blending is being done via JS?
I would contact the Dreamweaver coder who's creation action your using, and see if they have an update to the action that fixes this.....
Hope this helps?
Posted by Jesse Speer on January 28, 2009 at 4:27 PM
I don't really see any rings in my Mac browsers, but I do see a simple problem with your setup. Including the page background in your photo files (esp. with drop shadows) is asking for trouble - with alignment, color, etc. It doesn't always work, especially with textures.
My advice is do away with the borders/drop shadows that are built into your images. There are other tricks you can use to achieve the same effect - requiring less work. (And more importantly, you won't have to redo every photo on your website if you ever redesign the website.)
The best way to do this nowadays ... use transparent PNG files. I once did this with GIF files, but then I learned about the beauty of PNG transparency - thanks to Jack. The process basically requires slicing up your drop shadow into many pieces (to accommodate varying photo sizes), and then arranging them around your photo using CSS. Like Jack does on his website ...
You could probably even hire Jack to build some code for you, if this sounds too complex.
Posted by Andy Brehm on January 28, 2009 at 7:52 PM
Yeah that sounds pretty complicated. As Im sure you can tell, I dont exactly know what I am doing. The only way I knew how to make drop shadows was to make it part of the image but I will have to look into this PNG files. I would love to hire Jack but unfortunately money is a bit tight now!
Thanks all for your help, I will do some experimenting and see what I can come up with.
Discussion
7 repliesI only mention that this is a Mac issue because when I was on my PC using Internet Explorer or Firefox i didnt notice this issue so it seems to be unique to Safari.
Just wondering if anyone here knows what the problem is and what I can do to fix it.
Thanks,
Andy
Do not embed color profiles with graphics or images with graphics. You see it with Safari because it is a color-managed browser, while the others are not. Here is some good information:
http://www.gballard.net/photoshop/mac_color.html
Thanks,
andy
Looking over the code on your site, it appears that you must be using some Dreamweaver automation that is creating the images.... as the images themselves contain the drop shadow. It then appears that Safari is not blending them with the background as firefox is.... I assume (bad word) that this blending is being done via JS?
When I view a single image here: http://www.andybrehm.com/Waterfalls/Waterfalls%201/20d_5004.jpg you can see what I am talking about....
I would contact the Dreamweaver coder who's creation action your using, and see if they have an update to the action that fixes this.....
Hope this helps?
My advice is do away with the borders/drop shadows that are built into your images. There are other tricks you can use to achieve the same effect - requiring less work. (And more importantly, you won't have to redo every photo on your website if you ever redesign the website.)
The best way to do this nowadays ... use transparent PNG files. I once did this with GIF files, but then I learned about the beauty of PNG transparency - thanks to Jack. The process basically requires slicing up your drop shadow into many pieces (to accommodate varying photo sizes), and then arranging them around your photo using CSS. Like Jack does on his website ...
http://www.widerange.org/photo.php?id=1011&gallery=sanjuans
You could probably even hire Jack to build some code for you, if this sounds too complex.
Thanks all for your help, I will do some experimenting and see what I can come up with.
Andy