The Secret to Making Images Blend with the Background

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

Easy Way to Create GIF Transparency in Photoshop

Here is a quick technique for using Adobe Photoshop to make the background of an image transparent. We'll be using the image at left. The image background or edge color does not necessarily have to be one solid color, but it should be close.

Also, to use this technique, the background color that you are removing cannot also exist within the portion of the image that is staying intact or those pixels will, by default, become transparent also. Other methods will have to be used to achieve transparency in those circumstances.

1. Open the image in Adobe Photoshop
2. Click Save For Web (and Devices)
3. Click the 2-Up tab so you just see the original and the file version you are optimizing with transparency.
4. Choose GIF and No Dither.

5. Click the Magnifier Tool and make your image fill the area available.
6. Click the Eye dropper and click on the color that you want replaced with transparency. Then click the “Maps selected colors to transparent” icon beneath the Color Table. The pixels of that color are now transparent. (Hover the cursor over the icons to identify the correct icon. In CS3 it is the left-most icon.)
7. Continue clicking a color with the Eyedropper Tool and clicking the “Maps selected colors to transparent” icon until finished.
8. Click Save, and give the GIF file a filename that is different than the original file.
9. Then close the original file without saving it.

Check out the more comprehensive "Images and Graphics" tutorials we have on our main website - especially How to Optimize Images with Adobe Photoshop. Cheers!

►  Take a look at some of our other interesting posts, such as Hot Tip to Quickly Enter Date and Time in Microsoft Excel

Optimizing a Web Image in Adobe Photoshop

Overview
Since images can be very large in terms of kilobytes or megabytes, they must be optimized, or compressed, for use in webpages. We'll use the terms optimize and compress interchangeably. There are big differences between JPG compression and GIF compression. The original image can be a JPG or GIF, and the optimized file can be in JPG or GIF format. For a good discussion on the difference between these two image types, see our tutorial All About JPG and GIF Image File Formats at KeynoteSupport.com.

JPG Optimization Overview
As the JPG format supports 16.8 million colors and GIF supports 256, most photographs and images with continuous color, such as gradients, are stored and optimized as JPG files. The only exceptions are when transparency is required, or one wishes to seamlessly blend an image's background color to the background color of a webpage or other medium. (See our blog post How to Make Images Blend with the Background.)

JPG file compression is "lossy" - meaning that some of the image purity is lost during compression. Also, some edges that were sharp may be slightly blurred. When optimizing a JPG file in Photoshop, you can select the quality by percentage. If you want to change a file that has already been optimized, start with the original file! Make a duplicate of the original, make the required changes, optimize the file, and save it. Do not begin with the compressed file or the quality will continue to degrade due to the "lossy" nature of JPG compression.

GIF Compression
Images that are flat, with limited colors and crisp detail, are ideal for GIF. Compression of GIF files is "lossless" because colors retain their true values. However, as the GIF format only supports 256 colors, only certain images should be compressed into the GIF format. If your original GIF file contains transparent areas, then you must optimize the file as a GIF as GIF supports transparency and JPG does not.

Compressing a File in Adobe Photoshop
To compress a file for the web in Adobe Photoshop, open the file, and click File / Save for Web. On the Save for Web window opens, choose the 4-Up tab. Photoshop will display the original image, and three optimized images using different compression criteria. This can help you create as small a file as possible by comparing viewing quality and size. When you are happy with your compressed file, click Save. Enter a file name that is different than the uncompressed file, and then close the original file without saving it.

If you would like more detailed information regarding optimizing JPG. GIF, and PNG in Adobe Photoshop, please see Optimizing Web Graphics Using Adobe PhotoShop software at KeynoteSupport.com.

►  Take a look at some of our other interesting posts, such as Easy Way to Create GIF Transparency in PhotoShop.