Orientações para dimensão das imagens

  • Banco de conhecimento
  • Criador de sites responsivos
  • Orientações para dimensão das imagens
  • Suporte > Criador de sites responsivo > Como editar um site

Visão Geral

Sempre que você carrega uma imagem, o criador de websites gera até 5 cópias de tamanho reduzido dessa imagem. O criador inserirá automaticamente a imagem de tamanho apropriado nos sites que serão abertos como desktop, tablet e no celular. Isso garante que os visitantes do site sempre vejam a imagem de tamanho correto de acordo com o dispositivo que estão usando.

Guia

Tamanhos otimizados de imagem por dispositivo

Tipo de imagem Largura da imagem
Plano de fundo 1980px
Desktop 1660px
Tablet 1440px
Celular 600px
Miniatura 150px

O criador não aumentará o tamanho de uma imagem carregada e criará apenas imagens menores que a imagem carregada originalmente.

Por exemplo, se uma imagem de largura 2000px for carregada, 5 novas cópias otimizadas serão criadas. Se uma imagem de 100px de largura for carregada, nenhuma nova imagem será criada.

Tamanho máximo da imagem

A área total de uma imagem não pode exceder 3.145.728 pixels. É improvável que qualquer uma das suas imagens ultrapasse esse limite, mas você pode verificar rapidamente multiplicando a largura do pixel pela altura.

Orientações para dimensão das imagens por widget

Slider

O slider widget é normalmente usado com imagens de tamanho maior para efeitos. Normalmente, os sliders esticam de ponta a ponta, por isso é bom usar imagens com largura maior para se encaixarem no slider. Para os sliders "quadrados", use uma proporção uniforme, como por exemplo 1:1. 

É melhor escolher as imagens com bom padding, para que o conteúdo principal da imagem não seja cortado quando for redimensionado. As proporções da imagem devem ser as mesmas no slider, para manter a consistência de projeto

  • Razões de proporção mais comuns: 16:9, 3:4
  • Tamanhos comuns de resolução (px): 1600x900, 1280x720, 1280x960

Observações específicas do dispositivo: os dispositivos móveis geralmente têm a proporção diferente em comparação aos dispositivos de desktop. Você pode ter que usar o recurso Ocultar no dispositivo para exibir os sliders móveis corretamente.

Galeria

O widget da galeria é o widget mais flexível para usar com imagens, pois existem muitas opções de layout. Por exemplo, você pode ter uma galeria com visualização em ícones com o mesmo tamanho para todas as imagens ou em mosaico, que tem  tamanhos diferentes por imagem.

A proporção das imagens na galeria devem refletir como você deseja exibi-las.

  • Por exemplo, as galerias de estilo quadrado devem ter uma proporção de 1:1 de imagens.
  • Galerias de imagens  com outro estilo devem ter proporções de altura maiores, como por exemplo 2:5 ou 200px por 500px.

As proporções de imagem devem ser as mesmas para a consistência do design. Deixe um padding na imagem se quiser usar o efeito "hover" para que suas imagens não sejam cortadas.

  • Proporções comuns: qualquer proporção.
  • Tamanhos de resolução comuns (px): qualquer resolução, mas não maior que 1500px para a velocidade da página.

Ícones

Os ícones são uma parte muito importante de qualquer site. Eles são marcadores visuais de informações e podem acrescentar um visual moderno ao seu site. Você pode usar PNGs, JPEGs ou SVGs transparentes.

  • Proporções comuns: geralmente 1:1, mas qualquer proporção funcionará.
  • Tamanhos de resolução comuns (px): 200x200, 80x80 ou qualquer resolução. SVGs podem ter qualquer resolução.

Favicons

Os favicons não são usados no seu site real, mas são exibidos na guia quando os usuários abrem o site.

  • Proporção necessária: 1:1
  • Tamanhos de resolução permitidos (px): 24x24, 36x36, 48x48

Proporção versus Resolução

A proporção é a "razão" da largura de uma imagem e o atributo de altura. Uma proporção de 16:9 pode ser uma imagemde 16x19px ou uma imagemde 1600x900 px. É basicamente qualquer resolução de imagem que tenha a proporção de 16:9.

Proporções diferentes por dispositivo

Enquanto o criador de site otimiza imagens em seu site, ele não redimensiona de fato o desenho de imagens em seu site. Se você usar uma imagem no desktop que tenha uma proporção de 16:9, ela ficará perfeita no desktop, já que dispositivos desktop são grandes. Um dispositivo móvel, no entanto, é muito menor e, portanto, uma proporção de 16:9 poderá parecer pequena.

Para compensar, você pode tanto usar o recurso ocultar do dispositivo para criar versões específicas para esses dispositivos quanto redimensionar a imagem para caber - as alterações de tamanho são independentes do dispositivo.

Considerações 

Maior nem sempre é melhor

Carregar uma resolução maior para o seu site garantirá que as imagens sejam de alta resolução para seus clientes. No entanto, é bom lembrar que as imagens grandes também têm um efeito importante na velocidade da sua página. Como as imagens de alta resolução são reduzidas, os usuários normalmente não notam a diferença na resolução. É melhor carregar imagens que sejam do tamanho ideal para cada finalidade. Por exemplo, se você tem uma imagem com 300px por 300px em seu site, você não vai carregá-la como uma imagem de 4000px por 4000px.