É provável que em alguma ocasião já tenhamos encontrado com a
necessidade de dividir uma imagem em vários pedaços por diversos
motivos. Por exemplo, para realizar um desenho de página avançado
ou para dividir uma imagem muito grande em vários pedaços, com o
objetivo de que se carregue mais rapidamente. Este é justamente o
assunto que tratamos neste artigo, que descrevemos mais detalhadamente a
seguir.
Às vezes temos uma imagem muito grande, com o logotipo da empresa e uma
composição de fotografias ou outros elementos gráficos. Essa imagem
muito grande pode demorar muito para carregar e se está, por exemplo, na
página inicial, poderia ocorrer de um visitante ficar impaciente e não
chegar a ver carregar a imagem, abandonando o site web por culpa de um
carregamento muito lento. Uma das possibilidades para melhorar o
carregamento e fazer com que o visitante possa ver alguma coisa antes da
imagem terminar de carregar por completo, consiste em partir a imagem
em vários pedaços. Deste modo, é muito provável que alguns pedaços se
carreguem antes de outros e que o visitante possa ver partes da imagem
que vão aparecendo, mesmo que a imagem completa ainda não possa ser
visualizada.
Esta é uma técnica bastante habitual que com certeza muitos já devem ter
visto em diversas páginas web. Quando eu vejo uma destas imagens
partidas, muitas vezes, espero até que se carregue inteira, para ver o
resultado completo. Outras vezes, graças a uma imagem que se descarrega
partida em vários pedaços, também entendo que a página está carregando
corretamente e pode que não seja necessário visualizá-la inteira antes
de clicar qualquer link de meu interesse.
Como partir uma imagem em vários pedaços facilmente com PhotoshopAdobe Photoshop, um dos melhores programas de retoque fotográfico,
contem uma ferramenta para fazer setores que nos pode servir para partir
uma imagem facilmente. Na imagem seguinte podemos ver qual é esta
ferramenta.
Com a ferramenta de setor podemos definir diversos pedaços ou setores em
uma imagem. Para isso faremos um ou vários quadrados com a ferramenta,
de maneira similar como fazemos uma seleção. Os setores se configurarão
automaticamente para que a imagem fique dividida como desejamos. Por
exemplo, se fazemos um setor com a metade de uma imagem, automaticamente
se criará outro setor para a outra metade da imagem.
Vale a pena experimentarmos um pouco com a ferramenta para criar setores
de distintas formas. Quanto mais simples seja a configuração dos
setores, mais simples será o código fonte da página resultante. Por
exemplo, na imagem seguinte podemos ver como definiram 8 setores,
dispostos em 4 filas e 2 colunas.
Continuamos com o passo "salvar a imagem otimizada como", que se
encontra no menu de arquivo. Então nos aparecem 4 cópias da imagem, uma a
original e as outras 3 com distintas configurações da imagem,
otimizadas mais ou menos em tamanho, cores, qualidade, etc. Nessa janela
podemos selecionar uma das 3 possíveis otimizações, configurada como
nós desejarmos, e selecionar a opção que põe "salvar HTML e imagens
*.html". Com isso se salvará um código HTML e um diretório com as
imagens geradas para cada um dos setores, otimizadas tal como nós
escolhemos. Este passo pode ser visto na seguinte imagem.
Com isso vamos conseguir, tal como havíamos adiantado, um código HTML
que terá uma tabela e em cada campo da tabela uma imagem com cada setor,
tal como foi configurado com a ferramenta de setores.
A tabela terá esta forma. Este código foi gerado com Photoshop, o escrevemos tal como aparece.
- Código:
-
<TABLE WIDTH=580 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="Images/exemplosetores_01.jpg" WIDTH=294 HEIGHT=123 ALT=""></TD>
<TD>
<IMG SRC="Images/exemplosetores_02.jpg" WIDTH=286 HEIGHT=123 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Images/exemplosetores_03.jpg" WIDTH=294 HEIGHT=127 ALT=""></TD>
<TD>
<IMG SRC="Images/exemplosetores_04.jpg" WIDTH=286 HEIGHT=127 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Images/exemplosetores_05.jpg" WIDTH=294 HEIGHT=139 ALT=""></TD>
<TD>
<IMG SRC="Images/exemplosetores_06.jpg" WIDTH=286 HEIGHT=139 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Images/exemplosetores_07.jpg" WIDTH=294 HEIGHT=111 ALT=""></TD>
<TD>
<IMG SRC="Images/exemplosetores_08.gif" WIDTH=286 HEIGHT=111 ALT=""></TD>
</TR>
</TABLE>
Como otimizar os distintos setoresComo dizíamos, Photoshop oferece a possibilidade de otimizar a imagem a
mostrar em base a vários fatores, por exemplo poderemos decidir entre
utilizar o formato GIF ou JPG, assim como definir as cores a utilizar no
GIF ou na qualidade do JPG.
Para isso, uma vez dentro da opção "salvar otimizada como" devemos
selecionar qual setor queremos otimizar (isto se faz com a ferramenta de
selecionar setor, que se encontra acima à esquerda) e definir as opções
de otimização na parte de cima à direita.
É muito habitual que desejemos aplicar a mesma otimização a toda à
imagem, ou seja, salvá-la toda, por exemplo, como JPG e com qualidade
20. Para isso deveríamos selecionar setor a setor e aplicar os mesmos
valores de formato, ou também selecionar todos os setores de uma vez
para aplicar uma vez só os valores de otimização da imagem. Este último
pode ser visto passo a passo na imagem a seguir.
Passo 1: selecionamos a ferramenta de zoom para tornar a imagem menor.
Com o botão direito podemos marcar que desejamos que a imagem seja um
25% do tamanho original, ou o que for necessário para ver a imagem
inteira na pré-visualização.
Passo 2: com a imagem de tamanho reduzido, para que se possa selecionar
todos os setores de uma vez, marcamos a ferramenta de setor, que se
encontra na parte esquerda da janela.
Passo 3: com a ferramenta de selecionar setores fazemos uma seleção de
todos os setores da imagem. Com isso poderemos aplicar de uma só vez as
propriedades de todos os setores da imagem.
Passo 4: Marcamos os valores de otimização desejados para todos os setores.
Uma vez definidas as características de otimização para todos os setores
vamos ao botão de "salvar" e selecionamos a opção "salvar HTML e
imagens *.html".
Com isso terminamos o trabalho. Obteremos um código e imagens que logo
poderemos incorporar facilmente dentro de nossa página web. Pode-se ver o exemplo em uma página a parte.
Nós otimizamos esta imagem a JPG, para poupar espaço, apesar desta
imagem -dadas suas características- teria ficado com maior qualidade
otimizada como GIF, mesmo que na prática nos ocupe mais espaço se
utilizamos uma posição de cores alta
