Orientações para dimensão das imagens

Sempre que você carregar uma imagem, serão geradas até cinco cópias de tamanhos reduzidos dessa imagem. O Duda irá inserir a imagem automaticamente, com o tamanho apropriado, nos sites que serão abertos em computadores, tablets e celulares, garantindo que os visitantes do site vejam sempre a imagem no tamanho correto, de acordo com o dispositivo que estiverem usando.

Tamanhos otimizados de imagem por dispositivo

Tipo de imagem

Largura da imagem

Fundo

1980px

Desktop

1660px

Tablet

1440px

Mobile

600px

Miniatura

150px

O tamanho da imagem carregada não é aumentado e apenas imagens menores que o original são criadas. 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.

Diretrizes de tamanhos de imagens por widget

Controle deslizante

Normalmente, o widget de apresentação de imagens é utilizado com imagens maiores para criar um efeito dramático. É comum as imagens serem esticadas de um lado ao outro, por isso convém utilizar imagens mais largas para se ajustarem ao tamanho da apresentação deslizante. Nos controles de imagens deslizantes quadrados, use a proporção de 1:1.

É melhor escolher imagens com bom preenchimento 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 controle de imagens deslizantes, para manter a coerência do projeto.

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

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 de Fotos

O widget da Galeria de Fotos é o widget mais flexível para usar com imagens, devido às muitas opções de layout. Por exemplo, você pode ter uma galeria lado a lado com o mesmo tamanho para todas as imagens, ou um mosaico com tamanho diferente por imagem.

A proporção das imagens na Galeria de Fotos deve refletir como você deseja exibi-las.

  • Por exemplo, as galerias de estilo quadrado devem ter uma proporção de 1:1 de imagens.
  • As galerias de imagens com estilo mais alto 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 manter a coerência do design. Deixe algum preenchimento na imagem para utilizar o efeito de foco, 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 aba 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

Proporção é a relação entre os atributos de largura e altura da imagem. Uma proporção de 16:9 pode ser uma imagem de 16 x 19 px ou uma imagem de 1600 x 900 px. É uma imagem de qualquer resolução com a proporção de 16:9.

Visualizando as duas proporções mais comuns:

Proporções por dispositivo

Embora as imagens sejam otimizadas no seu site, ele não redimensiona o design das imagens no site. Se você usar uma imagem na área de trabalho com uma proporção de 16:9, ela aparecerá perfeita na tela do computador, já que o desktop é amplo. Um dispositivo móvel, no entanto, é muito menor e, portanto, uma proporção de 16:9 poderá parecer pequena.

Para compensar, você pode utilizar o recurso para ocultar no dispositivo, para criar versões específicas para esses dispositivos, ou redefinir as dimensões da imagem para ajustá-las. As alterações no tamanho são independentes de dispositivos.

Considerações


Maior nem sempre é melhor

O envio com resoluções mais altas para o site garante que as imagens sejam apresentadas em alta resolução aos clientes. Entretanto, lembre-se de que imagens maiores também afetam drasticamente a velocidade da página. Como as imagens em alta resolução são reduzidas, normalmente os usuários não notam a diferença na resolução. É melhor carregar imagens que sejam do tamanho ideal para cada finalidade. Por exemplo, se você tiver uma imagem com 300 px por 300 px no site, não envie uma imagem de 4000 px por 4000 px.

Esse artigo foi útil?
Usuários que acharam isso útil: 1 de 1

Feedback sobre este artigo

0 comentário

Por favor, entre para comentar.

×

Faça o login como Profissional

O Suporte prioritário por telefone está disponível exclusivamente para profissionais. Acesse a sua conta Pro agora para ver nossos números de suporte internacional.

Registre-se
Não é profissional? Adquira um plano Pro!