Use Images with a White Background

By Daniel Scocco

dogwithbackground2.jpg

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.

dogwhitebackground2.gif

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).



Related Articles

Please install the YARPP plugin

Share

22 Responses to “Use Images with a White Background”

  • Jon

    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.

  • GettyCash

    It does look really nice with white background.

  • Daniel

    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.

  • Imar

    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…

  • Jay Tillery

    I like how imaes are displayed on http://www.gymtops.com very simple square images with a nice bordered touch.

  • engtech @ internet duct tape

    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

  • Sean

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

    I will check out your website.

  • Dean Rieck at The Freelance Pro

    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.

  • Thiru

    The white backgrounds create a professional look.

  • Lovedeep Wadhwa

    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.

  • Ravi Vora

    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.

  • doug m

    thanks for the tip. time to get some custom css for my images

  • engtech @ internet duct tape

    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.

  • Jeremy

    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

  • Birdfreak

    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)

  • Dave

    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.

  • Daniel

    Vijay, in fact I would also suggest that people should use a blog design with a white background ;).

  • Shankar Ganesh

    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.

  • Vijay

    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

Comments are closed.