Use Images with a White Background

22 Responses to “Use Images with a White Background”

1. Vijay on September 7, 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

2. Shankar Ganesh on September 7, 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.

3. Daniel on September 7, 2007 7:57 am

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

4. Dave on September 7, 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.

5. Birdfreak on September 7, 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)

6. Jeremy on September 7, 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

7. engtech @ internet duct tape on September 7, 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.

8. doug m on September 7, 2007 3:32 pm

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

9. Ravi Vora on September 7, 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.

10. Lovedeep Wadhwa on September 7, 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.

11. Thiru on September 8, 2007 3:34 am

    The white backgrounds create a professional look.

12. Dean Rieck at The Freelance Pro on September 8, 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.

13. Sean on September 8, 2007 10:34 am

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

    I will check out your website.

14. engtech @ internet duct tape on September 9, 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

15. Jay Tillery on September 9, 2007 2:14 pm

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

16. Imar on September 9, 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…

17. Daniel on September 10, 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.

18. GettyCash on September 10, 2007 1:12 pm

    It does look really nice with white background.

19. Jon on September 11, 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.