> From the [Strife developer docs](https://strife.app/docs/reference/fields/image). Every page is listed in [llms.txt](https://strife.app/docs/llms.txt).

# Image

The Image field lets you to crop, zoom, and insert images effortlessly. It stores the optimized image URL along with crop data in the database.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-26%20at%2013.26.37.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of an Image field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Width</td><td>Specifies the desired width of the displayed image.</td><td></td></tr><tr><td>Height</td><td>Specifies the desired height of the displayed image. Set to <code>0</code> for a width-only image that keeps the source aspect ratio — the height is derived from the original, and crop/zoom are disabled. In <a href="https://strife.app/docs/reference/cli/schemas.md"><code>defineType</code></a> the same thing is spelled <code>height: 'auto'</code>.</td><td></td></tr><tr><td>Format</td><td>Specifies the image format in which the image will be stored. Default is <code>webp</code></td><td></td></tr><tr><td>Padding color</td><td>Hex color used for the padded area of the image when the crop area is smaller than the source.</td><td></td></tr><tr><td>Padding alpha</td><td>Alpha value between 0 and 1 for the padded area's transparency.</td><td></td></tr><tr><td>Hide alt text</td><td>When enabled, the alt text field is hidden in the image editor.</td><td></td></tr></tbody></table>

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-image`
* **Type:** `image`
* Reference ID: `str-image`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-image",
    "type": "image",
    "propertyName": "...",
    ...
    "attributes": {
      "width": 300,
      "height": 200,          //0 = width-only, keeps the source aspect ratio
      "format": "...",        //webp,png,jpeg,etc
      "paddingColor": "...",  //Hex color format
      "paddingAlpha": 0.5,
      "hideAlt": false
    }
  },
  ...
}
```

> [!NOTE]
> In the JSON template, `height` is always a number — `0` is the width-only convention. The `'auto'` spelling exists only in [`defineType`](https://strife.app/docs/reference/cli/schemas.md), which compiles it to `0` for you.

### Live preview

The compatible Strife Web Component for an Image field is the `str-image` component.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).