# Images (/syntax/images)



Before referencing images in your XML files, they must be registered as named external resources. Learn how to map images from files or compiled data arrays.

Overview [#overview]

In XML, images are considered external resources that need to be named
in order to be referenced in XML files. Below is how to map images with
names.

Registering Images [#registering-images]

In order to use images in the Editor add your PNG images in the `images` folder of your project, and list them in an `<images>` block in `globals.xml`. Note that only PNG files are supported at this moment.

As Data [#as-data]

The Editor converts PNG image files to a C array that can be compiled into the project:

```xml title="xml" lineNumbers=1
<images>
    <data name="logo" color_format="rgb565" src_path="images/logo.png"/>
    <data name="icon_sun" color_format="argb8888" src_path="images/sun.png"/>
</images>
```

All typical color formats are supported, like `i1-i8`,
`a1-a8`, `rgb565`, `rgb888`, `argb8888`, etc. and even `rgb565a8`.

As these kind of images are basically C code, you need to recompile the project in the editor to see them with the final color format. To show something on the screen before recompiling the Editor uses the PNG files as fallback which always has ARGB888 color format.

As File [#as-file]

If the images are used as files (e.g., PNG images loaded from a file
system), they can be simply added to `globals.xml`:

```xml title="xml" lineNumbers=1
<images>
  <file name="avatar" src_path="images/avatar1.png"/>
  <file name="logo" src_path="images/path/to/my_logo.png"/>
</images>
```

Using the Images [#using-the-images]

When the images are added to `globals.xml` they can be used in all places where a property has `image` type.

In an image widget:

```xml title="xml" lineNumbers=1
<lv_image src="avatar" align="center"/>
```

In a style property:

```xml title="xml" lineNumbers=1
<styles>
  <style name="style_bg" bg_image_src="wallpaper"/>
</styles>  
```

In custom properties:

```xml title="xml" lineNumbers=1
<component>
  <api>
    <prop name="icon_src" type="image" default="arrow_left"/>
  </api> 

  <view>
    <lv_image src="$icon_src"/>
  </view>
</component>
```