1. Início
  2. utilização Blocs
  3. Design
  4. Imagens de resolução múltipla

Imagens de resolução múltipla

A maioria dos telefones celulares e muitos computadores modernos agora têm telas de alta resolução (Retina), o que significa que têm uma densidade de pixels mais alta. Se quiser que as imagens do seu site pareçam realmente nítidas nas telas padrão e de alta resolução, você precisará fornecer versões adicionais de seus arquivos de imagem com diferentes densidades de pixel.

Requisitos de resolução

Arquivos de resolução múltipla geralmente são necessários em três tamanhos:

@ 1x - Resolução Padrão 1: 1 pixels

@ 2x - Resolução Dupla 2: 1 pixels

@ 3x - Resolução Tripla 3: 1 pixels

Se você não tem experiência em design, isso pode parecer um pouco confuso. Basicamente um @ 2x a imagem tem o dobro do tamanho em pixels que um @ 1x imagem e um @ 3x a imagem é três vezes o tamanho de um @ 1x imagem, por exemplo

@ 1x - 50x50px tamanho normal

@ 2x - 100x100px 2x o tamanho de @ 1x

@ 3x - 150x150px 3x o tamanho de @ 1x

Ao criar imagens de resolução múltipla, é comum aplicar um sufixo de texto no nome do arquivo para as resoluções mais altas, para que possam ser facilmente identificados, por exemplo

• minha-imagem.jpg

• minha-imagem@2x.jpg

• minha-imagem@3x.jpg

Aplicação de várias resoluções

Depois de criar suas imagens nos três tamanhos de resolução necessários (@1x, @2x e @3x), Blocs torna muito simples implementá-los.

Configuração Automática

Enquanto todos três variações da sua imagem têm o mesmo nome e os votos de @ 2x e @ 3x o sufixo é aplicado aos seus nomes (quando aplicável), quando você aplica a imagem de resolução padrão a uma imagem Bric, as versões de resolução mais alta também serão aplicadas automaticamente.

Configuração manual

Se seus ativos de imagem de multi resolução não tiverem nomes correspondentes, você poderá aplicar manualmente cada resolução de um ativo a uma imagem Bric, usando os controles do inspetor. Basta selecionar a imagem na tela de design Clique com o botão esquerdo e navegue até as opções do inspetor da barra lateral. Na seção rotulada Data, há um controle segmentado de 3 vias com cada opção rotulada @ 1x, @ 2x e @ 3x. Clique com o botão esquerdo qualquer uma das 3 opções definirá as opções de imagem para a resolução alvo. Agora se você Clique esquerdo a miniatura da imagem localizada diretamente abaixo do controle segmentado, você será solicitado a selecionar o arquivo de imagem específico a ser mostrado nessa resolução.

Agora você pode aplicar imagens adicionais para ambos @ 2x e @ 3x, essas imagens adicionais serão veiculadas a um visitante se ele tiver um dispositivo com densidade de pixels mais alta.

 

As imagens parecem desfocadas em Blocs

Se você está correndo Blocs em uma tela de alta resolução, você pode notar que as imagens podem parecer desfocadas. Isso se deve ao fato de dentro do ambiente de design Blocs exibe a versão sem retina de uma imagem na tela de design. Ao entrar no modo de visualização ou exportar seu site, você deve notar que a variação de alta resolução da imagem agora é exibida corretamente.

Atualizado em 12 de dezembro de 2023

Esse artigo foi útil?

Artigos Relacionados