Banner principal:
Desktop: A partir do parâmetro definido como CE.TAMANHO_BANNER, é possível definir que o banner não seja apresentado, ou que ele seja apresentado em até 30% da tela, em até 60% ou em até 100% da tela.
Mobile: A partir do parâmetro definido como CE.TAMANHO_BANNER_MOBILE, é possível definir que o banner não seja apresentado, ou que ele seja apresentado em até 30% da tela, em até 60% ou em até 100% da tela.
Apresentar as informações principais do Banner na área verde
Tamanhos ideias para cada imagem:
-
100% da tela: 1920 x 900 ou 1920 x 1070
-
60% da tela: 1070 x 500
-
30% da tela: 1070 x 250
As dimensões para Desktop e Mobile são as mesmas, pois o e-commerce é responsivo e ajusta automaticamente conforme o dispositivo.
Recomendamos que as informações principais do banner fiquem centralizadas, garantindo melhor visualização em diferentes telas.
Recomendações de formatos para o Banner:
|
Formato |
Qualidade |
Tamanho estimado |
|---|---|---|
|
JPEG |
Média (compressão moderada) |
240 KB – 950 KB |
|
JPEG |
Alta (compressão leve) |
950 KB – 2,4 MB |
|
PNG |
Com pouca cor / transparência |
480 KB – 1,9 MB |
|
PNG |
Com muitos detalhes / cores |
1,9 MB – 4,8 MB |
Logo
Logo: 120 px - (Recomendado de 120 pixels horizontais, mas pode variar. O importante é que não seja uma imagem pesada)
Recomendações de formatos para o Logo:
|
Formato |
Qualidade |
Tamanho estimado |
|---|---|---|
|
JPEG |
Média (compressão moderada) |
2 KB – 8 KB |
|
JPEG |
Alta (compressão leve) |
8 KB – 20 KB |
|
PNG |
Com pouca cor / transparência |
4 KB – 16 KB |
|
PNG |
Com muitos detalhes / cores |
16 KB – 40 KB |
Ou enviar um SVG para inclusão no projeto.
Ingressos:
Imagem cadastrada dos ingressos - 170 x 170 px
Vitrines:
Imagem das vitrines - 238 x 305 px
Recomendações de formatos para a Vitrine:
|
Formato |
Qualidade |
Tamanho estimado |
|---|---|---|
|
JPEG |
Média (compressão moderada) |
10 KB – 40 KB |
|
JPEG |
Alta (compressão leve) |
40 KB – 100 KB |
|
PNG |
Com pouca cor / transparência |
20 KB – 80 KB |
|
PNG |
Com muitos detalhes / cores |
80 KB – 200 KB |
Estas são as recomendações mínimas para manter a qualidade. Elas representam as dimensões que o sistema tenta renderizar. Imagens maiores podem ser utilizadas e se ajustarão corretamente, mas podem aumentar o tempo de carregamento se forem muito grandes. Por outro lado, o uso de imagens menores pode resultar em perda de qualidade.