When creating online catalogs, icons are pulled from commercial photography that may have included backgrounds or imagery that doesn't match the design for the website. Typically, a good clean and consistent background color makes iconification much easier.

Often the original graphic wasn't designed to be web friendly, let alone website design flexible. The background was chosen for other purposes, like a catalog or just to make the shot look good in the camera. Obviously, it would be best to shoot with a professional camera operator that understood the images were going online and one who would create images already prepared. However, when we have good photography that simply needs a few minor edits, it's relatively simple with Photoshop.

These images don't look horrible, but they don't have smooth space between the old backgrounds and the new white space created to make them fit the website design better.

You can see the rough jagged outline on these separate pics versus the smooth faded vesion (lower image).

The smoother background is more pleasing to the eye.

In Photoshop, we start with an undesired background.

Using the select tool, we can remove similarly colored space, which removes the blue background.

This leaves some choppy edges, which could be further selected and removed or outlined carefully. But, there's a better option.

Choosing the refine edges tool, we can refine the edges to create a fade, creating a soft shadowing effect instead of a harsh deletion of the unwanted colors.

The Radius and Contract/Expand settings should be set tightly to create a very small shadow or fade area.

Once you have created the softened space separator, you can delete and there will be a soft fade between the desired colors and the undesired colors. Once you convert this image to a web friendly file, you're graphic will blend well with the new background.