Já passou algum tempo desde que os monitores Retina em dispositivos iOS foram lançados, mas ainda há muitos sites que não estão prontos para Retina, mesmo que os designers e desenvolvedores tenham se concentrado nos fatos de um dispositivo móvel totalmente responsivo. mundo amigo.
Veja o que você precisa saber sobre as opções para tornar seu trabalho mais atraente nos monitores Retina cada vez mais comuns. A boa notícia é que, por mais assustador que pareça, não é tão complicado assim.
$config[code] not foundPreparando seu site para imagens prontas para retina
Dobre sua diversão
Na verdade, existem várias maneiras de você descascar esse gato, por assim dizer. No primeiro, você precisará aprimorar um pouco o seu CSS e incluir versões de suas imagens com o dobro da resolução normal. O CSS determinará qual imagem exibir com base no dispositivo em que seu site está sendo visualizado.
As atualizações de CSS que você precisará variam dependendo dos navegadores de destino, mas a boa notícia é que isso não é muito complicado agora e está ficando mais fácil. Deixaremos a codificação real para outro dia.
Uma coisa a ter em mente: você pode querer desenvolver uma convenção de nomenclatura para suas imagens de retina, de modo que você possa associar facilmente as duas versões de uma imagem, caso elas precisem ser editadas posteriormente.
SVG
Outra abordagem é SVG ou Scalable Vector Graphics. Como o nome indica, eles são limitados a gráficos vetoriais e não funcionam com imagens fotográficas, mas os gráficos SVG eliminam a necessidade de dois arquivos de imagem para cada gráfico em seu site. Novamente, há variações do navegador para o navegador, portanto, você precisará fazer pesquisas adicionais, dependendo das suas necessidades.
E, como mencionado acima, o SVG provavelmente não funcionará como sua única solução na maioria dos sites, a menos que o site não contenha imagens do tipo foto.
Força bruta
Claro, você também pode simplesmente descarregar os arquivos de baixa resolução e apenas exibir as imagens prontas para Retina. Recomendamos apenas isso para usos com um público bem definido. Se você sabe que a largura de banda não será um problema, essa pode ser a rota certa, mas certamente não é uma prática recomendada
Outras soluções de codificação
No outro extremo do espectro de esforço e elegância estão os métodos de codificação que dependem de algumas mudanças do lado do servidor (como entradas de arquivo.htaccess) juntamente com codificação PHP e Javascript.
Essa pode ser sua melhor abordagem, embora o esforço envolvido possa não valer a pena para projetos menores.
No geral, a abordagem adotada dependerá do seu público-alvo, da natureza dos recursos visuais do seu site e do nível de especialização técnica de sua equipe de desenvolvimento. Existe uma boa solução para praticamente todas as situações. A única solução ruim é ignorar completamente os displays Retina.
NASDAQ Foto via Shutterstock
