> For the complete documentation index, see [llms.txt](https://docs.luca.global/boas-vindas/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.luca.global/boas-vindas/luca-tema/primeiros-passos/guia-de-imagens.md).

# Guia de imagens

Este guia traz orientações essenciais sobre como criar imagens adequadas para os componentes do **LUCA SUPER TEMA** no seu projeto. Seguir esses padrões garante uma melhor adaptação das imagens, proporcionando um design mais harmonioso e otimizado para diferentes dispositivos.

## Tamanhos padrões[​](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#identificadores-de-p%C3%A1ginas) <a href="#identificadores-de-paginas" id="identificadores-de-paginas"></a>

Para a maioria dos componentes, utilizamos três proporções universais de imagens:

* Quadrado (1:1)
  * 📏 **Tamanho recomendado:** 600px de largura x 600px de altura
* Vertical (3:4)
  * 📏 **Tamanho recomendado:** 600px de largura x 1075px de altura
* Horizontal (4:3)
  * 📏 **Tamanho recomendado:** 600px de largura x 335px de altura

<div data-full-width="true"><figure><img src="/files/voUojSJdjzkKROvGhu7D" alt=""><figcaption></figcaption></figure></div>

#### Componentes que utilizam esses tamanhos <a href="#exemplo" id="exemplo"></a>

* Quadrado (1:1)
  * Lista de Categorias
  * Galeria Vertical &#x20;
* Vertical (3:4)
  * Carrossel de Produto com Capa
* Horizontal (4:3)
  * 1x Vertical
  * 4x Horizontal
  * 4x Quadrado *(somente no mobile)*

***

## Banner Curto[​](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#classes-de-se%C3%A7%C3%A3o-e-elemento) <a href="#classes-de-secao-e-elemento" id="classes-de-secao-e-elemento"></a>

Os banners possuem duas áreas importantes: &#x20;

📌 **Área Total**: O tamanho máximo que a imagem pode ocupar na tela. &#x20;

📌 **Área de Segurança:** A zona onde devem estar as informações essenciais, garantindo que elas sejam sempre visíveis em diferentes telas e resoluções. &#x20;

#### Dimensões para Desktop

📏 **Área total:** 1920px de largura x 384px de altura **(pode variar conforme a largura da loja).**

📌 **Área de segurança:** 1280px de largura x 384px de altura.

#### Dimensões para Mobile

📏 **Área total:** 744px de largura x 384px de altura **(pode variar conforme a largura da loja).**

📌 **Área de segurança:** 320px de largura x 384px de altura.

<div data-full-width="true"><figure><img src="/files/gasRd40POQtrGhKRH1z7" alt=""><figcaption></figcaption></figure></div>

#### Componentes que utilizam esses tamanhos[​](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#exemplo-1) <a href="#exemplo-1" id="exemplo-1"></a>

* Cabeçalho Curto&#x20;

***

## Banner Médio[​](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#classes-de-se%C3%A7%C3%A3o-e-elemento) <a href="#classes-de-secao-e-elemento" id="classes-de-secao-e-elemento"></a>

Segue a mesma lógica do **Banner Curto**, mas com uma altura maior.

#### Dimensões para Desktop

📏 **Área total:** 1920px de largura x 568px de altura **(pode variar conforme a largura da loja).**

📌 **Área de segurança:** 1280px de largura x 568px de altura.

#### Dimensões para Mobile

📏 **Área total:** 744px de largura x 568px de altura **(pode variar conforme a largura da loja).**

📌 **Área de segurança:** 320px de largura x 568px de altura.

<div data-full-width="true"><figure><img src="/files/u1Q9YtWIr3OhYseRuSzQ" alt=""><figcaption></figcaption></figure></div>

#### Componentes que utilizam esses tamanhos[​](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#exemplo-1) <a href="#exemplo-1" id="exemplo-1"></a>

* Banner Principal

***

## Banner Heróico[​](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#classes-de-se%C3%A7%C3%A3o-e-elemento) <a href="#classes-de-secao-e-elemento" id="classes-de-secao-e-elemento"></a>

O **Banner Heróico** se adapta automaticamente à altura do navegador do usuário, proporcionando uma experiência imersiva.

#### Dimensões para Desktop

📏 **Área total:** 1920px de largura x 1080px de altura **(pode variar conforme a largura da loja).**

📌 **Área de segurança:** 1280px de largura x 1080px de altura.

<div data-full-width="true"><figure><img src="/files/HYsgaGNJVNF6I1egwVf0" alt=""><figcaption></figcaption></figure></div>

#### Dimensões para Mobile

📏 **Área total:** 744px de largura x 1133px de altura **(pode variar conforme a largura da loja).**

📌 **Área de segurança:** 320px de largura x 1133px de altura.

<div data-full-width="true"><figure><img src="/files/2vIE8hQIlZuJJtnwErSL" alt=""><figcaption></figcaption></figure></div>

#### Componentes que utilizam esses tamanhos[​](https://luca-copilot.github.io/doc-public/docs/guias-avancados/boas-praticas-css#exemplo-1) <a href="#exemplo-1" id="exemplo-1"></a>

* Galeria Heróica Interativa
* Banner Heróico
* Cabeçalho Heróico
* Galeria Moderna Heróica

#### Dicas para uma Melhor Adaptação das Imagens

✅ **Sempre priorize a área de segurança** para garantir que textos e elementos importantes não fiquem cortados. &#x20;

✅ **Utilize imagens de alta qualidade** e otimizadas para web, evitando arquivos muito pesados que possam comprometer o carregamento da loja. &#x20;

✅ **Evite margens excessivas** na imagem, pois o corte pode variar dependendo do layout e dispositivo. &#x20;

✅ **Considere o alinhamento do conteúdo** dentro das imagens para garantir um visual harmônico em diferentes telas. &#x20;

Se tiver dúvidas ou sugestões, estamos à disposição no Discord ou por e-mail. Estamos aqui para ajudar!

&#x20;