Redimensionar gráficos e fotos para iPad e iPhone

O redimensionamento de imagens da web para exibição no iPad e iPhone é importante por duas razões: As imagens devem ser pequenas o suficiente para exibir bem em um monitor de computador e para baixar rapidamente para o computador de um usuário. Quanto menor for a imagem, mais rápido ele vai baixar.

Embora seja possível alterar o tamanho de exibição de uma imagem em uma página da web, alterando as configurações de altura e largura em Dreamweaver ou qualquer outro editor de web, você obtém resultados muito melhores se você não alterar o tamanho físico da imagem em um programa de editor como o Photoshop.

Quando você alterar a altura e largura de uma imagem no código HTML, você simplesmente instruir um navegador da Web para exibir a imagem em um tamanho diferente. Infelizmente, os navegadores não fazem um bom trabalho de redimensionamento de imagens porque os navegadores não mudar a imagem em si, mas apenas forçá-lo para caber no espaço atribuído quando o navegador carrega a página.

Se você definir a imagem para exibir maior do que seu tamanho real, a imagem é provável que olhar fora de foco ou distorcido porque a imagem não contém pixels suficientes para todos os detalhes para uma boa aparência em um tamanho maior. Se você definir o código para exibir a imagem menor do que é, a imagem é provável que olhar esmagado e seus usuários devem baixar uma imagem maior do que o necessário.

Reduzir o tamanho de uma imagem para uso na web requer duas etapas. Primeiro, você reduzir a resolução de uma imagem, que altera o número de pixels na imagem. Quando você está trabalhando com imagens para a web, que pretende reduzir a resolução de 72 pixels por polegada (ppi).

Segundo, você reduzir o tamanho físico da imagem, reduzindo suas dimensões. Você quer o tamanho de suas imagens para se encaixam bem em uma janela do navegador e trabalhar dentro do design do seu site.

Siga estes passos para diminuir a resolução e reduzir o tamanho de uma imagem no Photoshop (em Photoshop Elements ou Fireworks, você seguir um processo semelhante, embora os passos específicos podem variar):

1

Com uma imagem aberta no Photoshop, escolha Imagem-Resize.

A caixa de diálogo Tamanho da Imagem abre.

Se você não quer que sua imagem original de perder qualidade (ou você só quer jogar pelo seguro), faça uma cópia de sua imagem e redimensionar a cópia para o seu site.

2

Para alterar a resolução da imagem, primeiro desmarque a caixa de seleção Resample Imagem na parte inferior da caixa de diálogo Tamanho da imagem.

Para melhores resultados, desmarque a caixa de seleção sempre Resample Imagem quando você alterar a resolução. Para melhor preparar imagens para a web, alterar a resolução de 72 ppi para que eles download mais rápido.

3

Clique e arraste para realçar o número no campo resolução e substituí-lo, digitando o número 72.

As dimensões de largura e altura irá redimensionar automaticamente.

4

Clique para selecionar a caixa de seleção Imagem Resample.

Com a caixa de seleção Imagem Resample desmarcada, você não pode mudar as dimensões de pixel por isso deve ser verificado quando você mudar o tamanho da imagem.

5

Insira uma altura e largura para a imagem nos campos altura e largura.

Se a caixa de seleção Restringir proporções na parte inferior da caixa de diálogo é selecionado (como é neste exemplo), todas as alterações feitas à altura afeta automaticamente a largura (e vice-versa) para garantir que as proporções da imagem permanecem constantes. Se você quer mudar a imagem e não manter as proporções, você pode desmarcar esta caixa.

Ao redimensionar uma imagem no Photoshop na área de Pixel Dimensions, você pode especificar o novo tamanho em pixels ou como uma porcentagem do tamanho original.

Imagens de artistas Amy Baur e Brian Boldon, de arte inplainsight.

6

Clique em OK para redimensionar a imagem.

Se você quiser retornar a imagem ao seu tamanho anterior, escolha Editar-Undo. Tenha em atenção que quando você salvar a imagem, as alterações tornar-se permanente.

menu