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ê pode 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 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.
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.