HTML & CSS para iniciantes (Parte 09): Gráficos para web (01)

Ao salvar imagens em um programa gráfico, diferentes formatos de imagem são oferecidos. Mas qual deles deve ser escolhido ao incorporar a imagem em um site?



Quando se deseja apresentar uma imagem em um site, tem-se a escolha entre três formatos.

• GIF

• JPEG

• PNG

Mas qual formato escolher para qual finalidade? Deve-se optar por GIF ou PNG para fotos? Primeiramente, uma breve visão geral das capacidades de cada formato.

Esta pequena visão geral já demonstra as diferentes propriedades dos formatos. Por isso, não é surpreendente que certos formatos sejam mais adequados para determinadas finalidades do que outros. É exatamente esse o ponto abordado na próxima seção. Lá será mostrado quando é melhor utilizar cada formato.

Fotos

Sem dúvida, para fotos, utiliza-se o JPEG. Pois nele as imagens podem ser comprimidas de forma excelente, com a qualidade podendo ser variável. Aqui se encontra o equilíbrio adequado entre qualidade e taxa de compressão.

Capturas de tela/Diagramas

Para isso, o formato PNG é o mais adequado. O PNG também é interessante para desenhos técnicos, plantas baixas, etc. O PNG também pode ser usado em imagens que possuem áreas transparentes.

Fontes/Logotipos

Se o logotipo tiver texto ou se quiser representar texto, deve-se usar GIF ou PNG. No entanto, devido ao melhor desempenho, normalmente se opta pelo PNG. O JPEG é inadequado para a exibição de texto, pois as bordas são exibidas de forma imprecisa.

Transparência

Quando se trata da exibição de áreas transparentes, o JPEG é descartado de imediato. Restam, portanto, GIF e PNG. Mas qual desses formatos usar quando se trata de transparência? Embora o GIF possa lidar com transparência, os resultados geralmente são imprecisos. Um pixel no formato GIF pode ser completamente visível ou completamente transparente. Isso não ocorre com PNG. Este formato possui um canal alfa adicional, permitindo alcançar resultados de transparência mais refinados.

Incorporando Imagens

As imagens podem ser incorporadas usando o elemento img. (Por favor, percebam que as imagens são frequentemente incorporadas através de CSS. Informações detalhadas sobre CSS seguirão naturalmente. O método HTML mostrado é completamente conforme aos padrões e pode ser usado sem preocupações em HTML5.)

<img src="logo.png" alt="PSD-Tutorials.de" />

No elemento img, trata-se de um elemento independente. Através dos atributos correspondentes, a imagem pode ser descrita em detalhes. O atributo mais importante é, sem dúvida, src. Pois é através dele que se especifica a imagem a ser incorporada. No exemplo mostrado, supõe-se que a imagem logo.png esteja no mesmo diretório do arquivo HTML no qual o elemento img foi definido.

Para que as imagens sejam realmente exibidas, o caminho para elas deve ser especificado corretamente. O HTML oferece várias opções para referenciar as imagens.

• Caminhos absolutos

• Caminhos absolutos relativos ao endereço base

• Caminhos relativos aos endereços base

Primeiramente, sobre os caminhos absolutos. Esta opção é normalmente utilizada quando a imagem não está no servidor próprio. Por exemplo, se desejam incorporar o conhecido borboleta do PSD-Tutorials.de ao site, teoricamente poderiam carregá-lo diretamente do servidor em que se encontra. Primeiramente, determine o caminho da imagem. O procedimento mais fácil é clicar com o botão direito do mouse sobre a imagem no navegador e selecionar Copiar URL da imagem.

O que é carregado para a área de transferência deve parecer algo assim no final:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Este é o endereço completo da imagem. Esta informação já é suficiente para incorporar a imagem.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

É atribuído ao atributo src o caminho completo da imagem.

O problema desses caminhos absolutos é que, no final das contas, não se tem um controle real sobre o conteúdo incorporado. Se a imagem referenciada por você for excluída do servidor ou movida para outro diretório, haverá um erro de exibição.





Portanto, esse tipo de referência absoluta deve ser a exceção.

Caminhos absolutos relativos ao endereço base

Essa opção é sempre a mais indicada quando a imagem está no mesmo computador/servidor que o arquivo HTML e é acessível pelo protocolo atual. Isso pode parecer complicado, mas não é.

Um exemplo:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Essa é a URL completa. A parte seguinte é o caminho absoluto.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Esse caminho absoluto é relativo ao endereço base http://4eck-media.de.

Caminhos relativos ao endereço base

A opção que será apresentada agora é a mais comum. Sempre é considerado o caminho atual como ponto de referência para a endereçagem final. Alguns exemplos para ilustrar isso. Digamos que exista o arquivo index.htm, no qual você deseja inserir uma imagem. Além disso, na mesma hierarquia de pastas, existe o diretório imagens, onde a imagem em questão está localizada.

index.htm
images
--logo.png

O chamada no atributo src seria a seguinte:

src="images/logo.png"

Como seria se a imagem estivesse em um diretório acima do arquivo HTML?

projeto
--images
-----logo.png
--arquivo
-----index.htm

Nesse caso, o index.htm está em um diretório abaixo da imagem a ser incluída logo.png.

src="../images/logo.png"

A sintaxe significa aqui: suba um nível, vá para o diretório images e mostre o logo.png.

projeto
--images
----logo.png
----2013
------january
--------index.htm

Nesse caso, a sintaxe seria a seguinte:

src="../../images/logo.png"

A imagem logo.png está duas camadas acima do index.htm no diretório images.

A vantagem dos caminhos relativos é a flexibilidade. Você pode desenvolver o projeto localmente e depois copiá-lo para um servidor "real". Os caminhos permanecem inalterados.