16 de julho de 2012 HTML/CSS

Retina.js – Imagens para telas retina

Mostre imagens de alta qualidade em dispositivos retina sem muito trabalho.

Nós já falamos sobre como as imagens de seu website podem aparecer em dispositivos que utilizam tela retina ou com telas HD. Até hoje não havia nenhuma alternativa de verdade para você poder fazer um chaveamento automático, até a chegada do Retina.js.

O Retina.js é um script em javascript que te ajuda a entregar as imagens corretas para os dispositivos corretos sem muita dor de cabeça.
Quando os usuários carregam a página, o retina.js checa se há uma versão de alta resolução para cada imagem do site no seu servidor. Se houver uma variação da imagem em alta resolução, o script irá mostrá-la.

Por exempo, se você tem uma imagem na sua página assim:

<img src="img/destaque.png">

O script procura no servidor se há uma alternativa dessa imagem no mesmo caminho da imagem original, assim:

<img src="img/[email protected]">

Logo, você só precisa criar uma imagem em alta qualidade, colocar o nome dessa imagem igual a da imagem original (de baixa qualidade) seguido do “@2x“.

Para instalar é simples e indolor.
Basta colocar a chamada do script lá embaixo, antes de fechar o body e pronto.

<script type="text/javascript" src="retina.js"></script>

Com certeza podia ser incluído na Modernizr.

Leia mais e faça o download do script aqui.

Dorian Sampaio

Muito útil :]
Atimoda

É útil, mas ainda não acho que seja a melhor implementação pois há alguns malefícios em nome da facilidade:

1 – o navegador primeiro baixa as imagens em qualidade “normal”, o que é um desperdício de banda

2 – há um desperdício de processamento pois é um javascript a mais desnecessário

3 – a imagem de qualidade normal aparece “borrada” em telas retina, e a imagem aparece dessa maneira até que a imagem de qualidade “retina” seja baixada, o que leva uns bons segundos, dependendo do peso da página.Usando o método via css background, o navegador só faz download da imagem retina, o que evita esses 3 problemas. Mas infelizmente é muito mais trabalhoso implementar via css…
VitorGGA

Gambi
Chris Benseler

Não vi o demo do plugin, mas estava pensando nessa questão do cliente baixar a imagem @1x e depois, a @2x. Talvez seria mais performático detectar o user-agent e com uma linguagem de script no server-side fazer esse tratamento, já deixando no output html a chamada ao source da imagem com o caminho correto…
Taciara Furtado

hahaha Isso salvou meus estudos!! Obrigado Diego pela atenção nos e-mail e a rapidez nas respostas.
o link me ajudou bastante.
http://twitter.com/sidimar sidimar

Interessante, o que você costuma usar como alternativa?
http://twitter.com/jofelipe_ Jonathan Felipe

Usem SVG, simples assim
Pingback: Retina Display x Telas Atuais | salaprivada
http://www.facebook.com/kilianolopes Kiliano Lopes

nem sempre rola svg, ainda é incompatível com alguns navegadores mobile, fora q nem sempre é interessante vc deixar um arquivo em vetor disponível pra quem quiser baixar né. Contratei um ilustrador pra um projeto, se as ilustras dele caem em vetor na web, é problema =p
http://twitter.com/jofelipe_ Jonathan Felipe

Isso é verdade, por exemplo, o navegador padrão do Android não suporta, daí eu coloco uma imagem em PNG mesmo como polyfill!
http://www.facebook.com/neto.joaobatista João Batista Neto

Se eu tiver 500 imagens, serão 500 requisições HTTP extra, retornando 404 e consumindo banda do usuário.
Caio Costa

Modernizr é fallback, não criador de firulas.

Tableless

Retina.js – Imagens para telas retina

Mais artigos