# 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.luca.global/boas-vindas/luca-tema/primeiros-passos/guia-de-imagens.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.