You created your image with a background that is identical to the background color of the webpage, PowerPoint slide, etc. because you want the image to blend seamlessly with the background that it will be placed upon.And then you look at the finished product and ... yuk! A faint border is visible around the image, and the two colors just don't match. That's impossible! You used the exact same hexadecimal code. What went wrong?
When you optimized your image for the web, you saved it as a JPG file. JPG compression is "lossy" - meaning that some of the purity of the color is lost and "noise" is introduced into the image. That is why some of the aqua pixels inside your logo image changed color. The "lossy" nature of JPG compression also blurs crisp edges.
If you want the background color of an image to blend seamlessly with the background color of a webpage, you must do two things. First, make sure you do create the background color of the image with the exact same 6-digit hexadecimal code that you have specified for your webpage background color. Secondly, you must optimize the original image using GIF compression. GIF compression is "lossless" - the color in the image retains the exact color you specified. Just make sure the Lossy value is set to its default of 0 (zero) on the "Save for Web" window in Adobe Photoshop,
This same solution applies if you want the background of an image to blend seamlessly with the background of other media, such as a Microsoft PowerPoint slide. For a more detailed discussion of the topic, see our tutorial Optimizing Web Graphics in Photoshop. If you need to learn the difference between JPG and GIF formats, check out All About JPG and GIF.
► Take a look at some of our other interesting posts, such as Easy Way to Create GIF Transparency in Photoshop
6 comments:
very kewl...didn't know. thx.
I had noticed that my JPGS were getting messier as I continued to edit them and edit them. I guess one thing is we need to watch how many times we change a JPG. Your post has helped me understand GIFS a little better now. That's a good thing. Thanks - Jonnie
This is an excellent post if you are starting to do a lot with graphics.
Nice.
I wanted to put an image on a greeting card and had this same problem and I think i know PS enough to work this out. Your directions seem pretty clear. Well done.
Always wondered what the difference was. Everything is so technical these days. Grrr. Good explanation tho.
Post a Comment