# Resize & crop images

Included in your subscription, ACF supports on-the-fly image transformations directly in Liquid for you to:

* Resize images to specified dimensions or aspect ratio
* Rotate or flip images
* Crop images
* Show image previews (blurred image or color placeholders)
* Correct colors in images for a color-blind audience
* Remove backgrounds (**new**)
* Resize an image while allowing its main subject (detected using AI) to occupy as much space as possible (**new**)

ACF uses [TwicPics](https://www.twicpics.com) as the underlying transformation engine to deliver resized, cropped, and otherwise visually transformed images. TwicPics features a set of easy-to-use transformation options for **non-animated images**, not unlike the syntax used in Liquid for the Shopify [image\_url filter](https://shopify.dev/api/liquid/filters#image_url).

For a complete overview of the possibilities using TwicPics including syntax and examples, see [TwicPics Documentation](https://www.twicpics.com/docs/api/transformations).

{% hint style="success" %}
The output by TwicPics is related to the quality of the original images to resize or optimize. The better the quality of your images, the better TwicPics will be able to deliver high-quality resized images

We recommend as much as possible providing high-quality, uncompressed images as input, with a pixel width of at least 2 times the largest size displayed on the site (to enable the delivery of Retina quality to devices that are Retina quality)
{% endhint %}

Multiple transformation options can be combined in a sequence by separating them with / (forward slashes) such as `resize=200x200/output=preview`. 

When authoring transformation options, please note that ACF's default optimization when fetching images via cdn.accentuate.io is turned off, leaving you in control of what should be done format- and quality-wise.

{% hint style="warning" %}
Unsupported TwicPics options (or providing a wrong syntax) will cause ACF to fall back to serve the original image. If you want to see any errors returned from TwicPics, you can add a `&testmode=true`parameter to your URL
{% endhint %}

{% hint style="warning" %}
TwicPics has the following weight and size limitations for image optimizations of master images:

* Weight: <20,1 MB
* Dimensions <36 million pixels

If one of these is exceeded, TwicPics will return an error
{% endhint %}

### Liquid syntax

For images uploaded using the "legacy" Media (v1) type, you can use this Liquid syntax to pass transformation options to the image:

```html
<img src="{{ product.metafields.accentuate.header_image | append: 
  '&transform=resize=200x200' }}"/>
```

The same syntax applies to images uploaded using the latest - and recommended - Media v2 type:

```html
{% for header_image in product.metafields.accentuate.header_images %}

  <img src="{{ header_image.src | append: '&transform=resize=200x200' }}" alt="{{ header_image.alt }}"/>

{% endfor %}
```

### Responsive images

Inspired by the example at [Image Best Practices - TwicPics Documentation](https://www.twicpics.com/docs/topics/image-best-practices) we can rewrite this in Liquid using ACF media fields like this:

```html
<picture>
  <source 
    media="(max-width: 767px)"
    srcset="
    {{ product.metafields.accentuate.image | append: '&transform=cover=1:1/resize=300' }} 300w,
    {{ product.metafields.accentuate.image | append: '&transform=cover=1:1/resize=500' }} 500w,
    {{ product.metafields.accentuate.image | append: '&transform=cover=1:1/resize=700' }} 700w,
    {{ product.metafields.accentuate.image | append: '&transform=cover=1:1/resize=900' }} 900w
    "
  />

  <source
    media="(min-width: 992px)"
    srcset="
    {{ product.metafields.accentuate.image | append: '&transform=cover=16:4/resize=1000' }} 1000w,
    {{ product.metafields.accentuate.image | append: '&transform=cover=16:4/resize=1500' }} 1500w,
    {{ product.metafields.accentuate.image | append: '&transform=cover=16:4/resize=1900' }} 1900w
    "
  />

  <source
    media="(min-width: 768px)"
    srcset="
    {{ product.metafields.accentuate.image | append: '&transform=cover=16:9/resize=800' }} 800w,
    {{ product.metafields.accentuate.image | append: '&transform=cover=16:9/resize=1000' }} 1000w,
    {{ product.metafields.accentuate.image | append: '&transform=cover=16:9/resize=1200' }} 1200w
    "
  />

  <img src="{{ product.metafields.accentuate.image | append: '&transform=cover=16:9/resize=1024' }}" />

</picture>
```

### Migrating from Cloudinary

To support our customers' existing use of our previous offering using Cloudinary, ACF will automatically translate a curated set of Cloudinary options to the new TwicPics syntax. This all happens behind the scenes without any actions needed from you.

The below Cloudinary options will automatically translate to TwicPics options, resulting in the same transformed image.

```
w_{width}
h_{height}
ar_{aspect ratio}

c_crop
c_fit
c_fill
c_limit
c_scale

b_{background color}
f_{format}
q_{quality}
z_{zoom}

g_center
g_auto
e_blur
dpr_2.0
```

{% hint style="warning" %}
The use of unsupported Cloudinary options will cause ACF to fall back to serve the original image
{% endhint %}

{% hint style="info" %}
**Tech tip**: if you would like to know how we transformed your Cloudinary options to TwicPics, check the `x-twicpics-options` response header
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.accentuate.io/liquid-guides/resize-and-crop-images.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.