src *

string

• -

Source da imagem principal.

alt *

string

• -

Texto alternativo que descreve a imagem.

É essencial para acessibilidade e deve conter uma descrição relevante da imagem para leitores de tela.

loading

string

• eager

• lazy (default)

Indica como o browser deve carregar a imagem.

eager carrega a imagem imediatamente, independente de estar visível no viewport.
É utilizado para imagens principais e essenciais para a página.

lazy adia o carregamento da imagem até que a imagem esteja próxima do viewport da pessoa, conforme definição do browser.
Assim, a imagem só é carregada quando ela for de fato ser necessária, otimizando a performance e sendo o caso de uso padrão.

objectFit

ImageObjectFit

• contain

• cover

• fill (default)

• none

• scale-down

• inherit

• initial

• unset

Valor da propriedade object-fit do CSS, que define como a imagem deve se adequar a seu container.

objectPosition

string

• -

Valor da propriedade object-position do CSS, que define como a imagem deve ser alinhada em seu container.

sets

Array<{ src: string; media?: string; }>

• -

Array de source sets para renderizar a imagem em diferentes formatos e tamanhos com base em media queries e suporte de browsers.
src é o image source da imagem para o set.
media é o media query utilizado para aplicar aquele set.
Você pode passar um media query como string ou utilizar um valor padrão de nossos breakpoints
(xsMin, xsMax, xsMinMax, smMin, ...). Seu valor default é xsMin.

placeholder

string

• -

Source de um LQIP (Low Quality Image Placeholder) a ser mostrado enquanto a imagem original é carregada.
Importante para as imagens principais da página, como heroes, e que são pesadas.
Você pode ler mais sobre aqui e aqui.