Navegadores da web modernos e sistemas de gerenciamento de conteúdo otimizam imagens para exibição em qualquer configuração. No entanto, é melhor preparar imagens otimizadas para cada fator de forma possível e local em que uma imagem pode aparecer. Concentre-se em três coisas: resolução da imagem, tamanho e espaço de cores.
Espaço de cores nas imagens
Os designers gráficos contam com dois espaços de cores primárias. Um espaço de cores é um método pelo qual as cores primárias se combinam para formar complexos arco-íris de cores.
Use o modo RGB ao preparar imagens para dispositivos móveis. As exibições em monitores de computador e smartphones contam com uma combinação de pixels vermelhos, azuis e verdes. Esta imagem RGB é otimizada para reproduzir com precisão as cores pretendidas em uma tela.
Para impressão, os designers usam um processo de quatro cores, onde cada cor destila uma combinação de ciano, magenta, amarelo e preto. Às vezes, imagens de quatro cores são chamadas de imagens CMYK por esse motivo.
Resolução de Imagem
As imagens, especialmente em plataformas móveis, devem ter o menor tamanho possível para equilibrar a qualidade com a velocidade de download em redes móveis e o tamanho do arquivo com os limites de dados móveis.
A maioria dos programas, incluindo os aplicativos Adobe Creative Cloud, oferece suporte a uma ferramenta Exportar para a Web que mostra a imagem em várias combinações de resolução e compactação. Escolha a imagem de melhor qualidade com o menor tamanho total.
Tamanho da imagem em pixels
Cada imagem deve ser dimensionada para sua finalidade. Aqui estão alguns exemplos de tamanhos de imagem para usos populares na web:
- Os anúncios de banner da Internet geralmente têm 468 pixels por 60 pixels.
- As imagens de capa do Facebook devem ter 851 pixels por 315 pixels.
- As fotos de perfil do Twitter devem ter 400 pixels por 400 pixels.
- As imagens para links compartilhados devem ter 1200 pixels por 630 pixels.
Quando você trabalha com fotos para fins específicos, verifique o local onde essa foto aparecerá (como um site de mídia social ou um blog) para verificar as dimensões ideais da imagem e, em seguida, dimensione adequadamente para evitar esticar ou aparar a imagem.
Para evitar pixelização, aponte para o tamanho real da tela. Mesmo que uma imagem seja dimensionada corretamente, se não for dimensionada corretamente, o produto resultante pode parecer pixelizado se a imagem precisar ser ampliada para atender ao espaço disponível.
Sobre imagens vetoriais
Imagens vetoriais - imagens que são computadas e desenhadas pelo dispositivo - geralmente são mais eficientes e de maior qualidade do que imagens raster (imagens desenhadas um pixel por vez) porque podem ser ampliadas e reduzidas sem afetar a qualidade da imagem. Para logotipos simples, arte de linha e gráficos, uma versão vetorial é ideal. Formatos vetoriais não são usados para fotos.
