Image

Image converted to AVIF format and resized. AVIF compresses images significantly better than older-generation formats such as WebP and JPEG.

Displaying great product images is one of the most important keys to e-Commerce success.

• https://en.wikipedia.org/wiki/AVIF

You can choose the image format you need so that you do not unnecessarily load an image that is larger than the area in which you are displaying it. This ensures maximum page optimisation.

• https://docs.astro.build/en/guides/images/

Use .img--overlay class for images on white background to make a layer with light grey overlay.

Small Image

.img--small

<div class="img--overlay img--4/3 img--small">
  <Image
    imageObject={
      {
        src: 'https://placehold.co/240x180',
        alt: 'Image Alt',
        height: '180',
        width: '240',
        class: 'object-cover'
      }
    }
  />

  <div class="img--4/3 img--small">
    <Image
      imageObject={
        {
          src: 'https://placehold.co/240x180',
          alt: 'Image Alt',
          height: '180',
          width: '240',
          class: 'object-cover'
        }
      }
    />
  </div>

  <div class="img--4/3 img--small">
    <Image
      imageObject={
        {
          src: 'https://placehold.co/240x180',
          alt: 'Image Alt',
          height: '180',
          width: '240',
          class: 'object-cover'
        }
      }
    />
  </div>

  

</div>

Medium Image

.img--medium

  <a class="img--medium img--3/2 b-l b-white" href="#">
    <Image
      imageObject={
        {
          src: 'https://placehold.co/240x180',
          alt: 'Image Alt',
          height: '180',
          width: '240',
        }
      }
    />
  </a>

  <a class="img--medium img--3/2 b-l b-white" href="#">
    <Image
      imageObject={
        {
          src: 'https://placehold.co/240x180',
          alt: 'Image Alt',
          height: '180',
          width: '240',
          class: 'bg-gray-100/70'
        }
      }
    />
  </a>

  <a class="img--medium img--3/2 b-l b-white" href="#">
    <Image
      imageObject={
        {
          src: 'https://placehold.co/240x180',
          alt: 'Image Alt',
          height: '180',
          width: '240',
          class: 'bg-gray-100/70'
        }
      }
    />
  </a>

Responsive Image with srcset

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes

 <Image
      imageObject={
        {
          src: 'https://placehold.co/1800x1350',
          alt: 'Image Alt',
          height: '1350',
          width: '1800',
          class: 'bg-gray-100/70',
          srcset: [430, 690, 960, 1200, 1800]
        }
      }
    />

Image Aspect Ratios

Image ratio, also known as aspect ratio, is how wide an image is in relation to how tall it is. For viewing on a mobile device, the recommended image ratio is 1:1 (a square picture).

Ready-made CSS classes:

• img--1/1
• img--2/3
• img--3/1
• img--3/2
• img--3/4
• img--4/3
• img--16/9

1:1

3:1

4:3

3:2

16:9

3:4

2:3

  <div class="img--medium img--1/1 b-l b-white w-full">
    <Image
      imageObject={
        {
          src: 'https://placehold.co/700x700',
          alt: 'Image Alt',
          height: '700',
          width: '700',
        }
      }
    />
  </div>

  <div class="img--medium img--3/1 b-l b-white w-full">
    <Image
      imageObject={
        {
          src: 'https://placehold.co/700x700',
          alt: 'Image Alt',
          height: '700',
          width: '700',
        }
      }
    />
  </div>

  <div class="img--medium img--4/3 b-l b-white w-full">
    <Image
      imageObject={
        {
          src: 'https://placehold.co/700x700',
          alt: 'Image Alt',
          height: '700',
          width: '700',
        }
      }
    />
  </div>

  <div class="img--medium img--3/2 b-l b-white w-full">
    <Image
      imageObject={
        {
          src: 'https://placehold.co/700x700',
          alt: 'Image Alt',
          height: '700',
          width: '700',
        }
      }
    />
  </div>

  <div class="img--medium img--16/9 b-l b-white w-full">
    <Image
      imageObject={
        {
          src: 'https://placehold.co/700x700',
          alt: 'Image Alt',
          height: '300',
          width: '300',
        }
      }
    />
  </div>

  <div class="img--medium img--3/4 b-l b-white w-full">
    <Image
      imageObject={
        {
          src: 'https://placehold.co/700x700',
          alt: 'Image Alt',
          height: '700',
          width: '700',
        }
      }
    />
  </div>
  
  <div class="img--medium img--2/3 b-l b-white w-full">
    <Image
      imageObject={
        {
          src: 'https://placehold.co/700x700',
          alt: 'Image Alt',
          height: '700',
          width: '700',
        }
      }
    />
  </div>

It is good to have all the images in the same ratio so that they look fairly uniform. Additionally, you can use a different ratio on desktop than on mobile view.

Image 1:1 on mobile, and 4:3 on desktop

<div class="img--medium img--1/1 md:img--4/3 b-l b-white w-full">
  <Image
    imageObject={
      {
        src: 'https://placehold.co/700x700',
        alt: 'Image Alt',
        height: '700',
        width: '700',
      }
    }
  />
</div>

Props

ImageObject shape

interface ImageObject {
  src: string;             // Image URL or imported asset
  alt: string;             // Alt text (required for a11y)
  width: string | number;  // Original width in px
  height: string | number; // Original height in px
  class?: string;          // Extra classes appended to the <img>
  index?: number;          // When 1, marks as hero (eager load + Pagefind index)
  srcset?: number[];       // Widths for responsive image generation
}

CSS Shortcuts

Wrap the <Image> in a sized container with one of these classes. The container drives ratio and size — the image is object-cover, 100%.