--- title: "image_url - Liquid Filter Reference" source: https://support.storeconnect.com/articles/image-url-filter-reference type: article format: markdown site: StoreConnect Support — product and developer documentation for StoreConnect site_index: https://storeconnect.com/llms.txt docs_index: https://support.storeconnect.com/llms.txt note: Append .md to any page or article URL on this site to get its Markdown form. --- # image_url - Liquid Filter Reference ## Description The `image_url` filter returns a Cloudinary URL for an [Image](image-liquid-object-reference) object at the size, crop and quality you ask for. Use it when you need a URL rather than markup, such as a CSS background image or a `` source. To output a complete `` element with a responsive `srcset`, use [`image_tag`](image-tag-filter-reference) instead. | Property | Value | |----------|-------| | **Return Type** | string | | **Category** | images | | **Available in** | Storefront templates. Not available in POS templates. | ```liquid {{ product.image | image_url: width: 800, height: 600, crop: "fill" }} ``` The input must be an Image object. Any other input returns an empty string. ## Options | Option | Default | Description | |--------|---------|-------------| | `width` | Original width | Width in pixels. | | `height` | Original height | Height in pixels. | | `crop` | `fit` | Cloudinary crop mode. See the crop modes table below. An unrecognized value falls back to `fit`. | | `quality` | `auto` | `auto`, `best`, `good`, `eco` or `low` for automatic quality at that level, `none` to turn automatic quality off, or a number from `1` to `100`. | ### Sizing rules - **One dimension.** When you pass only `width` or only `height`, and the media record has a stored width and height, the other dimension is calculated from the aspect ratio. - **No dimensions.** The original width and height are used. - **Never enlarged.** A requested size larger than the original is reduced to the original size. With an exact crop such as `fill`, the whole box is scaled down together, so the crop keeps the shape you asked for. - **Maximum size.** No dimension exceeds 5120 pixels. - **No stored dimensions.** When the media record has no width or height, the filter passes on only the dimensions you give, and Cloudinary calculates the rest. With no dimensions at all, the original image is returned, still optimized for format and quality. Images that are not hosted on Cloudinary are returned at their original URL, and the options are ignored. GIF and SVG images are not transformed. ### Crop modes | Mode | Result | |------|--------| | `fit` | Fits inside the box and keeps the aspect ratio. | | `limit` | Like `fit`. | | `fill` | Fills the box exactly and crops the overflow from the center. | | `scale` | Stretches to the exact box, ignoring the aspect ratio. | | `pad` | Fits inside the box and pads the remaining space. | | `crop` | Cuts an exact box out of the original image without resizing it. | | `thumb` | Generates a thumbnail cropped to the box. | ## Examples A URL 400 pixels wide, with the height calculated from the aspect ratio: ```liquid {{ product.image | image_url: width: 400 }} ``` A full-width banner cropped to a 16:9 box, used as a CSS background: ```liquid

{{ article.title }}

``` A `` element that serves a square crop on small screens and a wide crop on larger ones: ```liquid {{ product.image.alt_text | default: product.name }} ``` --- ## Follow StoreConnect - [Email Newsletter](https://storeconnect.com/c/lp-newsletter) - [LinkedIn Newsletter](https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7444956928444862464) - [YouTube](https://www.youtube.com/channel/UCngKdP2x8l1wcbAKW3tvU8g) - [LinkedIn](https://www.linkedin.com/company/storeconnect) - [X / Twitter](https://x.com/storeconnecthq) ## Popular Links - [Partners](https://storeconnect.com/partners) - [Become a Partner](https://storeconnect.com/become-a-partner) - [News](https://storeconnect.com/articles/news) - [Events](https://storeconnect.com/articles/events) - [Feature Comparison](https://storeconnect.com/how-we-compare) - [Download a free trial](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMkeKUAT) - [Book a Demo](https://storeconnect.com/contact) ## Documentation - [Help documentation](https://support.storeconnect.com/help-documentation) - [AI agents](https://support.storeconnect.com/ai) - [Videos & tutorials](https://support.storeconnect.com/videos-tutorials) - [Developer reference](https://support.storeconnect.com/developer-reference) - [Release notes](https://support.storeconnect.com/release-notes) - [Troubleshooting](https://support.storeconnect.com/troubleshooting) - [Trust Center](https://trust.getstoreconnect.com/) - [Status Page](https://status.storeconnect.com/) ## Contact - info@getstoreconnect.com - US +1 415 745 3230 - AUS +61 2 8365 2308 100 S Ashley Dr, Suite 600-2461 Tampa FL 33602-600 USA Level 22, Sydney Place 180 George Street Sydney, NSW, 2000, AUS ## Machine-readable - [Site index for agents](https://storeconnect.com/llms.txt): curated map of the StoreConnect site in llms.txt format - [Documentation index for agents](https://support.storeconnect.com/llms.txt): full technical and product documentation map Every page and article on this site has a Markdown rendering: append `.md` to its URL. Continue in Markdown: [Help documentation](https://support.storeconnect.com/help-documentation.md) · [Developer reference](https://support.storeconnect.com/developer-reference.md) · [Videos & tutorials](https://support.storeconnect.com/videos-tutorials.md) · [Release notes](https://support.storeconnect.com/release-notes.md) --- StoreConnect Support — https://support.storeconnect.com/articles/image-url-filter-reference