Resize & crop images

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
ACF uses TwicPics 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.
The use of TwicPics for ACF image transformations is included in your subscription
For a complete overview of the possibilities using TwicPics including syntax and examples, see TwicPics Documentation.
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.
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=trueparameter to your url.
Liquid syntax
For images uploaded using the "legacy" Media (v1) type, you can use this Liquid syntax to pass transformation options to the image:
<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:
{% 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 we can rewrite this in Liquid using ACF media fields like this:
<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 scene 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
Use of unsupported Cloudinary options will cause ACF to fall back to serve the original image.
Tech tip: if you would like to know how we transformed your Cloudinary options to TwicPics, check the x-twicpics-options response header
Last modified 4mo ago