Thumbprint logo

Image

Commonly used image styles

Image with src and sources

Browsers that support responsive images will load the best image from the options available in the sources prop. Other browsers will load the image in the src prop.

By default images are lazy-loaded. The containerAspectRatio reserves space for the lazy-loaded image. This avoids content reflowissue that causes the page to “jump” as the image is loaded.

<Image
  alt="Cat laying in the sun"
  containerAspectRatio={1.5010309278350515}
  sources={[
    {
      srcSet: '\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/120.webp 120w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/320.webp 320w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/400.webp 400w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/640.webp 640w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/768.webp 768w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1024.webp 1024w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1366.webp 1366w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1600.webp 1600w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1920.webp 1920w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/2200.webp 2200w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/2350.webp 2350w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/2560.webp 2560w\n            ',
      type: 'image/webp'
    },
    {
      srcSet: '\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/120.jpeg 120w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/320.jpeg 320w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/400.jpeg 400w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/640.jpeg 640w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/768.jpeg 768w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1024.jpeg 1024w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1366.jpeg 1366w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1600.jpeg 1600w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/1920.jpeg 1920w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/2200.jpeg 2200w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/2350.jpeg 2350w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/2560.jpeg 2560w\n            ',
      type: 'image/jpeg'
    }
  ]}
  src="https://d1vg1gqh4nkuns.cloudfront.net/i/356206765797793818/width/768.jpeg"
/>

Two side-by-side images
The image component accepts `style` and `className` props. This example uses both to place two `Image` components side-by-side.
<div className="flex">
  <Image
    alt="Sprinker and flowers"
    className="mr1"
    containerAspectRatio={1.6}
    src="https://d1vg1gqh4nkuns.cloudfront.net/i/323483178133774346/width/400.jpeg"
    style={{
      width: '50%'
    }}
  />
  <Image
    alt="Grass with concrete steps"
    className="ml1 w-50"
    containerAspectRatio={1.6}
    src="https://d1vg1gqh4nkuns.cloudfront.net/i/327896627728072894/width/400.jpeg"
  />
</div>

Cropped images with custom heights
This example uses the height prop to "crop" the image. By default, the cropped image is vertically centered with object-position: center center.
<Image
  alt="Office building with large table and chairs"
  height="230px"
  objectFit="cover"
  src="https://d1vg1gqh4nkuns.cloudfront.net/i/323302285472456711/width/1024.jpeg"
/>

You can also use CSS to change the height. This is especially useful when combined with media queries that affect the image height.
<Image
  alt="Office building with large table and chairs"
  objectFit="cover"
  src="https://d1vg1gqh4nkuns.cloudfront.net/i/323302285472456711/width/1024.jpeg"
  style={{
    height: '230px'
  }}
/>

Within a carousel
This example uses ServiceCard components within a scrollable container. TheServiceCardImage uses the Image component behind the scenes and will behave like the other examples on this page.
function CarouselDemo() {
    return (
        <div className="overflow-x-auto flex">
            <div className="w6 flex-none mr3">
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Personal Training"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/318810408927723609/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>1. Personal Training</ServiceCardTitle>
                </ServiceCard>
            </div>
            <div className="w6 flex-none mr3">
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Dog Training"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323761411685384319/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>2. Dog Training</ServiceCardTitle>
                </ServiceCard>
            </div>
            <div className="w6 flex-none mr3">
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Local Moving (under 50 miles)"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323760317171040266/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>3. Local Moving</ServiceCardTitle>
                </ServiceCard>
            </div>
            <div className="w6 flex-none mr3">
                <ServiceCard url="https://www.thumbtack.com/k/massage/near-me/">
                    <ServiceCardImage
                        alt="Massage Therapy"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323761720722374783/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>4. Massage Therapy</ServiceCardTitle>
                </ServiceCard>
            </div>
            <div className="w6 flex-none mr3">
                <ServiceCard url="https://www.thumbtack.com/k/interior-painting/near-me/">
                    <ServiceCardImage
                        alt="Interior Painting"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323761857295261793/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>5. Interior Painting</ServiceCardTitle>
                </ServiceCard>
            </div>
            <div className="w6 flex-none mr3">
                <ServiceCard url="https://www.thumbtack.com/k/junk-removal/near-me/">
                    <ServiceCardImage
                        alt="Junk Removal"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/323234733715669089/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>6. Junk Removal</ServiceCardTitle>
                </ServiceCard>
            </div>
            <div className="w6 flex-none">
                <ServiceCard url="https://www.thumbtack.com/k/new-home-building/near-me/">
                    <ServiceCardImage
                        alt="New Home Construction"
                        url="https://d1vg1gqh4nkuns.cloudfront.net/i/327799254292824113/width/640/aspect/8-5.jpeg"
                    />
                    <ServiceCardTitle>7. New Home Construction</ServiceCardTitle>
                </ServiceCard>
            </div>
        </div>
    );
}

