--- title: 'Liquid objects: image' description: 'An image, such as a product or collection image.' api_name: liquid source_url: html: 'https://shopify.dev/docs/api/liquid/objects/image' md: 'https://shopify.dev/docs/api/liquid/objects/image.md' --- # image An image, such as a product or collection image. To learn about the image formats that Shopify supports, visit the [Shopify Help Center](https://help.shopify.com/manual/online-store/images/theme-images#image-formats). *** Tip Use the [`image_url`](https://shopify.dev/docs/api/liquid/filters/image_url) and [`image_tag`](https://shopify.dev/docs/api/liquid/filters/image_tag) filters to display images on the storefront. *** ## Properties * * alt [string](https://shopify.dev/docs/api/liquid/basics#string) * The alt text of the image. * aspect\_​ratio [number](https://shopify.dev/docs/api/liquid/basics#number) * The aspect ratio of the image as a decimal. * attached\_​to\_​variant? [boolean](https://shopify.dev/docs/api/liquid/basics#boolean) * Returns `true` if the image is associated with a variant. Returns `false` if not. The `attached_to_variant?` property is only available for images accessed through the following sources: * [`product.featured_image`](https://shopify.dev/docs/api/liquid/objects/product#product-featured_image) * [`product.images`](https://shopify.dev/docs/api/liquid/objects/product#product-images) If you reference this property on an image from another source, then `nil` is returned. * height [number](https://shopify.dev/docs/api/liquid/basics#number) * The height of the image in pixels. * id [number](https://shopify.dev/docs/api/liquid/basics#number) * The ID of the image. If you reference the `id` property for preview images of [`generic_file`](https://shopify.dev/docs/api/liquid/objects/generic_file) or [`media`](https://shopify.dev/docs/api/liquid/objects/media) objects, then `nil` is returned. * media\_​type [string](https://shopify.dev/docs/api/liquid/basics#string) * The media type of the image. Always returns `image`. The `media_type` property is only available for images accessed through the following sources: * [`product.media`](https://shopify.dev/docs/api/liquid/objects/product#product-media) * [`file_reference` type metafields](https://shopify.dev/apps/metafields/types#supported-types) If you reference this property on an image from another source, then `nil` is returned. ExampleFilter for media of a specific type You can use the `media_type` property with the [`where` filter](https://shopify.dev/docs/api/liquid/filters/where) to filter the [`product.media` array](https://shopify.dev/docs/api/liquid/objects/product#product-media) for all media of a desired type. ```liquid {% assign images = product.media | where: 'media_type', 'image' %} {% for image in images %} {{- image | image_url: width: 300 | image_tag }} {% endfor %} ``` ##### Code ``` {% assign images = product.media | where: 'media_type', 'image' %} {% for image in images %} {{- image | image_url: width: 300 | image_tag }} {% endfor %} ``` ##### Data ``` { "product": { "media": [ "products/oil-dripping-into-jar.jpg" ] } } ``` ## Output ```html Viper venom ``` * position [number](https://shopify.dev/docs/api/liquid/basics#number) * The position of the image in the [`product.images`](https://shopify.dev/docs/api/liquid/objects/product#product-images) or [`product.media`](https://shopify.dev/docs/api/liquid/objects/product#product-media) array. The `position` property is only available for images that are associated with a product. If you reference this property on an image from another source, then `nil` is returned. * presentation [image\_presentation](https://shopify.dev/docs/api/liquid/objects/image_presentation) * The presentation settings for the image. * preview\_​image [image](https://shopify.dev/docs/api/liquid/objects/image) * A preview image for the image. The `preview_image` property is only available for images accessed through the following sources: * [`product.featured_media`](https://shopify.dev/docs/api/liquid/objects/product#product-featured_media) * [`product.media`](https://shopify.dev/docs/api/liquid/objects/product#product-media) * [`file_reference` type metafields](https://shopify.dev/apps/metafields/types#supported-types) If you reference this property on an image from another source, then `nil` is returned. * product\_​id [number](https://shopify.dev/docs/api/liquid/basics#number) * The ID of the product that the image is associated with. The `product_id` property is only available for images associated with a product. If you reference this property on an image from another source, then `nil` is returned. * src [string](https://shopify.dev/docs/api/liquid/basics#string) * The relative URL of the image. * variants array of [variant](https://shopify.dev/docs/api/liquid/objects/variant) * The product variants that the image is associated with. The `variants` property is only available for images accessed through the following sources: * [`product.featured_image`](https://shopify.dev/docs/api/liquid/objects#product-featured_image) * [`product.images`](https://shopify.dev/docs/api/liquid/objects/product#product-images) If you reference this property on an image from another source, then `nil` is returned. * width [number](https://shopify.dev/docs/api/liquid/basics#number) * The width of the image in pixels. ```json { "alt": "Charcoal", "aspect_ratio": 1.50016818028927, "attached_to_variant?": false, "height": 2973, "id": 29355706875969, "position": 1, "product_id": 6790277595201, "src": {}, "variants": [], "width": 4460 } ``` ##### Example ``` { "alt": "Charcoal", "aspect_ratio": 1.50016818028927, "attached_to_variant?": false, "height": 2973, "id": 29355706875969, "position": 1, "product_id": 6790277595201, "src": {}, "variants": [], "width": 4460 } ``` ### Referencing the `image` object directly When an `image` object is referenced directly, the image's relative URL path is returned. ```liquid {{ product.featured_image }} ``` ##### Code ``` {{ product.featured_image }} ``` ##### Data ``` { "product": { "featured_image": "products/mushrooms-on-a-table.jpg" } } ``` ## Output ```html products/mushrooms-on-a-table.jpg ```