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:
O script procura no servidor se há uma alternativa dessa imagem no mesmo caminho da imagem original, assim:
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.
Com certeza podia ser incluído na Modernizr. 🙂
Leia mais e faça o download do script aqui.