Image elements, on the web, are square. Which is fine in many situations, and suits the image content. But often that content is irregular or at least non-rectilinear in shape. Take, for example, a red ball against a transparent background. To our eyes, the content, the important visual information is actually circular. If we try to wrap text around it, the browser is unaware, and can only conform to the image element boundary.
There’s always more than one way to do it, but take a look at this method for wrapping text around non-square image content for web pages. It’s the same image file of a circle, but now the text appears to follow the contours of the visually important object, not the <img> element:
