Para começar é preciso saber o que significa “Retina Ready”. Este é um termo criado pela Apple com o advento do iPhone 4, e está relacionado ao tamanho do display do iPhone 4 que é de 3,5 “, com uma resolução de 960x 640 pixels. Nesta resolução, a uma distância de visualização ideal em que o olho humano se esforça para distinguir pixels individuais, assim a tecnologia é marcada aqui na tela retina.

Outra descrição sobre a retina é que tecnicamente deveríamos chama-la de HiDP, já que retina é faz parte da anatomia do corpo humano. Por isso, completando a informação acima cada tela de retina é uma exposição HiDPI, mas não todas as exibição HiDPI são um display de retina .

Atualmente a Apple é a empresa que mais aposta nessa tecnologia.

Mas sem ser muito técnico, “Retina Ready” significa que os dispositivos de exibição irão mostrar mais pixels por polegada quadrada, o que resulta em imagens mais nítidas. Um pixel no dispositivo é a menor unidade física em uma exibição; há também diferentes tipos de pixels , bitmap , CSS etc. Em dispositivos de retina as imagens são obrigadas a terem resoluções mais altas.

 

retina readyPor que devemos estar preparados para o “Retina Ready”

 

Um site programado para “Retina Ready” irá exibir imagens mais nítidas e vivas. O objetivo da “Retina Ready” é melhorar a experiência do usuário e fazer com que a qualidade da imagem da tela e da impressão sejam a mesma.

Se seu site ainda não está preparado para “Retina Ready”, não se preocupe, um bom designer pode ajudar na atualização das imagens e conteúdo para essa tendência. Boas técnicas e algumas ferramentas podem contribuir para melhorar a visualização e navegabilidade do seu site.

Porém, se a ideia for iniciar um site do zero, certifique se já atende a essa nova exigência.

 

Como transformar seu site para o “Retina Ready”

 

Algumas dicas simples:

 

  1. O primeiro passo é fazer as imagens do site dobrarem de tamanho. Um exemplo: ter uma imagem de 500x500px, ao invés de uma de 250x250px. Para isso acompanhe a escala para baixo via a largura e altura em HTML. A desvantagem óbvia é o tamanho maior arquivo e, portanto, mais tempo de carregamento em dispositivos não HiDPI .

 

  1. Se seu site foi feito com WordPress, a boa noticia é que existe um plugin que pode ajuda-lo a criar versões melhoradas das imagens que já estão na biblioteca do site. Um arquivo JavaScript seleciona qual a imagem deve ser usada, de acordo com o dispositivo utilizado pelo usuário.