I just learned about image replacement, the technique(s), or rather I am just learning since I saw a mixin for it in Bootstrap. I saw it come up a few times recently, so I decided to investigate. I found this article, but I confess I don't understand what all the fuss is about. Why not just put an IMG tag over the text you want to 'replace'?
As the page the OP links to, Nine Techniques for CSS Image Replacement says, there are several aspects you should take into account when implementing image replacement. Some methods are more straightforward than others, most only really work on graphical browsers, some have more abstract problems, like unnecessary markup.
What you have is a variant of the down-to-earth
<h1 class="technique-ten">
<img src="graphics/thetitle.png" alt="The Title" />
</h1>
that doesn't need any CSS, it's basic, it works in many situations (screen readers, text-only browsers etc), but it's not ideal for SEO purposes. So you add extra text
<h1 class="technique-ten">
The Title
<img src="graphics/thetitle.png" alt="The Title" />
</h1>
with this CSS
.technique-ten {width:350px; height:75px;}
.technique-ten img {display:block; margin-top:-1.2em}
to put the image on top of the text, but then you have extra markup (the text in the h1, and the img that says the same thing), and if images are disabled, you get double text.
And you can't use an image with transparent areas, as this jsfiddle shows. Making the text invisible is not an ideal option, because any method that makes text invisible also influences its SEO.
You can make the alt txt empty.
<h1 class="technique-ten">
The Title
<img src="graphics/thetitle.png" alt="" />
</h1>
but that only stops the "double text" problem, not the others. In addition, the img ceases to have any semantic meaning.
In other words, yes, your solutions has merit, but it's not necessarily better than the ones already mentioned on that page, as it has the same kinds of issues.