1. Casa
  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 3 tamanhos necessários, Blocs torna muito simples adicioná-los a um projeto para implementar o tamanho correto com base na densidade da tela do usuário.

Para adicionar várias resoluções para uma imagem Bric, 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 Dados, 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 15 de outubro de 2018

Esse artigo foi útil?

Artigos Relacionados