Start typing to search components and docs…
↵ select ↑ ↓ navigate ESC close

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.

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.

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

Small Image

.img--small

Image Alt
Image Alt
Image Alt
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--overlay img--4/3 img--small"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">Image</span></span> <span class="line"><span style="color:#B392F0"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> src: </span><span style="color:#9ECBFF">'https://placehold.co/240x180'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> alt: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> height: </span><span style="color:#9ECBFF">'180'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> width: </span><span style="color:#9ECBFF">'240'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> class: </span><span style="color:#9ECBFF">'object-cover'</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--4/3 img--small"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">Image</span></span> <span class="line"><span style="color:#B392F0"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> src: </span><span style="color:#9ECBFF">'https://placehold.co/240x180'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> alt: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> height: </span><span style="color:#9ECBFF">'180'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> width: </span><span style="color:#9ECBFF">'240'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> class: </span><span style="color:#9ECBFF">'object-cover'</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--4/3 img--small"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">Image</span></span> <span class="line"><span style="color:#B392F0"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> src: </span><span style="color:#9ECBFF">'https://placehold.co/240x180'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> alt: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> height: </span><span style="color:#9ECBFF">'180'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> width: </span><span style="color:#9ECBFF">'240'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> class: </span><span style="color:#9ECBFF">'object-cover'</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8"> </span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre>

Medium Image

.img--medium

Image AltImage AltImage Alt
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#F97583"> &#x3C;</span><span style="color:#E1E4E8">a class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--medium img--3/2 b-l b-white"</span><span style="color:#E1E4E8"> href</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"#"</span><span style="color:#F97583">></span></span> <span class="line"><span style="color:#F97583"> &#x3C;</span><span style="color:#E1E4E8">Image</span></span> <span class="line"><span style="color:#E1E4E8"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#B392F0"> src</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'https://placehold.co/240x180'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> alt</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> height</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'180'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> width</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'240'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#F97583"> /></span></span> <span class="line"><span style="color:#F97583"> &#x3C;/</span><span style="color:#E1E4E8">a</span><span style="color:#F97583">></span></span> <span class="line"></span> <span class="line"><span style="color:#F97583"> &#x3C;</span><span style="color:#E1E4E8">a class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--medium img--3/2 b-l b-white"</span><span style="color:#E1E4E8"> href</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"#"</span><span style="color:#F97583">></span></span> <span class="line"><span style="color:#F97583"> &#x3C;</span><span style="color:#E1E4E8">Image</span></span> <span class="line"><span style="color:#E1E4E8"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#B392F0"> src</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'https://placehold.co/240x180'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> alt</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> height</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'180'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> width</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'240'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'bg-gray-100/70'</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#F97583"> /></span></span> <span class="line"><span style="color:#F97583"> &#x3C;/</span><span style="color:#E1E4E8">a</span><span style="color:#F97583">></span></span> <span class="line"></span> <span class="line"><span style="color:#F97583"> &#x3C;</span><span style="color:#E1E4E8">a class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--medium img--3/2 b-l b-white"</span><span style="color:#E1E4E8"> href</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"#"</span><span style="color:#F97583">></span></span> <span class="line"><span style="color:#F97583"> &#x3C;</span><span style="color:#E1E4E8">Image</span></span> <span class="line"><span style="color:#E1E4E8"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#B392F0"> src</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'https://placehold.co/240x180'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> alt</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> height</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'180'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> width</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'240'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">'bg-gray-100/70'</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#F97583"> /></span></span> <span class="line"><span style="color:#F97583"> &#x3C;/</span><span style="color:#E1E4E8">a</span><span style="color:#F97583">></span></span></code></pre>

Responsive Image with srcset