Forcing early render
The Image component behavior uses JavaScript to lazy load the image and and calculate the sizes attribute. While this is beneficial in most cases, it also means that the image will not start downloading until the client-side JavaScript is parsed and the image is scrolled into view. The forceEarlyRender prop allows developers to turn off lazy loading and the sizes calculation so that the image can load as soon as possible. This is useful for "above-the-fold" images with a predictable width in server-side-rendered environments.
In this responsive image example sizes is set to 760px, matching the expected render size, and this triggers a single request for the 768w webp or jpeg image. See the section Resolution switching: Different sizesfor allowable values.
<Image
  alt="People carrying boxes in truck"
  containerAspectRatio={1.5010309278350515}
  forceEarlyRender="760px"
  sources={[
    {
      srcSet: '\n                https://d1vg1gqh4nkuns.cloudfront.net/i/302055784058904755/width/400.webp 400w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/302055784058904755/width/640.webp 640w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/302055784058904755/width/768.webp 768w,\n            ',
      type: 'image/webp'
    },
    {
      srcSet: '\n                https://d1vg1gqh4nkuns.cloudfront.net/i/302055784058904755/width/400.jpeg 400w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/302055784058904755/width/640.jpeg 640w,\n                https://d1vg1gqh4nkuns.cloudfront.net/i/302055784058904755/width/768.jpeg 768w,\n            ',
      type: 'image/jpeg'
    }
  ]}
  src="https://d1vg1gqh4nkuns.cloudfront.net/i/302055784058904755/width/768.jpeg"
/>

Props
Image
  • src
    required
    If sources is provided, this image will be loaded by search engines and lazy-loaded for
users on browsers that don't support responsive images. If sources is not provided, this
image will be lazy-loaded.
    

    Type
    string
  • sources
    Allows the browser to choose the best file format and image size based on the device screen
density and the width of the rendered image.
    

    Type
    ImageSource[]
  • alt
    Type
    string
  • height
    Crops the image at the provided height. The objectFit and objectPosition props can be
used to control how the image is cropped.
    

    Type
    string
  • containerAspectRatio
    Creates a placeholder box for the image.
The placeholder prevents the browser scroll from jumping when the image is lazy-loaded.
    

    Type
    number
  • forceEarlyRender
    Disables lazy-loading and overrides the default calculation of the sizes attribute.
Primarily for important images in a server-side rendered environment that must be
loaded before JavaScript is parsed and executed on the client. The value gets used
as the sizes attribute. See allowable values.
    

    Type
    React.ImgHTMLAttributes<HTMLImageElement>['sizes']
  • objectFit
    Provides control over how the image should be resized to fit the container. This controls the
object-fit CSS property. It is only useful if height is used to "crop" the image.
    

    Type
    'cover' | 'contain'
  • objectPosition
    Provides control over how the image position in the container. This controls the
object-position CSS property. It is only useful if height is used to "crop" the image.
    

    Type
    'top' | 'center' | 'bottom' | 'left' | 'right'
  • className
    Type
    string