Integração Analytics

h1. Loja Virtual - Imagens

h2. Introdução

Este documento visa orientar na criação das imagens que irão compor o site B2B ou B2C - informe-se com o responsável do projeto sobre o tipo de loja.

Em caso de dúvida sobre como estas imagens serão aplicadas, segue dois exemplos de loja:

Exemplo de e-commerce (B2C): https://loja.ibtech.inf.br

Exemplo de B2B: https://b2b.ibtech.inf.br

h2. Considerações

As imagens geradas serão usadas somente para o site, então as mesmas devem ser otimizadas para web. O perfil de cor deve ser estritamente RGB e no caso dos arquivos JPG recomendamos compactação entre 75~90%.

A loja restringe o uso de imagens grandes, por isso observe na documentação sempre se foi especificado o tamanho máximo. Este cuidado com tamanhos é importante, pois, muitas pessoas acessarão o site via celular (3G/4G) e o acesso deve ser o mais otimizado possível.

h2. Logo da Empresa

Responsivo: *não*

Tipo de Arquivo: *PNG* (pode ser com fundo transparente)

Altura: *Recomendado 41px*

Largura: *Máximo 200px*

h2. Banner(s) de Galeria

Responsivo: *sim*

Tipo de Arquivo: *JPG*

Altura: *Recomendado 2040px*

Largura: *Recomendado 450px*

Carrossel: *Sim*

Observação: *Procure manter um padrão de tamanho para todos os banners deste tipo para evitar disparidade de altura*

h2. Banner(s) da Tela de Login (somente B2B)

Responsivo: *sim*

Tipo de Arquivo: *JPG*

Altura: *Recomendado 2550px*

Largura: *Recomendado 720px*

Carrossel: *Sim*

Observação: *Procure manter um padrão de tamanho para todos os banners deste tipo para evitar disparidade de altura*

h2. Imagens de produtos

Responsivo: *sim*

Tipo de Arquivo: *JPG*

Altura: *900px*

Largura: *600px*

Limite de Tamanho do Arquivo: *300KB*

Observação 1: *Procure manter um padrão de tamanho para todos as imagens de produtos para evitar disparidade de altura.*

Observação 2: *Sobre as dimensões, recomendamos manter o aspecto de retrato, não há necessidade de ter exatamente a proporção indicada acima.*

O produto pode ter várias imagens organizadas por *cor*. Por isso este tipo de imagem tem uma nomenclatura especial:

<pre>

Imagens da tela de produto:

    839103_213_00.jpg

      |     |  |   +--- extensão obrigatória

      |     |  +------- numero sequencial para mais de uma imagem por produto/cor

      |     +---------- código da cor do produto

      +---------------- código do produto

</pre>

O produto também pode ter uma imagem especial para uso na galeria. Neste caso o nome da imagem é o próprio código do produto. 

_Esta imagem é opcional._

<pre>

Imagem da galeria (opcional):

    839103.jpg

      |     +--- extensão obrigatória

      +--------- código do produto

</pre>

*Exemplo de imagens de produto:*

Código do Produto: *10082*

Código da Cor: *AZU*

Sequência da Foto: *01*

Nome da Imagem: *10082_AZU_01.jpg*

!cor1.png!

Código do Produto: *10082*

Código da Cor: *SAL*

Sequência da Foto: *01*

Nome da Imagem: *10082_SAL_01.jpg*

!cor2.png!