How to: Keep it Clear - using clear background images

This tutorial will help solve the issue where clear png images show a white background. First an explanation...

Clear Images

The only two types of clear images are gifs and pngs. Although jpgs have a nice resolution they are unable to sustain a clear background. This is important to notice when you're saving images to your computer. Always be sure to save a clear backed png image as just that - a png.

Loading Images:

In the first example I've posted a clear png image as it's meant to be...

However in the example below the same image now has a white background behind it. Why? You may ask...Well, the answer is simple - in this case when I loaded the second image I resized it. Making a clear png image smaller will automatically fill in the clear background. So to keep images with a clear back you'll either need to load the image in it's original size or resize the image in a graphics program before loading it.

There are two main areas image sizing is important in blogging, the first is when you're adding an image to the sidebar of your blog and the second is when you're including an image in a blog post.

We'll address both of these below....

Adding an Image to Your Sidebar

Most of my sidebar image tutorials already cover how to add images using various methods so for this example we'll just pay close attention to the sizing factor when adding images.

When you're using the "Add a Gadget" feature found under the "Design" tab to add an image to the sidebar of your blog...

Be sure to uncheck the "shrink to fit" box...

This will keep the image you're loading in it's original size so if it's a clear backed png your image will remain clear.

Adding an image to a Blog Post

The same rule applies when you're including an image in your blog post and so it's important to pay special attention to the "Add Image" feature and load your images large if they're clear backed...

Size does matter - keep it large

I hope this info has been helpful and I hope to see more and more clear backged images around blogland. Remember, if you need specific help just leave a comment and if you need any help beyond the basics highlighted above, be sure to visit my Tutorials section for step-by-step instructions.

You can also find a complete set of my tutorials in pdf format listed for sale in my shop.
Enjoy!