Design Imagens para o iPhone e iPad

Tendo em imagens atraentes em seu site é uma das melhores maneiras de atrair para iPhone e iPad entusiastas imagem-consciente. Mas enfiando uma imagem de alta resolução que pode ser ampliada para tamanho de cartaz para uma tela de iPhone não faz sentido. Não só as fotos não são exibidos corretamente, mas o download de um arquivo que grande também seria necessário um tempo excessivamente longo e seus visitantes provavelmente abandonar seu site.

Ao invés de visitantes de força para transferir imagens grandes na página inicial do seu site móvel, que os usuários do iPhone poderia acessar, você deve garantir que seus projetos honrar as restrições sob as quais os usuários trabalho.

Se você pretende colocar imagens no seu site móvel, o processo de design vai mais suave se você tem uma estratégia para lidar com as diferentes relações de tamanhos de tela, resoluções e de aspecto.

  • Dimensionando uma imagem para caber duas telas: Uma maneira prática e economia de tempo para criar imagens otimizadas para trabalhar tanto no iPhone e iPad é criar uma imagem web otimizado que parece ser bom em ambos os dispositivos.

    Não é uma ciência perfeita, mas tanto o iPad e iPhone 4 tem tão grandes para o futuro monitores que você pode redimensionar uma imagem para cima ou para baixo um pouco e ele ainda pode olhar muito bom. Embora este método não é infalível, criando uma imagem otimizada é a opção mais simples, e ele vai trabalhar para muitos sites.

  • Usando vários tamanhos de imagem: Se você tem os recursos eo tempo, a melhor solução é adequar um site para as capacidades de cada dispositivo e tamanho da tela.

    Usando essa abordagem, você criar várias versões de cada imagem em tamanhos diferentes, desde 320 pixels de largura de 1024 pixels (se você quiser a imagem para esticar na tela do iPad no modo paisagem). Então você entregar o tamanho que melhor se encaixa o dispositivo com algum tipo de script de detecção de dispositivo.

    Porque a criação de um script de detecção de dispositivo é complexo e criar várias versões de cada imagem adiciona um monte de trabalho para o site médio, muitas pessoas usam serviços, tais como Galleria, para criar rapidamente apresentações de slides com muitas imagens que são otimizados para cada dispositivo como eles são entregues.

  • Exibindo carteiras ou galerias de imagens: Se você projetar sites de carteira - onde a questão toda é para capacitar os clientes para mostrar o seu trabalho em qualquer lugar, a qualquer momento (e para olhar seu melhor absoluto) - você pode ter uma necessidade legítima para incluir imagens em alta resolução com tamanhos de arquivo maiores.

    A melhor maneira de lidar com esta situação é criar uma página com miniaturas de baixa resolução ou descrições de texto curto e, em seguida, conectar-se a as imagens maiores. Você pode ver um exemplo desta abordagem no arte inplainsight site. Como mostrado na figura, as miniaturas no topo da página ligação para versões maiores, tal como mostrado na página abaixo dela.

    Desta forma, suas páginas mais importantes carregar rapidamente com pequenas versões de suas imagens que todos os seus visitantes podem ver, e aqueles que estão interessados ​​em imagens de alta resolução pode optar por baixar as versões maiores, um de cada vez.

Você tem muitas maneiras de criar galerias que trabalham tanto no iPhone e iPad. O conceito principal a lembrar é não usar o Flash.

Como você projetar galerias como estes, lembre-se que uma das diferenças entre um navegador web em um computador desktop e um ecrã táctil é que você não pode rolar uma imagem com um rato em um iPhone ou iPad. Em vez disso, eventos de capotamento, como aqueles comumente usado com uma galeria de imagens, são convertidos em links em um iPad ou iPhone.

menu