# Media

Media filters enable you to render media associated with various store resources, such as [products](/docs/theme/references/liquid/objects/product) and [collections](/docs/theme/references/liquid/filters/collection).

## img\_url

`variable | img_url`

returns  [string](../basics/liquid-types#string)

Returns the CDN URL for an image.

**Code**

```liquid
{{ product.image | img_url }}
```

**Output**

```text
//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824.jpeg
```

`img_url` accepts an [image object](/docs/theme/references/liquid/objects/image), an image `src` string, or the `value` of a [`file_reference` metafield](/docs/theme/references/liquid/objects/metafield#accessing-object-type-metafields):

**Code**

```liquid
{{ product.image.src | img_url: '400x' }}

{{ product.metafields.custom.spec_file.value | img_url: '400x' }}
```

### size

`variable | img_url: string`

returns  [string](../basics/liquid-types#string)

The size parameter allows you to specify the dimensions of the image up to a maximum of 5760 x 5760 px. You can specify only the width, only the height, or both, and you can also use the following named sizes:

| Name | Dimensions |
| --- | --- |
| `pico` | `16x16 px` |
| `icon` | `32x32 px` |
| `thumb` | `50x50 px` |
| `small` | `100x100 px` |
| `compact` | `160x160 px` |
| `medium` | `240x240 px` |
| `large` | `480x480 px` |
| `grande` | `600x600 px` |
| `original` | `1024x1024 px` |

**Code**

```liquid
{{ product.image | img_url: 'x200' }}

{{ product.image | img_url: '200x' }}

{{ product.image | img_url: '200x200' }}

{{ product.image | img_url: 'medium' }}
```

**Output**

```text
//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824_x200.jpeg

//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824_200x.jpeg

//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824_200x200.jpeg

//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824_240x240.jpeg
```

### scale

`variable | img_url: string, scale: number`

returns  [string](../basics/liquid-types#string)

Specify the pixel density of the image. The valid densities are more than 1.

**Code**

```liquid
{{ product.image | img_url: '200x', scale: 2 }}
```

**Output**

```text
//img.staticdj.com/1af35e88f4be62831cdfbbbe86704824_400x.jpeg
```

## media\_parse

`string | media_parse`

returns  [media object](./media)

Returns a [media object](/docs/theme/references/liquid/filters/media) that parses URL query parameters with the `media_parse` filter.

**Code**

```liquid
{% assign media = product.image.src | media_parse %}

{{ media.media_type }}

{{ media.sources }}
```

**Data**

```json
{
  "product": {
    "image": {
      "src": "//cdn.shoplazza.com/2fc412cf6d4aa67eb560b615aea972a21686877786133.png?media_type=model3d&sources=https:\/\/model3d.shoplazza.com\/558f35716f6af953f9bb5d75f6d77e6a1686877787287.glb"
    }
  }
}
```

**Output**

```text
model3d

//model3d.shoplazza.com/558f35716f6af953f9bb5d75f6d77e6a1686877787287.glb
```

### preview image

With the given media, a preview image is generated by default. You can use it as a poster image.

**Code**

```liquid
{% assign media = product.image.src | media_parse %}

{{ media.preview_image }}
```

**Data**

```json
{
  "product": {
    "image": {
      "src": "\/\/cdn.shoplazza.com\/2fc412cf6d4aa67eb560b615aea972a21686877786133.png?media_type=model3d&sources=https:\/\/model3d.shoplazza.com\/558f35716f6af953f9bb5d75f6d77e6a1686877787287.glb"
    }
  }
}
```

**Output**

```text
//cdn.shoplazza.com/2fc412cf6d4aa67eb560b615aea972a21686877786133.png
```