Friday, May 24, 2013

Lacking Transparency

Observant readers will see I've revised the blog's header. Unfortunately it doesn't look as it should. I created a .png file with a transparent background so that the type would appear to float above Blogger's starfield image. However, when I upload the image into my Blogger template, it gets rendered with a black or white background, depending on whether I save the .png as an interlaced file or not.

I've done some searching for a solution, but the answers I've found on the web are several years old. Does anyone out there have a clue as to how I might fix this problem?

2 comments:

"Jeff Ground" said...

Complicated topic! E-mail might be better, but try this first:

1) Try a .GIF instead of a .PNG. I would not reccommend this because of several issues, but it may be your last resort.

2) Are you trying for 100% transparency? If not, the 8-bit alpha channel in a .PNG or .GIF as far as I am aware will not support partial transparencies, you need 16-bit alpha for that. I figure the partial transparency in the floaters in your blog are created through HTML postprocessing and are not semitransparent images. I could be wrong, I don't know enough about that stuff.

3) The black versus white is a legacy of interlace bit order that is different for PC versus Mac. In PC the first bit decides interlace, in Mac it's the last bit. Stupid freaking Mac, yet another reason I hate using that OS.

4) My steps for creating transparencies:

i) In Photoshop, select the area of your image that you want OPAQUE (your text).

ii) Use the Add Layer Mask button at the bottom of the Layers Window (a circle in a rectangle, like the flag of Japan). Anything that is pure black in the mask should be transparent when you save your image as a .PNG or .GIF.

I've noticed that your blog is already very image-heavy. I don't know about other readers, but if I access your blog using a low-end rig, The Earliad stalls and times out. I would suggest compressing your BG image as much as you can and reducing its colours as well to free up bandwidth. Use the horrible Save For Web option to get the best savings on your image. Any element you can cut out to make things run faster would help. Even trim the extra space around your letterhead: if it's transparent nobody will see it but the computer will still have to process it.

My JSVB blog is also image-heavy, but I've jettisoned nearly everything that could slow the processing down. The images that I do use I make sure that I have reduced the save quality to Medium tops, and where possible also reduced the colours. Sometimes you have to kill your darlings to make the project fly. Or kill your Kirks to make the Enterprise fly. Or Spocks. Like I said, a complicated topic.

Earl J. Woods said...

Thanks, Jeff - I'll give all of that a shot. Yes, I'm shooting for 100 percent transparency. On the other hand, you make a good point about the blog's loading times. A couple of readers have noted that the blog hangs up their machines, so I'll probably use a simpler template, which may make the transparency issue moot. I really like your blog's simplicity and clean lines; mine is pretty loaded down with sidebars and such. It may be time for a comprehensive re-think.