Tamanhos de imagens em IOS - Developer

Trabalhar com imagens de forma correta no IOS torna o aplicativo muito mais profissional.Então fornecer a todos os dispositivos imagens de alta resolução independente da resolução da tela do usuário é essencial para o sucesso dos nossos aps.

Ao entrar no Xcode e acessar a pasta Assets vamos perceber que existe uma configuração para as imagens que você importar para o projeto, elas vão ter o campo 1x 2x e 3x, e é importante entender o conceito desses campos saber e o seu significado.

Para que você entenda da melhor forma possível vamos pegar o próprio exemplo que o site de developer da Apple fornece.

O sistema de coordenadas que o iOS usa para colocar o conteúdo na tela é baseado em medições em pontos, que são mapeados para pixels na tela. Um monitor de resolução padrão tem uma densidade de pixels de 1: 1 (ou @ 1x), onde um pixel é igual a um ponto. Os monitores de alta resolução têm uma densidade de pixels mais alta, oferecendo um fator de escala de 2,0 ou 3,0 (referido como @ 2x e @ 3x). Como resultado, os monitores de alta resolução exigem imagens com mais pixels.

Resumindo 1x – Resolução Padrão2x – Resolução Alta – Exige imagens com mais pixel3x – Resolução Alta – Exige imagens com mais pixel Por exemplo, suponha que você tenha uma imagem de resolução padrão 50px × 50px em 1xEm 2x você utilizaria a imagem com a resolução de 100px × 100pxEm 3x você utilizaria a imagem com a resolução de 150px × 150px

Em qual dispositivo utilizo @1x – @2x – @3x ?

Aqui estão as resoluções que alguns dispositivos utilizam, segundo a própria Apple.
1x ou @1x

Praticamente nenhum dispositivo trabalha mais com essa resolução.

2x ou @2x

iPhone XR
iPhone 8
iPhone 7
iPhone 6s
iPhone SE
12.9″ iPad Pro
11″ iPad Pro
10.5″ iPad Pro
9.7″ iPad
7.9″ iPad mini 4

3x ou @3x

iPhone XS Max
iPhone XS
iPhone X
iPhone 8 Plus
iPhone 7 Plus
iPhone 6s Plus

Site para gerar imagens corretamente

Como vimos parece um pouco complexo trabalhar com as imagens, mas não se preocupe existe uma forma de gerar as resoluções das imagens de forma automática e online, abaixo esta o link do site MakeAPPIcon que faz todo o trabalho para você.

Site: https://makeappicon.com/

Passo 1 – Ao acessar o site você irá fazer o upload da imagem (quanto maior for a resolução da imagem melhor).

Passo 2 – Depois do upload irá aparecer algumas perguntas sobre o seu app, mas não precisa preencher o campos é só clicar em next.

Passo 3 – Depois dos nexts irá aparecer a visualização dos ícones tanto para IOS como para Android. Nessa mesma janela vai ter um campo para inserir o seu e-mail e um pequeno botão na frente, ao clicar no botão irá enviar os arquivos no seu e-mail.

Passo 4 – Ao clicar para enviar por e-mail, irá aparecer uma opção para compartilhar pelo facebook que você está usando a ferramenta, caso não queira é só escolher a opção No thanks. I won’t help, e pronto é só acessar seu e-mail que você ira ter as resoluções da sua imagem para Android e IOS.

Para ver o passo a passo recomendo que assista logo abaixo o nosso vídeo no Youtube.