Glamour Bomb: Posting Transparent Images in Blogger (A Follow Up to 1stFloorFlat's Recent Blog Post)

Lucky for me, the background on my blog is white so my readers and I often fail to notice the effects of transparent .GIF and .PNG files.

But in designing darker Blogger templates I've noticed that the issue comes up where supposedly "transparent" items have a white background. In a recent blog post from Susie Jefferson of 1stFloorFlat she offers some quick and dirty work around solutions and it's worth checking it out over there.

I just wanted to take a moment to explain what is going on.

As examples, below are two images of the exact same transparent .PNG file I uploaded to Blogger. Click on them to embiggen.

Indeed one of them showed a white background as if it was mounted on a piece of copier paper. It just looked horrible! But then with a little hacking, I managed get the file to display its glorious transparent background. (Note since this blog has a white background as I mentioned previously I used screenshots from a blog I'm designing with a darker background).

Now this file (courtesy of the Graphics Fairy) is rather large. I made a .PNG out of it that measures 1000px wide so therefore I selected Picasa's embed code of "400px" to ensure it would fit properly in the main column. For those of you that don't know, all images posted to Blogger are stored in Blogger's sister site Picasa Web Albums, a photo sharing site provided by Google.

Notice the white bits peaking through around the edges?

Well below is how I resolved it:

Notice this image has no bright white lines around the border. It's completely transparent! This is my workaround solution: take the original size and code the dimensions by hand like so:

Grab the URL for "Large 800px" (image only, no link).
Remove the the part in the URL that reads s800/. Be sure to include only one (1) slash not two.
Insert the URL into your blog by handcoding the dimensions so that it fits precisely in your column. Example: <img src="THE ENTIRE URL WITH S800/ REMOVED" width="DESIRED WIDTH IN PIXELS" />

Of course Susie's got a quicker solution: just upload transparent GIFs and PNGs to Photobucket where you won't have this problem. Again, her detailed solution is here.

2 comments:

Susie Jefferson, March 24, 2010 at 6:52 AM: HI GB

I replied to your comment and query under my post: http://1stfloorflatcomputery.blogspot.com/2010/03/transparent-backgrounds-for-images-text.html

I've also re-read your post here. When you reduced the size of the image from 1000px to 400px, did you also reduce the resolution? ie: from perhaps 300dpi to 96dpi? This would have a bearing...

I also think a lot of the problem is bandwidth - it could be that pngs and gifs are loading as transparent images from Photobucket because the file is actually hosted externally, and not by Google (either as Blogger or Picasa).
Glamour Bomb, March 24, 2010 at 7:20 AM: Hey Susie, thanks for your help. I think you're right: it may be a bandwidth issue. It's pretty annoying.

To answer your question, I reduced the DPI to 72 and this is what I got: Dove image.