> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fourthwall.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Filters

> Generate optimized image URLs with predefined sizes

## img\_url

Generate optimized image URLs using predefined size shortcuts.

```liquid theme={null}
{{ product.featured_image | img_url: 'large' }}
```

### Available sizes

| Shortcode | Size (px) |
| --------- | --------- |
| `pico`    | 96        |
| `icon`    | 128       |
| `thumb`   | 160       |
| `small`   | 220       |
| `medium`  | 320       |
| `large`   | 480       |
| `grande`  | 600       |
| `display` | 720       |
| `jumbo`   | 1024      |
| `master`  | 1440      |
| `desktop` | 1920      |
| `ultra`   | 3000      |

### Usage examples

```liquid theme={null}
<!-- Thumbnail -->
{{ product.featured_image | img_url: 'thumb' }}

<!-- Product card -->
{{ product.featured_image | img_url: 'large' }}

<!-- Full-width hero -->
{{ product.featured_image | img_url: 'desktop' }}
```

### Responsive images

```liquid theme={null}
<img
  src="{{ product.featured_image | img_url: 'jumbo' }}"
  sizes="(max-width: 767px) 100vw, 50vw"
  alt="{{ product.title }}"
  loading="lazy"
>
```