caption: image
created: 20140416160234142
modified: 20231121114351165
tags: Widgets
title: ImageWidget
type: text/vnd.tiddlywiki

! Introduction

The image widget displays images that can be specified as a remote URL or the title of a local tiddler containing the image.

! Content and Attributes

Any content of the `<$image>` widget is ignored.

|!Attribute |!Description |
|source |The URL of the image, or the title of an image tiddler |
|width |The width of the image |
|height |The height of the image |
|tooltip |The tooltip to be displayed over the image |
|alt |The alternative text to be associated with the image |
|class |CSS classes to be assigned to the `<img>` element |
|loading|<<.from-version "5.2.3">>Optional. Set to `lazy` to enable lazy loading of images loaded from an external URI |
|usemap|<<.from-version "5.3.2">>Optional usemap attribute to be assigned to the `<img>` element for use with HTML image maps |

The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image.

! Responsive images and `<map>`

[[Image maps area|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area]] coordinates are numbers of CSS pixels, therefore they do not scale. If you want to use responsive images, you can use a `svg` and `foreignObject`: 

<svg viewBox="0 0 330 333" xmlns="http://www.w3.org/2000/svg" width="50%">
<foreignObject width="100%" height="100%">
[img[Tiddler Fishes.svg]]
</foreignObject>
<g transform="translate(-216 -290)" >
<a href="#:[[Orange fish]]">
<title>Orange fish</title>
<path opacity="0" d="m309.4 403.5c-2.3-1.6-4-3.3-5.3-5.2-.4-.9-.7-1.8-1-2.8-.9-3.4-1.4-7.5-.9-11.3.1-1 .3-1.9.5-2.8.8-2 1.8-3.9 2.9-5.7.3-.3.6-.6.9-.8.4-.4.9-.7 1.4-1l1.3-.6 5-.3c4.1-.3 8-.9 11.9-1.7 10.9-2.3 20.8-6.6 29.5-13.1 2.4-1.8 4.7-3.9 6.8-6.1-1.6 6.2-2.5 11.8-9 19.5 5.7 1.6 11.6 4 13.6-6 3.8 5.9 8.9 3.1 9.8-5.3 5.4 6.7 8.4 3 8.4-4.3 6.4 5.2 10.6.8 12.2-5.5-4.9-1.1-20 2.4-25.1-6.7.1 0 .2-.1.3-.1 3-1.3 6.6-2.1 10.2-2.4 1.5-.1 3-.1 4.5-.1l2.5-.2c1.5-.1-.3-.1 1.1-.2.6 0 1.3-.1 1.9-.1.8-.1 1.6-.2 2.4-.3.7.1 1.5.2 2.2.3 1.4.1 3.1.2 4.2-.5.4-.2.5-.6.6-1.1.1-.4.1-.7.2-1.1.6-4.3.1-8.7-1.4-12.3-.5-1.1-1.1-2.1-1.7-3.1-3.5-5.1-9.1-8.1-14.9-9.6-1.4-.4-2.9-.6-4.5-.8-2.1-.2-4.3-.3-6.4-.2-6.9.3-13.2 2.1-18.8 4.9.9-4.4 4.8-10.5 7.7-14.5-.7-.3-1.5-.4-2.3-.4-5.5-.2-11.8 5.4-13.8 10.9-4.2-4.5-13.8.9-12.9 5-7.8-2.9-11.5 2.7-9.6 9.3-4.6-.2-9.6 3-9 8.1 8.3-5.1 13.4.8 15.3 6.6-1.1 1.3-2.2 2.6-3.4 3.8-4.4 4.6-9.4 8.3-14.6 11.3-5.3 3-10.9 5.4-17.1 6.5-2.9.5-6.1.8-9.1.3-3.4-1-6.2-3-8.6-6.3-.5-.8-1.1-1.8-1.4-2.4l-1 .8c-1.7 1.9-3.2 3.8-4.4 6-.9 1.7-1.8 3.5-2.1 5.6-.4 2.9.4 5.5 2.1 7.4 2.4 2.6 5.8 3.9 9.1 4.7 1 .2 2 .5 3 .6l2 .3-.5 1.9c-.4 1.4-.6 2.8-.8 4.3-.6 5 .6 9.7 4.2 12.8 1 .9 2.2 1.6 3.4 2.2 1.6.7 3.3 1.2 5.1 1.5 2.1.3 4.6.4 6.8 0 1 .1 2.1.2 3.8.2 1.3 0 1.9.1 2.6.1z"/>
</a>
<a href="#:[[Cyan fish]]">
<title>Cyan fish</title>
<path opacity="0" d="m273.6 408.6c-3.2-.2-6.1 2.4-7.2 5.5-4.8-3.6-10.5-2.3-10.6 5-3.1-2-10.5 4.1-8.1 9-5.8 0-13.5 4.5-13.5 10 .8-.2 1.6-.4 2.4-.6 5.4-1.3 12.3-2.2 14.6 0-.6.5-1.2.9-1.9 1.4-2.3 1.9-4.6 3.8-6.9 5.9-5.1 4.8-9.3 10-12.3 15.9-.8 1.5-1.3 3.1-1.9 4.7-.7 2.2-1.4 4.5-1.9 6.9-.5 2.2-.8 4.5-1 6.9-.1 1.7-.2 3.5-.1 5.3.3 10.7 4.6 19.5 11.6 26.8 1.2 1.3 2.6 2.5 3.9 3.7.7.6 1.5 1.2 2.3 1.8 1 .8 2 1.6 3 2.4 2.9 2.4 5.6 4.9 8.3 7.6 5.6 5.5 10.4 11.5 15.3 17.4.8 1 1.6 2 2.4 3 .5.6 1.2.5 1.6.1 2.2-1.6 1.7-4.8 1.2-7.2-.1-.6-.3-1.3-.5-1.9-.7-2.1-1.5-4.2-2.2-6.3-.6-3.1-1.1-6-1.7-9.6-1.6-1.9-1.2-4 .1-6.3-.3 1.1-.1 2.3.4 3.2.2.3.5.8.8 1-.9-1-1.2-2.6-.7-4 .3-1.1 1.1-2.1 1.9-3 2.2-2.5 4.9-4.6 7.3-6.8 1.8-1.6 3.6-3.4 4.5-5.5.1-.1.1-.3.2-.4l.1-.1c-.1-.1-.2-.2-.3-.2-.1-.1-.2-.2-.3-.3 0 0 0 0 0 0 0 0 0-.1.1-.1 0 0-.1 0-.1.1-.3-.2-.5-.5-.8-.7l-.1 0c-.1 0-.4.3-.5.3-.7.4-1.4.8-2.1 1.2-3 1.8-6.1 3.5-9.3 4.9-2.6 1.1-5.3 2.3-8.2 2.9-1.6.4-3.3.7-5.1.8-2.5.1-4.6-.2-6.6-1.1-.5-.2-1.1-.5-1.6-.9-3.1-2.2-4.8-5.5-5.8-9.1l-.7-3.5 0-.1c.1-1.2.3-2.4.7-3.5.9-2.8 2.6-5.4 4.6-7.7 4-4.3 8.6-7.6 13.3-10.6l2.1-1.3c-1.7 2.6-3.9 5.3-7.7 8.2 4.5 2.4 9.2 5.6 12.7-2.5 2.2 5.8 7 4.4 9.4-2.7 3.3 6.7 6.6 4.2 8-2.1 4.5 5.7 8.9 2.7 11.4-2.4-2.8-1.3-10.1-1.6-15.3-4.6l5.4-1.1.2 0c.1 0 .3 0 .4 0 .5 0 .9-.1 1.4-.1 1-.1 2-.1 3-.2 3.2-.2 6.5-.3 9.7-.4 4.1-.2 8.2-.3 12.3-.7 3.1-.3 6.1-.7 9-1.2.3-.1.7-.2 1.1-.4 1.1-.4 2.2-1 3.2-1.6-.4.2-.8.3-1.2.4.6-.3 1.1-.6 1.5-1 .2 0 .3 0 .5-.1.2-.1.5-.3.7-.4.7-.4 1.4-.8 2-1.2 1-.7 2-1.7 1.9-3 0-.2-.1-.5-.2-.7-.4-1.1-1.6-1.8-2.6-2.4l-4.8-2.5-.1-.2c-1.1-1.3-2.1-2.6-3.4-3.9-3.8-3.9-8.1-7.2-12.4-10-5.5-3.6-11.3-6.4-17.6-8.3-3.1-.9-6.3-1.5-9.7-1.7-1.4-.1-2.8-.1-4.2.1-.3 0-.6.1-1 .1-.1-.1-.3-.2-.4-.3-4.6-3.2-9-9.7-1.7-15.4-.7-.4-1.5-.6-2.2-.6z"/>
</a>
<a href="#:[[Purple fish]]">
<title>Purple fish</title>
<path opacity="0" d="m426 385.2c-2.2 0-4.3 1.7-5.4 4.5-2.7-2.3-7.3-2.8-9.4.5 7.5.9 7.8 6.9 6.2 11.4-1.6.4-3.1.8-4.7 1.4-3.1 1.1-6.4 3-9.1 4.9-3.4 2.4-6.4 5.1-9.1 8-2.4 2.6-4.6 5.3-6.5 8.2-1.6 2.4-3 4.7-4.3 7.2l-1.2 2.9-2.2 2c-.8.7-1.5 1.5-2.1 2.3-.3.5-.8 1.1-.8 1.8 0 .2 0 .4 0 .6.3 1.2 1.4 1.8 2.4 2.1.7.2 1.4.4 2 .5.3 0 .5.1.7.1.3.1.6 0 .9-.1.7.2 1.3.3 2 .4l-2 0c1.3.3 2.8.7 4.2.5 2.7-.3 5.3-.7 8-1.2 3.6-.7 7.1-1.6 10.7-2.5 2.8-.7 5.6-1.5 8.4-2.1.9-.2 1.8-.4 2.6-.6.3-.1.7-.1 1-.2.6-.1 1.2-.1 1.9-.2.2 0 .3 0 .5 0-3.4 4.6-10.7 7-12.9 8.9 3.5 3.7 8 5.2 10.4-.8.9 1.7 2 3 3 3.7.1.1.2.1.3.2 1.8 1 3.4 0 4.2-4.1 3.8 5.4 8.3 5.4 8.7-.1 5.1 6.1 8.3 2.2 11.5-1-5.6-2.2-8.4-4.7-11-7.3.6 0 1.3 0 1.9 0 .5 0 1.1 0 1.6.1.1 0 .5 0 .6 0l2.6.4c.9.1 1.9.2 2.8.2 2.5.1 5 .2 7.5.2 3.1.1 6.2.2 9.4.5 2.9.2 5.7.5 8.5 1 7.9 1.4 16.3 4.1 21.2 10.5 4.7 6.2 5 13.6 4 20.3-.2 1.5-.5 3-.8 4.5-.2.7-.3 1.4-.5 2 0 .1-.1.2-.1.3.1.4.4.9.6 1.3 0 0 .2.1.2.1.3.2.6.3.9.4 1.8.6 3.8.6 5.6-.3 2.6-1.2 4.1-3.2 5.5-5.4 2.6-4 4.1-9.1 4.3-13.9 0-.6 0-1.1 0-1.7-.1-1.8-.4-4.1-1.8-5.7-.7-.8-1.4-1.1-2.4-1.4-.6-.6-1.3-1.2-2-1.8 1.8-.8 3.4-1.6 4.9-2.4.2-.1.4-.2.6-.2 1.9-.8 3.9-1.9 5.4-3.1 2-1.5 3.7-3.5 4.8-5.7.1-.2.2-.3.2-.5.1-.3.3-.6.4-1 0-.1.1-.2.1-.4.2-.6.4-1.3.6-2 .3-1.6.4-3.2.2-4.8-.2-1.4-.5-2.8-1.3-4.2-.4-.7-.9-1.3-1.6-1.6-1.5-.6-3.3-.3-4.9-.1-.9.1-1.9.3-2.8.5-1.3.3-2.7.6-4.1.9-5 1.1-10.2 2.3-15.2 2.1-2.3-.1-5-.3-7.1-1.5-1.7-1-3-2.4-4.5-3.7-1.3-1.1-2.6-2.2-3.9-3.2-6.1-4.9-12.7-9-19.8-12.5-3.6-1.8-7.6-3.2-11.6-4.2-.7-.2-1.5-.3-2.2-.5.1-3.4 8.3-6.3 13.4-7.8-2.5-4.2-10.5-4.2-14.9-1.5-.4-4.8-8.8-6.2-10.3-3.2-1.5-2.4-3.2-3.5-5-3.5z"/>
</a>
<a href="#:[[Green fish]]">
<title>Green fish</title>
<path opacity="0" d="m358.4 492.9c1-2.3 1.8-4.5 2.3-6.7.6-1.7.9-3.4.7-5.2-.1-.5-.1-1.3-.4-1.7-.5-.6-1.2-.7-1.9-1-.5-.2-.9-.3-1.4-.5-5-1.6-10.2-2.7-15.6-2.7-.8 0-1.5 0-2.3.1-2.6.2-5.5.8-8.1 1.7-4.6 1.7-8.4 4.6-11.4 8.2-3.7 4.3-6.3 9.6-8.2 14.9-.1-.2-.1-.3-.2-.5-1.7-4.5-1.7-12.1-1.5-17.4-6.6 1.5-10 11.8-8.4 18.7-6.4-1.6-11.8 8.8-8.6 12-8.7 1.9-8.8 9.1-3.2 13.9-4.2 2.5-6.8 8.3-3.4 12.5 4.3-8.8 11.6-7.3 16.7-3.6-0 .1-.1.3-.1.4-1 4.7-2 9.3-3.5 13.9-1.4 4.7-3.2 9.5-6.2 13.7-1.6 2.2-3.4 4.1-5.5 5.6-1.4 1-2.9 1.8-4.7 2.4-5.3 1.8-10.5 1.4-15.3.4-.9-.2-1.8-.4-2.7-.6-.9-.2-1.9-.4-2.8-.9-.2-.1-.3-.2-.5-.3-3.1-2.4-5.8-5.8-7.7-10.3-0-.3-.1-.6-.1-.9-0 .3 0 .5 0 .8-.2-.6-.5-1.2-.7-1.8-6 3.5-5.4 14.4 3.7 29.2-1.2 8.8.1 17.4 4 25.7-.1.3-.2.6-.3.9 2.2-6 5.3-12 9.4-17.2 4.5-5.7 10.1-10.1 16.3-13.6 10.3-5.8 22.4-9.4 32.9-15 7.1-3.8 13.4-8.3 18.6-14.4 2.1-2.4 4-5.1 5.7-8 1-1.8 1.9-3.5 2.6-5.4.4-1.1.7-2.3 1.1-3.5 1.2 3.2 2.1 7 2.4 12.1 5.6-2.9 12-5.3 6.3-14.6 7.3 1.8 9.3-4.1 3.8-11.3 9.1 1.3 8.8-3.8 3.5-9.5 8.8-.6 8.9-7.1 5.5-13.2-3.4 2-9.3 10-16.5 12.7-.3.1-.6.2-.8.3.3-1.5.5-3 .8-4.5.4-1.9.8-3.8 1.4-5.6.6-1.9 1.2-4 2.1-5.9.3-.4.6-.9.9-1.3.2-.5.4-1 .6-1.5zm-89.3 80.9c0 0 .1 0 .1 0 .7.2 1.3.3 2 .4-.7-.1-1.4-.3-2.1-.5zm-.2 22.4c-1.5 2.3-2.9 4.8-4.1 7.3-.6 1.3-1.1 2.6-1.6 4 1.3-3.7 2.8-7.4 5.8-11.3z"/>
</a>
<a href="#:[[Blue fish]]">
<title>Blue fish</title>
<path opacity="0" d="m411 458.4c-1.1 0-2.2.2-3.1.7 3.4 3.7 8.3 9.9 8.6 13.7-.2 0-.3-.1-.4-.2-2.6-1.5-5.3-2.9-8.1-4.1-2.3-1-4.6-2-7.1-2.7-2.8-.8-5.9-1.1-8.8-1.3-4.8-.4-9.6-.4-14.1.2-1.1.2-2.3.3-3.4.8-.2.1-.5.4-.5.7 0 .1 0 .1 0 .2-.4 2.7-.1 5.9.6 9.3-.3-.9-.6-1.7-.9-2.6.2.9.5 1.7.8 2.6.1.5.3 1 .5 1.5.6 2.7 1.5 5.6 2.5 8.5.5 1.3 1.3 3.1 2.3 5 1.7 3.4 3.6 6.7 6 9.8.6.8 1.2 1.6 1.9 2.4 0 0 0 0 0 0-.4.1-.8.2-1.2.3-2 .4-4.1.5-6.1.3-.2 0-.3 0-.4 0-2.5-.2-4.8-.6-6.8-.9 0 0 0 0 0 0-.1 0-.1 0-.1 0-.6-.1-1.1-.1-1.5-.2-.2 0-.3 0-.5 0-.5 0-.9 0-1.3 0 .1.7.2 1.4.4 2.1.1.6.3 1.2.6 1.8.1.3.2.6.4.9.1.2.3.4.4.7 0 0 0 0 .1 0 .1.3.3.5.5.7.3.4.7.7 1.2.9.5.3 1 .5 1.5.6.3 0 .6 0 .9 0 .3 0 .6-.1.9-.1.6-.1 1.3-.4 2-.7.4-.2.8-.4 1.2-.7-.1.9-.2 1.6-.2 2.3 0 .7 0 1.4.1 1.9.1.3.1.6.2.9.1.2.1.5.2.7 0 0 0 0 0 0 .1.2.2.4.4.6.1.1.2.3.3.4.2.1.3.3.5.3.2.1.4.2.6.2 0 0 0 0 0 0 .2 0 .4.1.6 0 .2 0 .4 0 .7-.1.2-.1.5-.2.7-.3 0 0 0 0 .1 0 .2-.2.5-.3.8-.5 0 0 0 0 0 0 .3-.2.6-.4.9-.7 0 0 0 0 0 0 .4-.3.7-.6 1-.9 0 .5 0 .9 0 1.4 0 .4.1.8.1 1.2.1.4.1.8.2 1.2.1.3.2.7.3 1 .1.3.2.6.3.9.2.2.3.5.5.7.1.3.3.5.5.6.1.2.3.4.5.5.2.2.4.3.6.4 0 0 0 0 0 0 .2.1.4.1.6.2.3 0 .5 0 .7 0 .2 0 .5 0 .7-.1.2-.1.5-.2.7-.3 0 0 .1 0 .1 0 .2-.1.4-.3.7-.4 0 0 0 0 0-.1.3-.1.5-.3.8-.6 0 0 0 0 0 0 0 0 0 0 0 0 .2-.2.5-.5.7-.8.1.6.1 1.1.2 1.6 0 0 0 0 0 0 0 0 0 0 0 0 .1.5.1.9.3 1.4.1.4.2.7.3 1.1.2.3.3.6.5.9.2.3.3.5.5.8.2.2.4.4.6.5.1.1.1.1.1.1.2.1.4.3.7.4.2.1.4.2.7.3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3.1.5.2.8.2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3.1.6.1.9.1 0 0 0 0 0 0 .6.1 1.2 0 1.8 0 .6-.1 1.3-.1 1.9-.2.7-.1 1.3-.2 2-.3-.5-.7-.8-1.3-1.2-2 0 0-.1-.1-.1-.1-.3-.6-.6-1.1-.8-1.6-.1-.2-.2-.5-.3-.7-.2-.3-.4-.7-.5-1.1-.1-.2-.2-.4-.2-.5-.2-.4-.3-.8-.5-1.2 0-.1-.1-.3-.1-.5-.2-.4-.3-.8-.4-1.2-.1-.1-.1-.2-.1-.3-.4-1.6-.7-3.2-.9-4.7 2.6 1 5.5 1.7 8.4 2.2 4.7.9 9.5 1.5 13.3 3.6 3.2 1.7 5.3 5 6.3 8.4.4 1.1.7 2.3.9 3.5.1.5.1.9.2 1.4l.1.3-1.1 1.7c-2.9 5.7-3.5 13.6-2.9 19.8.1 1.4.4 2.8.6 4.2.4 1.8.9 3.5 1.5 5.1.8 2.2 1.8 4.4 2.9 6.5 1.5 2.6 3.2 5.3 5.1 7.7 1.6 2 3.3 3.8 5.1 5.5 1.2 1.1 2.5 2.1 4 2.9 1 .5 2.4 1 3.5.6l.2 0c.1-.3.2-.6.2-1 .1-.3.2-.6.2-.9.1-.2.1-.3.2-.5 0 0-.3-.2-.4-.3-.2-.2-.4-.5-.6-.8-1.1-1.4-1.8-2.9-2.4-4.5-1.4-3.4-2.3-7-2.5-10.7-.1-2.5.2-5.9 2.1-7.5l.6-.4 2.2 2c2.9 2.3 6.3 4.2 10.4 4.3.5 0 1 0 1.5 0 .6-.1 1.1-.2 1.6-.3.2 0 .5-.1.7-.2 2.8-.6 5.7-1.9 8.4-4.1l1.4-3.1c.3-.5.6-1 .9-1.5-.2.3-.4.6-.6.9l.5-1.1c.2 0 .4 0 .6-.1-.2 0-.4.1-.6.1l0-.1c-.3.1-.6.1-.9.2-1.3 0-2.6.1-3.9-.1-11.9-1.3-19-11.9-22-22-.3-1.1-.6-2.2-.8-3.3l-.6-3 .3-1.2c.3-1.2.6-2.4.7-3.6.5-3.4.6-6.7.2-9.8-.7-6.6-3.1-12.8-6.7-18.5-.2-5.8 3.5-15.6 13.2-11.1 0-4.5-4.7-6.8-8.7-6.2 1.1-6-2.8-10.6-9.4-7.3.4-3.7-8.5-7.6-11.8-3.2-2.2-4.3-7.6-8.3-12.2-8.3z"/>
</a>
</g>
</svg>

! Image Status Classes

<<from-version "5.2.2">> The following CSS classes are automatically added to the `<img>` element to indicate the status of the image. Note that only one of these classes will be added at the same time.

|''tc-image-loading'' |When the image is being loaded |
|''tc-image-loaded'' |The image has been loaded successfully |
|''tc-image-error'' |The image could not be loaded |

! External Images and the ''_canonical_uri'' field

When used to display tiddler-based images, the image widget operates in two distinct modes:

* If the ''_canonical_uri'' field is present then it is used as the ''src'' attribute of the generated `<img>` element and the ''text'' field is ignored
* Without the ''_canonical_uri'' field, the image widget generates an `<img>` element that embeds the image data directly using a `data:` URI.

See ExternalImages for more details.