It’s totally fine (and often useful, and of course valid) to have an image as heading. You could even use audio or video as heading. HTML is content agnostic in that sense. However, in every case you should provide alternative text content (for user-agents that don’t support the media (e.g. search engines) and/or for users that can’t access them).
A typical example for an image as site heading would be a site logo that contains the site name (or the logo is that prominent that a name is not needed in addition). Example:
<h1><img src="nike-logo.png" alt="Nike Inc." /></h1>
It should be added in HTML (with
img) and not via CSS (with
background), because it’s content and not decoration.
Now, if you should use a heading or text depends on your actual case, of course. For example, if it’s a company logo, I’d use an image (→ others might want to download it and re-use it, e.g. in a presentation; image search engines might index it etc). If the heading is only some specially designed text, I’d try to provide text and style it with CSS.
Regarding your markup: As I don’t know your real content, this might not be relevant, but you are probably using the
br element in a wrong way here. You should only use
br for meaningful line breaks (e.g. in addresses or poems). If your line break is for design only, you should use CSS instead (and
class as hook element). Same with the
small element: only use it if it contains "side comments such as small print".