> For the complete documentation index, see [llms.txt](https://codalin.gitbook.io/nodalin-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codalin.gitbook.io/nodalin-docs/nodes-reference/sources/image.md).

# Image

<table data-header-hidden><thead><tr><th width="141.6597900390625"></th><th></th></tr></thead><tbody><tr><td><div><figure><img src="https://937151318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F44MuVIHBk5o5yfcGn64w%2Fuploads%2FMEQLy9Am8RfWyKu1eukY%2Fimage.png?alt=media&amp;token=0adfa22d-c3ba-4a28-b0b6-7690f8fc80dc" alt="" width="76"><figcaption></figcaption></figure></div></td><td>The Image node renders an image in your project. Images can come from your imported assets or directly from one of the available online image providers. Supports static images and animated GIFs. Use it as a standalone image or as an <a href="/nodalin-docs/how-to.../instancing.md">instancing</a> target for other Source nodes. </td></tr></tbody></table>

#### Assets

The Assets dropdown lists the images currently imported into Nodalin. Select an asset to use it as the Image node’s source.&#x20;

You can add your own images at any time using the Add Image button. You can also import images through the Assets pane as described in the [UI Overview](/nodalin-docs/quick-guide/ui-overview.md#the-assets-pane)

<div data-with-frame="true"><figure><img src="https://937151318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F44MuVIHBk5o5yfcGn64w%2Fuploads%2FtACl5YJ2VWJkOgjgEQbe%2Fimage_assets-ezgif.com-optimize.gif?alt=media&amp;token=5fcc2be8-e572-4b77-a303-77872b44d6ce" alt=""><figcaption></figcaption></figure></div>

#### Image providers

The Image node also lets you search for images from two online providers: **GIPHY** and **Pexels**. Use the provider selector to switch between them and search their libraries directly from the node.

GIPHY provides access to its extensive library of GIFs and animated content, while Pexels offers a large collection of free stock photography. &#x20;

<table><thead><tr><th width="155.40234375">Property name</th><th width="404.9375">Description</th><th>Compatible datatype</th></tr></thead><tbody><tr><td>x</td><td>Horizontal position</td><td>number</td></tr><tr><td>y</td><td>Vertical position</td><td>number</td></tr><tr><td>scale</td><td>Scale by % percentage</td><td>number</td></tr><tr><td>rot</td><td>Rotation</td><td>number</td></tr><tr><td>feather</td><td>Circular fade out for better blending when using animated gifs or non transparent images.</td><td>number</td></tr><tr><td>origin</td><td>Center point of the shape. Defaults to (0, 0). Changing it moves the shape’s pivot without affecting its x and y position.</td><td>point</td></tr><tr><td>zindex</td><td>Controls which element appears on top when elements overlap; higher values sit above lower ones.</td><td>number</td></tr><tr><td>src</td><td>image source URL</td><td>text</td></tr><tr><td>boomerang</td><td>Ping-pong GIF animation </td><td>boolean</td></tr><tr><td>assetIndex</td><td>Cycles though the available image assets</td><td>number</td></tr></tbody></table>

### Example Projects

[Masked Motion](https://app.nodalin.xyz/project/076d8687-8ba2-4f7e-ba76-b965bdb88045)\
This simple examples demonstrates that the Image node can be used as instancing target for other nodes. Image <i class="fa-arrow-right-long">:arrow-right-long:</i> Square, creates 4 instances of the images on each of the square's vertices.\
\
[**Gifs? Oh wow!**](https://app.nodalin.xyz/project/d541dbbf-29b8-460e-9495-3156cf64be36)\
In this example an animated gif is used with a technique called [Blend Lensing](/nodalin-docs/nodes-reference/effects/blend.md#what-is-lensing).&#x20;

***

{% hint style="info" %}
Cloud storage for your images and videos will be available in a future release.
{% endhint %}