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 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.

For a complete overview of the possibilities using TwicPics including syntax and examples, see TwicPics Documentation.

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)

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

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

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 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

The 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