Blog Speed Trick: Replace your image header with text.

[Nathan]

As some of you might know, I have recently been working to improve the load time on my blog Inkweaver Review.

Well, I was thinking yesterday, and realized that I had a huge image header for the title of my blog. Here is a picture of the old header:



I originally designed this header using an online web2.0 header creator. As you can see it is basically just text with a horizon line through it dividing it into two parts.

This looks pretty good, but I wasn't happy with the load time. The image was 9k.

However, I realized that I could replace this huge image with the following HTML and CSS code:

  <div style='position: relative; padding-top: 20px; padding-left: 20px; font: 60px Arial; font-weight: bold;'>
     <div style='position: absolute; display: block;'>
         <span style='color: #fb9233'>Inkweaver</span><span style='color: #93c600;'>Review</span>
     </div>
     <div style='position: absolute; display: block; clip: rect(38px auto auto auto); '>
        <span style='color: #fca85c;'>Inkweaver</span><span style='color: #a9d233;'>Review</span>
     </div>
  </div>

Basically, I used two copies of the text Inkweaver Review in slightly different colors. Then I clipped one so that only half of it showed. Then I stacked the elements by making them absolutely positioned in a relatively positioned parent element.

The end result is visually almost identical, and it is only bytes in size rather than kb. Now my blog title also appears instantly rather than having to load and stretch down the screen on slow connections.

The only difference is a very slight roughness around the text on older browsers and OS's because of lack of anti-aliasing.

So there is another trick that you might be able to use to make a visually appealing, fast loading logo for your site or blog.

[atmmultimedia]

CSS is great for this. Plus PHP is also awesome, it saves so much time.

[flashgordon]

Well done, plus it is better for SEO. I like your theme too, really clean and attractive.

[Nathan]

Thanks, I've been going for really clean and light.

I hope that this CSS trick can be useful for some of you.