# Image

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 automativally (`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.

```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"
    />
  );
}

```

```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"
    />
  );
}

```

## Props

### HydrogenImageBaseProps

### aspectRatio

value: `string`

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

### crop

value: `Crop`

  - Crop: 'center' | 'top' | 'bottom' | 'left' | 'right'
The crop position of the image.

### data

value: `PartialObjectDeep<Image, { recurseIntoArrays: true; }>`

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

### loader

value: `Loader`

  - Loader: (params: LoaderParams) => string
A function that returns a URL string for an image.

### srcSetOptions

value: `SrcSetOptions`

  - SrcSetOptions: {
  intervals: number;
  startingWidth: number;
  incrementSize: number;
  placeholderWidth: number;
}
An optional prop you can use to change the default srcSet generation behaviour

### loaderOptions

value: `ShopifyLoaderOptions`

  - Loader: (params: LoaderParams) => string
  - ShopifyLoaderOptions: {
  /** 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;
}

### widths

value: `(string | number)[]`


### LoaderParams

### src

value: `string`

The base URL of the image

### width

value: `number`

The URL param that controls width

### height

value: `number`

The URL param that controls height

### crop

value: `Crop`

  - Crop: 'center' | 'top' | 'bottom' | 'left' | 'right'
The URL param that controls the cropping region

### SrcSetOptions

### intervals

value: `number`


### startingWidth

value: `number`


### incrementSize

value: `number`


### placeholderWidth

value: `number`


### ShopifyLoaderOptions

Legacy type for backwards compatibility *

### src

value: `string`

The base URL of the image

### width

value: `string | number`

The URL param that controls width

### height

value: `string | number`

The URL param that controls height

### crop

value: `Crop`

  - Crop: 'center' | 'top' | 'bottom' | 'left' | 'right'
The URL param that controls the cropping region

## Related

- [MediaFile](/api/hydrogen/components/mediafile)