The easiest way to make a linked image editable in Taxi is to wrap the <editable> tag around the image tag.
<editable name="" label=""><a href="http://google.com"><img src="http://placehold.it/640x300" height="300" width="640" border="0" alt="alt text"></a></editable>
However sometimes you may need to break this tag apart, whilst maintaining content that has already been added in Taxi using the Design System. You can do this by adding fields for image source, width, height, alt text, link url and anything else you may wish to add.
In the implied default for a linked image, Taxi removes the <a> tag if there is no value for the href field. We do this using a rule attribute, that removes the <a> tag (but not it's contents) if the "href" field is empty:
rule="{%remove_outer_unless href%}"
<editable name="" label="">
<field type="src" name="src" label="Image Source"></field>
<field type="number" name="width" label="Width"></field>
<field type="number" name="height" label="Height"></field>
<field type="text" name="alt" label="Alt text"></field>
<field type="href" name="href" label="Link URL"></field>
<a replace-href="{{href}}" rule="{%remove_outer_unless href%}"><img replace-src="{{src}}" replace-width="{{width}}" replace-height="{{height}}" replace-alt="{{alt}}"></a>
</editable>