Use Images with a White Background

We all know that images have many benefits for blogs. They improve the overall look and entice an otherwise reluctant visitor to explore your posts.

Integrating images smoothly into a blog post, however, is not such a simple task. One little trick that I learned along the way is to use images with a white background. They integrate perfectly with any blog layout, merging with the content.

For sure you can still use images that do not have a white background, but in order to blend them with the content you will need to add some CSS styling. FreelanceSwitch is a good example.

If you do not have time to create a unique CSS style for your images, though, stick with the images that come with a white background and you will be fine. In order to illustrate my point I added two dog pictures in this post. The difference on how smoothly they integrate with the rest of the content is pretty clear, isn’t it?

Most stock photography websites (e.g., iStockphoto) have a vast collection of images with white background. Alternatively you can also try to remove the background manually with Photoshop (check Tools and Techniques for Removing Backgrounds).

Don't want to miss a single tip? Subscribe to our RSS Feed!

Daniel Scocco on September 7, 2007 | Filed Under Blog Design

Bookmark

22 Responses to “Use Images with a White Background”

Vijay on September 7th, 2007 7:28 am

I actually make it a point to ensure that images integrate well with my blog. White or transparent backgrounds are best, however white backgrounds are readily available.
However this may be a problem for websites having a background color other than white
Shankar Ganesh on September 7th, 2007 7:46 am

Sweet tip. I too make sure that the images I use have a white background.

Images with transparent backgrounds are just great, but sometimes they look bad in IE.
Daniel on September 7th, 2007 7:57 am

Vijay, in fact I would also suggest that people should use a blog design with a white background ;).
Dave on September 7th, 2007 7:57 am

Thanks for the tip. Believe it or not, I had never even though about using white backgrounds, and I have been blogging (although not always successfully) for over 2 years now.
Birdfreak on September 7th, 2007 9:23 am

Good tips but I would have to say it also depends on the picture size and if the background has some meaning to it.

Size - Sometimes keeping the pictures the same size has a nice clean look without removing the backgrounds

Meaning - If your post was actually about your new puppy, the picture with a background would have more meaning (to me) instead of it floating in space.

If the picture is just for illustrative purposes I would agree 100% to have a white background (and white backgrounded blogs are always easier to read)
Jeremy on September 7th, 2007 10:00 am

White/black combo is easiest on the eyes, and with blogs being text-driven it makes sense to use the white background.

Good article on image style. And a good daily read. Cheers
engtech @ internet duct tape on September 7th, 2007 10:03 am

I’ve got a greasemonkey script that lets you cut-and-paste from Flickr into a blog post and will put CSS classes around the image.

I’ll make it public sometime this weekend.
doug m on September 7th, 2007 3:32 pm

thanks for the tip. time to get some custom css for my images
Ravi Vora on September 7th, 2007 8:41 pm

This is a great tip but needs to be used wisely.

In addition to blending in, it gives you the freedom to style your image how you want it if you can take the element out of the background cleanly.
Lovedeep Wadhwa on September 7th, 2007 11:38 pm

It is also a nice idea not to apply any shadow, border effects to blog images.

If you use a design with white background and you decide to switch to design with alternative background. You can use CSS styling to make your images look alright.

But if your images have shadow, border effects even CSS styling will not do the trick.

I recently encountered this problem. I had to change my new blog design from black background to white because i realized that many images on my blog have black border, shadow effect and they will look bad on background other than white.
Thiru on September 8th, 2007 3:34 am

The white backgrounds create a professional look.
Dean Rieck at The Freelance Pro on September 8th, 2007 8:44 am

I put images into many of my posts, but the type was crowding the image. I considered using Photoshop to put a border on each, but that would add time to each post. So I added a little CSS to the style sheet give each picture breathing room.

Here’s the code:

img.picture-left {
margin-right: 20px;
margin-bottom: 15px;
margin-top: 7px;
margin-left: 0px;
border: none;
}

img.picture-right {
margin-left: 20px;
margin-bottom: 15px;
margin-top: 7px;
margin-right: 0px;
border: none;
}

Then when I insert a picture, I add class=”picture-right” or class=”picture-left” depending on whether I’m wanting the picture on the right or left side.

I’m not a programmer, so I figure there’s a more elegant way to do this, but it works fine and it’s simple.
Sean on September 8th, 2007 10:34 am

Hey thank for the code Dean, I will try it out. Very good comment!

I will check out your website.
engtech @ internet duct tape on September 9th, 2007 9:21 am

Here’s that Greasemonkey script I was talking about that will let you get CSS classes + credits when cutting-and-pasting flickr photos.

http://userscripts.org/scripts/show/12118
Jay Tillery on September 9th, 2007 2:14 pm

I like how imaes are displayed on http://www.gymtops.com very simple square images with a nice bordered touch.
Imar on September 9th, 2007 11:14 pm

Maybe I’m missing something, but it seems like everyone is overlooking the fact that you have to buy images from stock photo libraries before you can use them legally.

Unless you have a big budget, you will probably be using your own pictures and unless you have a photographic studio, you probably won’t have many pictures with a white background…
Daniel on September 10th, 2007 2:35 am

Imar, depends on the type of blog that you have or are aiming to have.

If you plan to make money with it, $15 bucks monthly for 15 high quality images is definitely worth it.
GettyCash on September 10th, 2007 1:12 pm

It does look really nice with white background.
Jon on September 11th, 2007 5:47 am

For those people that don’t have the cash for photoshop, a similar way to get the white back ground is to lay a white board or white paper on the floor when you photograph your objects. It’s not perfect, but you can see examples on my link above.