It doesn't matter what the image "appears" like, browsers make all image canvases rectangular. When you display an image in a web page, you can only specify a height and width, you can't specify vector coordinates to draw an image unless you use SVG (another topic totally).
So do you want the text to flow within the borders of the "visual" image or outside the borders? Either way, you need to segment the image into horizontal rows equal to the height of the anticipated font size. Which means that you won't have one image but many images.
test this to see what i mean
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
/*<![CDATA[*/
body{font-size:16px;line-height:18px}
#test{width:500px;margin:0px auto;text-align:left;}
img{float:left;clear:left;border:1px solid #000;margin-right:5px;}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
//]]>
</script>
</head>
<body lang="en">
<div id="test">
<img src="" width="100" height="16" />
<img src="" width="125" height="16" />
<img src="" width="135" height="16" />
<img src="" width="130" height="16" />
<img src="" width="125" height="16" />
<img src="" width="115" height="16" />
<img src="" width="105" height="16" />
This is my text. Hopefully it will wrap around the images the correct way. And if it doesn't, I have done something seriously wrong.
</div>
</body>
</html>