Image Alt
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">Image</span></span> <span class="line"><span style="color:#B392F0"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> src: </span><span style="color:#9ECBFF">'https://placehold.co/1800x1350'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> alt: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> height: </span><span style="color:#9ECBFF">'1350'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> width: </span><span style="color:#9ECBFF">'1800'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> class: </span><span style="color:#9ECBFF">'bg-gray-100/70'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> srcset: [</span><span style="color:#79B8FF">430</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">690</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">960</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1200</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1800</span><span style="color:#E1E4E8">]</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span></code></pre>

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
Image Alt
1:1
Image Alt
3:1
Image Alt
4:3
Image Alt
3:2
Image Alt
16:9
Image Alt
3:4
Image Alt
2:3
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--medium img--1/1 b-l b-white w-full"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">Image</span></span> <span class="line"><span style="color:#B392F0"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> src: </span><span style="color:#9ECBFF">'https://placehold.co/700x700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> alt: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> height: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> width: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--medium img--3/1 b-l b-white w-full"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">Image</span></span> <span class="line"><span style="color:#B392F0"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> src: </span><span style="color:#9ECBFF">'https://placehold.co/700x700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> alt: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> height: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> width: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--medium img--4/3 b-l b-white w-full"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">Image</span></span> <span class="line"><span style="color:#B392F0"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> src: </span><span style="color:#9ECBFF">'https://placehold.co/700x700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> alt: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> height: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> width: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--medium img--3/2 b-l b-white w-full"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">Image</span></span> <span class="line"><span style="color:#B392F0"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> src: </span><span style="color:#9ECBFF">'https://placehold.co/700x700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> alt: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> height: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> width: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--medium img--16/9 b-l b-white w-full"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">Image</span></span> <span class="line"><span style="color:#B392F0"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> src: </span><span style="color:#9ECBFF">'https://placehold.co/700x700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> alt: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> height: </span><span style="color:#9ECBFF">'300'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> width: </span><span style="color:#9ECBFF">'300'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--medium img--3/4 b-l b-white w-full"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">Image</span></span> <span class="line"><span style="color:#B392F0"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> src: </span><span style="color:#9ECBFF">'https://placehold.co/700x700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> alt: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> height: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> width: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> </span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--medium img--2/3 b-l b-white w-full"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">Image</span></span> <span class="line"><span style="color:#B392F0"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> src: </span><span style="color:#9ECBFF">'https://placehold.co/700x700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> alt: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> height: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> width: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre>

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

Image Alt
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"img--medium img--1/1 md:img--4/3 b-l b-white w-full"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">Image</span></span> <span class="line"><span style="color:#B392F0"> imageObject</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> src: </span><span style="color:#9ECBFF">'https://placehold.co/700x700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> alt: </span><span style="color:#9ECBFF">'Image Alt'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> height: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> width: </span><span style="color:#9ECBFF">'700'</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre>

Props

PropTypeDefaultDescription
imageObject*ImageObject—Single object holding image source, dimensions, alt text, and optional metadata.

ImageObject shape

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#F97583">interface</span><span style="color:#B392F0"> ImageObject</span><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#FFAB70"> src</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Image URL or imported asset</span></span> <span class="line"><span style="color:#FFAB70"> alt</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Alt text (required for a11y)</span></span> <span class="line"><span style="color:#FFAB70"> width</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#F97583"> |</span><span style="color:#79B8FF"> number</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Original width in px</span></span> <span class="line"><span style="color:#FFAB70"> height</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#F97583"> |</span><span style="color:#79B8FF"> number</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Original height in px</span></span> <span class="line"><span style="color:#FFAB70"> class</span><span style="color:#F97583">?:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Extra classes appended to the &#x3C;img></span></span> <span class="line"><span style="color:#FFAB70"> index</span><span style="color:#F97583">?:</span><span style="color:#79B8FF"> number</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// When 1, marks as hero (eager load + Pagefind index)</span></span> <span class="line"><span style="color:#FFAB70"> srcset</span><span style="color:#F97583">?:</span><span style="color:#79B8FF"> number</span><span style="color:#E1E4E8">[]; </span><span style="color:#6A737D">// Widths for responsive image generation</span></span> <span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>

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%.

Class Purpose
img--small / img--medium / img--large Preset container size
img--1/1, img--4/3, img--3/4, img--2/3 Aspect ratio
img--overlay Light grey overlay for product images on white background