---
title: Image
description: |-
  The `Image` component renders an image for the Storefront API's
  [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.

  Images default to being responsive automatically (`width: 100%, height: auto`), and expect an `aspectRatio` prop, which ensures your image doesn't create any layout shift. For fixed-size images, you can set `width` to an exact value, and a `srcSet` with 1x, 2x, and 3x DPI variants will automatically be generated for you.
api_version: 2023-07
api_name: hydrogen
source_url:
  html: https://shopify.dev/docs/api/hydrogen/2023-07/components/image
  md: https://shopify.dev/docs/api/hydrogen/2023-07/components/image.md
---

# Imagecomponent

The `Image` component renders an image for the Storefront API's [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.

Images default to being responsive automatically (`width: 100%, height: auto`), and expect an `aspectRatio` prop, which ensures your image doesn't create any layout shift. For fixed-size images, you can set `width` to an exact value, and a `srcSet` with 1x, 2x, and 3x DPI variants will automatically be generated for you.

## Props

* aspectRatio

  string

  The aspect ratio of the image, in the format of `width/height`.

* crop

  Crop

  Default: \`center\`

  The crop position of the image.

* data

  PartialDeep\<ImageType, {recurseIntoArrays: true}>

  Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2023-07/objects/Image) object. Must be an Image object.

* loader

  Loader

  A function that returns a URL string for an image.

* srcSetOptions

  SrcSetOptions

  An optional prop you can use to change the default srcSet generation behaviour

* loaderOptions

  ShopifyLoaderOptions

  deprecated

  Deprecated

  Use `crop`, `width`, `height`, and `src` props, and/or `data` prop

* widths

  (string | number)\[]

  deprecated

  Deprecated

  Autocalculated, use only `width` prop, or srcSetOptions

### Crop

```ts
'center' | 'top' | 'bottom' | 'left' | 'right'
```

### Loader

* params

  ```ts
  LoaderParams
  ```

string

```ts
string
```

```ts
export type Loader = (params: LoaderParams) => string;
```

### LoaderParams

* src

  The base URL of the image

  ```ts
  string
  ```

* width

  The URL param that controls width

  ```ts
  number
  ```

* height

  The URL param that controls height

  ```ts
  number
  ```

* crop

  The URL param that controls the cropping region

  ```ts
  Crop
  ```

```ts
{
  /** The base URL of the image */
  src?: ImageType['url'];
  /** The URL param that controls width */
  width?: number;
  /** The URL param that controls height */
  height?: number;
  /** The URL param that controls the cropping region */
  crop?: Crop;
}
```

### SrcSetOptions

* intervals

  The number of sizes to generate

  ```ts
  number
  ```

* startingWidth

  The smallest image size

  ```ts
  number
  ```

* incrementSize

  The increment by which to increase for each size, in pixels

  ```ts
  number
  ```

* placeholderWidth

  The size used for placeholder fallback images

  ```ts
  number
  ```

```ts
{
  /** The number of sizes to generate */
  intervals: number;
  /** The smallest image size */
  startingWidth: number;
  /** The increment by which to increase for each size, in pixels */
  incrementSize: number;
  /** The size used for placeholder fallback images */
  placeholderWidth: number;
}
```

### ShopifyLoaderOptions

Legacy type for backwards compatibility \*

* src

  The base URL of the image

  ```ts
  string
  ```

* width

  The URL param that controls width

  ```ts
  string | number
  ```

* height

  The URL param that controls height

  ```ts
  string | number
  ```

* crop

  The URL param that controls the cropping region

  ```ts
  Crop
  ```

```ts
{
  /** The base URL of the image */
  src?: ImageType['url'];
  /** The URL param that controls width */
  width?: HtmlImageProps['width'] | ImageType['width'];
  /** The URL param that controls height */
  height?: HtmlImageProps['height'] | ImageType['height'];
  /** The URL param that controls the cropping region */
  crop?: Crop;
}
```

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {Image} from '@shopify/hydrogen';

  // An example query
  const IMAGE_QUERY = `#graphql
    query {
      product {
        featuredImage {
          altText
          url
          height
          width
        }
      }
    }
  `;

  export default function ProductImage({product}) {
    if (!product.featuredImage) {
      return null;
    }

    return (
      <Image
        data={product.featuredImage}
        sizes="(min-width: 45em) 50vw, 100vw"
        aspectRatio="4/5"
      />
    );
  }
  ```

  ##### TypeScript

  ```tsx
  import React from 'react';
  import {Image} from '@shopify/hydrogen';
  import type {Product} from '@shopify/hydrogen/storefront-api-types';

  // An example query
  const IMAGE_QUERY = `#graphql
    query {
      product {
        featuredImage {
          altText
          url
          height
          width
        }
      }
    }
  `;

  export default function ProductImage({product}: {product: Product}) {
    if (!product.featuredImage) {
      return null;
    }

    return (
      <Image
        data={product.featuredImage}
        sizes="(min-width: 45em) 50vw, 100vw"
        aspectRatio="4/5"
      />
    );
  }
  ```

## Related

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/api/hydrogen/components/mediafile)

[MediaFile](https://shopify.dev/api/hydrogen/components/mediafile)