What is the best approach to HTML markup for a heavily stylised h1 tag

I have a very stylised piece of content which I want to use as the <h1> tag on a page. I have two choices, either use complex, non semantic markup or an image. Is there any SEO benefit to either of the following approaches:

<h1>
    <span class="left">
        This is my <em>long</em><br>
        <small>example</small>
    </span>
    <span class="right">
        <span class="one">heading</span> text
    </span>
</h1>

or simply:

<h1><img src="/img.jpg" alt="This is my long example heading text." /></h1>