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. Saiba mais na postagem no nossa blog.

Requisitos de sistema para Webp

As seguintes versões aceitam imagens Webp:

• iPhone: v14 e superiores
• Mac/Safari: versão mais recente
• Chrome: todas as versões
• Android: todas as versões

Os seguintes tipos de arquivo de imagem são suportados:

png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp

Tamanhos otimizados de imagem por dispositivo

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.

A imagem pode ter até 200 MB.

O upload de uma imagem acima do limite pode dar os seguintes erros:

• As imagens não carregam.
• As imagens carregam, mas as miniaturas no seletor de imagens não aparecem.
• As imagens não são carregadas no editor.
• As imagens não são carregadas no site ativo.

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

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.

Para saber mais, consulte Ícones do site.

Favicons

Os favicons não são usados no seu site, mas aparecem na aba quando o usuário abre o site. Recomenda-se o formato ICO. Para converter arquivos de imagem para ICO, consulte o seguinte recurso.

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

Logotipos

Recomenda-se o formato SVG nas imagens do logotipo, pois arquivos SVG não são otimizados da mesma forma que outros arquivos de imagem; portanto, mesmo que o logotipo carregado tenha um tamanho pequeno, você não perderá qualidade.

Proporção versus Resolução

Proporção é a relação entre os atributos de largura e altura da imagem. A proporção de 16:9,por exemplo pode ser uma imagem de 16x9 pixels ou de 1600x900 pixels. Ou seja, 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.