{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/themes/sidebars.yaml"},"props":{"codeGuideFiles":[],"dynamicMarkdocComponents":[],"metadata":{"type":"markdown"},"seo":{"title":"Image Transformations","description":"Fluid is the open e-commerce platform built for direct-sales."},"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"image-transformations"},"children":["Image Transformations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Fluid serves theme images through ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://imagekit.io"},"children":["ImageKit"]},", which can resize, crop, and reformat images on the fly. The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image_url"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["img_url"]}," Liquid filters turn transformation options into an ImageKit URL, so a layout can request exactly the rendition it needs instead of loading the full-size original."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ section.settings.image | image_url: \"w-600,c-at_max,f-auto,q-80\" }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"https://cdn.example.com/products/shirt.jpg\n→ https://cdn.example.com/tr:w-600,c-at_max,f-auto,q-80/products/shirt.jpg\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"the-filters"},"children":["The filters"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image_url"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["img_url"]}," behave identically. Both take an image plus one or more transformation options:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Input"]}," — an image object (such as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["section.settings.image"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["product.image"]},"), a hash with a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["url"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src"]}," key, or a plain URL string."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Output"]}," — the image URL with an ImageKit transformation segment (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tr:…"]},") inserted, or the URL unchanged when there is nothing to apply."]}]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["img_url"]}," is the older, Shopify-style name; ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image_url"]}," is preferred for new themes. They are interchangeable on this engine."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"specifying-transformations"},"children":["Specifying transformations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass transformations as a raw ImageKit string, as named parameters, or both."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"raw-imagekit-transform-string"},"children":["Raw ImageKit transform string"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass any ImageKit transformation string. Tokens are comma-separated ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["code-value"]}," pairs; whitespace around the commas is ignored."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ image | image_url: \"w-600,c-at_max,f-auto,q-80\" }}\n{{ image | image_url: \"w-600, c-at_max, f-auto, q-80\" }}\n{{ image | image_url: \"n-product_card\" }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first two lines produce the same result (whitespace is ignored); the third applies a named transformation defined in the ImageKit dashboard. This is the most capable option — it supports the full ImageKit vocabulary (focus, blur, effects, overlays, named transformations, and more). See ImageKit's ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://imagekit.io/docs/image-transformation"},"children":["image transformation reference"]}," for every parameter."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"named-parameters"},"children":["Named parameters"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For common cases, pass named parameters instead of remembering ImageKit codes:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"ImageKit code"},"children":["ImageKit code"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Example"},"children":["Example"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Produces"},"children":["Produces"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["w"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width: 600"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["w-600"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["h"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height: 400"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["h-400"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["quality"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["q"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["quality: 80"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["q-80"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["format"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["f"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["format: 'auto'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["f-auto"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["crop"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fo"]}," (focus)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["crop: 'center'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fo-center"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ image | image_url: width: 600, height: 400, quality: 80, format: 'auto' }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["→ ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["…/tr:w-600,h-400,q-80,f-auto/…"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Notes:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["format"]}," mirror Shopify's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image_url"]}," filter. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["quality"]}," is ImageKit-specific (Shopify has no quality parameter on this filter) and is included as a convenience."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["crop"]}," accepts ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["top"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bottom"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["left"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["right"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["center"]}," and maps to ImageKit focus (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fo-"]},"). Focus only takes effect alongside a resize, so ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["crop"]}," is ignored unless a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]}," is also given."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Anything not covered by a named parameter (custom crop modes, blur, effects, and so on) is available through the raw transform string."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"combining-both"},"children":["Combining both"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A raw string and named parameters can be used in the same call:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ image | image_url: \"f-auto,q-80\", width: 600 }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["→ ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["…/tr:f-auto,q-80,w-600/…"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"behavior"},"children":["Behavior"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Only ImageKit images are transformed."]}," If the resolved URL points to a custom or third-party host (not Fluid's ImageKit), it is returned unchanged and the transformation options are ignored."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["An existing transformation is replaced."]}," If the URL already contains a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tr:"]}," segment, it is swapped for the new one."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["No options means no change."]}," Calling the filter with no transformation options returns the resolved URL as-is."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"migrating-from-shopify-size-strings"},"children":["Migrating from Shopify size strings"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Shopify's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["img_url"]}," accepts size strings such as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'300x200'"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'medium'"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'master'"]},". ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["These are not supported here"]}," — they pass through unchanged, so the image is returned at its original size. Use ImageKit syntax instead:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Shopify (not supported)"},"children":["Shopify (not supported)"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Use instead"},"children":["Use instead"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["img_url: '300x200'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image_url: \"w-300,h-200\""]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image_url: width: 300, height: 200"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["img_url: '300x300', crop: 'center'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image_url: width: 300, height: 300, crop: 'center'"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["img_url: 'master'"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["image_url"]}," with no options (returns the original)"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples"},"children":["Examples"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Responsive product card with a 2× rendition:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"<img\n  src=\"{{ product.image | image_url: 'w-600,c-at_max,f-auto,q-80' }}\"\n  srcset=\"{{ product.image | image_url: 'w-600,c-at_max,f-auto,q-80' }} 1x,\n          {{ product.image | image_url: 'w-1200,c-at_max,f-auto,q-80' }} 2x\"\n  alt=\"{{ product.title | escape }}\"\n  loading=\"lazy\"\n>\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Section setting with an editor-controlled width:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"\n<img src=\"{{ section.settings.image | image_url: transform }}\" alt=\"\" loading=\"lazy\">\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Named transformation preset (defined in the ImageKit dashboard):"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"liquid","header":{"controls":{"copy":{}}},"source":"{{ product.image | image_url: 'n-product_card' }}\n","lang":"liquid"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"common-imagekit-transforms"},"children":["Common ImageKit transforms"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A quick reference for the raw string — see ImageKit's ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://imagekit.io/docs/image-transformation"},"children":["documentation"]}," for the full list:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Code"},"children":["Code"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Meaning"},"children":["Meaning"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Example"},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["w-"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["width (px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["w-600"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["h-"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["height (px)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["h-400"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["q-"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["quality (1–100)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["q-80"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["f-"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["format"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["f-auto"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["f-webp"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["c-"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["crop mode"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["c-at_max"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["c-maintain_ratio"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fo-"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["focus"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fo-center"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fo-top"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dpr-"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["device pixel ratio"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dpr-2"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bl-"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["blur"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bl-10"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ar-"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["aspect ratio"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ar-4-3"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["n-"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["named transformation"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["n-product_card"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"see-also"},"children":["See also"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/themes/developer-guide"},"children":["Build Fluid Themes"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/themes/theme-variables"},"children":["Template Variables"]}]}]}]},"headings":[{"value":"Image Transformations","id":"image-transformations","depth":1},{"value":"The filters","id":"the-filters","depth":2},{"value":"Specifying transformations","id":"specifying-transformations","depth":2},{"value":"Raw ImageKit transform string","id":"raw-imagekit-transform-string","depth":3},{"value":"Named parameters","id":"named-parameters","depth":3},{"value":"Combining both","id":"combining-both","depth":3},{"value":"Behavior","id":"behavior","depth":2},{"value":"Migrating from Shopify size strings","id":"migrating-from-shopify-size-strings","depth":2},{"value":"Examples","id":"examples","depth":2},{"value":"Common ImageKit transforms","id":"common-imagekit-transforms","depth":2},{"value":"See also","id":"see-also","depth":2}],"frontmatter":{"seo":{"title":"Image Transformations"}},"lastModified":"2026-06-25T18:43:24.000Z"},"slug":"/docs/themes/image-transformations","userData":{"isAuthenticated":false,"teams":["anonymous"]}}