Advanced media optimization

Creates additional product media URLs available directly through Liquid, enabling just-in-time image and video optimization and advanced transformations like preview images, background removal, smart cropping, and color adjustments. All delivered with ultra-low network latency for optimal performance.

This metafield automatically maps selected properties from the original product media array - filtered for Shopify hosted images and videos only - and transforms the Shopify URLs to be proxied through our own optimization engine - powered by TwicPics - offering additional and more fine-grained transformation options compared to Shopify. The transformations are applied on-the-fly using URL parameters, so you can use them anywhere, not just in Liquid templates.

Once a URL with its applied transformations has been requested once, it will be cached for future use and served directly from our CDN with Cloudflare. Performance will be at par or better compared to using the original media URLs.

About transformations

Examples are taken from the TwicPics API reference, which is the complete reference of media transformations supported by the TwicPics API.

Fundamentally, a transformation is a single operation that can be applied to an image or a video. It can be used to resize, crop, rotate, flip, blur, sharpen, tint etc. resize=200x200 is a simple example of a transformation.

Multiple transformations can be chained together using the character /. There is no practical limit to the number of transformations you can chain. No matter how complex the manipulation, TwicPics will optimize it for speed and accuracy on the fly.

When adding a transformation to the chain, the parameters given are interpreted as if previous transformations had already been performed (ie. as if the source image was the result of the previous transformations).

For instance:

• resize=340/resize=50p will result in an image that is 170 pixel-wide
• resize=50p/focus=20x10 will put the focus point at coordinates 40x20 of the source image

Since TwicPics will optimize the manipulation, be aware that a transformation may shadow what came before it. For instance resize=50p/resize=340 will result in an image that is 340 pixel-wide: TwicPics will simply ignore the first resize.

Bear in mind that you have fine-grained control over the quality of the image. You can use the quality parameter to control the compression level of the image, which is useful for reducing the file size. The default value is 70 (out of a scale from 1 to 100, 100 being the best), which is a good balance between quality and file size. You can experiment with different values to find the optimal compression level for your use case.

Details

When you initially enable this metafield, the individual product metafields will be set in a background task. If you have a large catalog, this may take anywhere from a few minutes to a few hours. Once the metafields are set, they will be updated in real-time

[
    {
        "id": "gid://shopify/MediaImage/47953429430610",
        "mediaContentType": "IMAGE",
        "height": 800,
        "width": 1200,
        "url": "https://cdn.espresso.pics/s/files/1/0920/1090/5938/files/650_orange_web.jpg?v=1731311038",
        "alt": "Orange"
    },
    {
        "id": "gid://shopify/MediaImage/47953429463378",
        "mediaContentType": "IMAGE",
        "height": 800,
        "width": 1200,
        "url": "https://cdn.espresso.pics/s/files/1/0920/1090/5938/files/650_black_web.jpg?v=1731311038",
        "alt": "Black"
    },
    ...
]

Example implementation

{% assign media_entries = product.metafields.espresso.media.value %}

{% for media in media_entries %}
    <img src="{{ media.url | append: '&resize=400/quality=90' }}" alt="{{ media.alt }}" />
{% endfor %}

See also