# Set up the tracker
In this section we'll learn how to set up the tracker. Later on we'll see how to use the tracker to track an image in a video, with its position and orientation in 3D.
## Add a reference image
The first thing we need to do is add the image we want to track to our web page. We'll be calling that a **reference image**. We simply pick a suitable image and add an `` tag to the page.
Not all images are suitable for tracking. Images should be distinct, detailed and asymmetrical. I discuss this in detail in [Guidelines for Images](./guidelines-for-images.md). For now we'll just use the following image:
[{ width=512 }](../assets/my-reference-image.webp){ ._blank }
Reference Image
Download the image to the `ar-demo/` folder. Save it as [my-reference-image.webp](../assets/my-reference-image.webp){ ._blank }.
Next, let's add the reference image to our web page. Add an `` tag to the `` of the page as follows:
```html title="index.html" hl_lines="11"
encantAR.js WebAR demo
```
Reload the page. You should see the reference image:
[](../img/page-with-reference-image.webp){ ._blank }
Reference image in a web page
If you don't see the image, make sure that there are no errors in the filename.
Once you see that the image is being properly loaded, there is no need to keep it visible. Let's add the `hidden` attribute to the `` tag:
```html title="index.html" hl_lines="11"
encantAR.js WebAR demo
```
## Add a test video
We're going to be tracking that reference image in a test video. Please save the following video as [my-video.webm](../assets/my-video.webm){ ._blank } and [my-video.mp4](../assets/my-video.mp4){ ._blank } in `ar-demo/`. Later on I'll tell you how to use your webcam instead.
This is the expected directory structure at this point:
ar-demo/
├── index.html
├── encantar.js
├── my-reference-image.webp
├── my-video.mp4
└── my-video.webm
Let's include the test video in our page. Add a `
```
Reload the page. You should see the reference image: