Imagens HTML

Embora o texto fará com que a maior parte do conteúdo de um site, por vezes, as imagens podem dizer mais do que mil palavras ou adicionar um tempero especial para o design do site. Felizmente é muito fácil de implementar imagens em HTML.

Image tag

Para carregar as imagens em um documento HTML que você pode usar a tag de imagem <img src="..." width="" height="" alt="..." /> . Note que é uma auto-tag de fechamento, portanto, não se esqueça do espaço e barra no final. Parecido com o atributo href do HTML links do atributo src (source) contém o endereço absoluto ou relativo para um arquivo de imagem.

A largura e altura atributos opcionais definir o tamanho da imagem em pixels e podem ser configurados para os mesmos valores exatos como a origem da imagem ou para um valor maior ou menor escala para a imagem. Embora esses atributos não são necessários, você deve sempre tentar usá-los, caso contrário, o navegador da Web terá de calcular o tamanho da imagem ao carregar a página, que pode causar o conteúdo para saltar ao redor.

O atributo alt (texto alternativo) descreve o conteúdo da imagem e é exibida no caso de a imagem não carregar. Note que o alt é necessário para cada tag de imagem, para ser válido XHTML 1.0 estrito. Se você não deseja fornecer um texto alternativo que você pode simplesmente colocar alt="" . Se possível, você deve sempre fornecer uma descrição da imagem que irá ajudar as pessoas com deficiência que utilizam leitores de tela ou mecanismos de busca como o Google para saber o que sua imagem está em causa.

Imagem HTML

Saída

Links das imagens

Avançar para links de texto você também pode usar links de imagens ou uma combinação de ambos.

HTML link de imagem

Saída

Formatos de imagem

Embora este seja mais adequado em detalhe para uma web graphics tutorial, é sempre bom conhecer os diferentes tipos de formatos de imagem você pode usar. A maioria dos navegadores suportam os seguintes 3 tipos de imagem:

GIF

GIFs pode conter no máximo 256 cores (também chamado de uma paleta de cores) de todos os milhões de cores que você computador pode mostrar. Eles são usados melhor para não-gráficos realistas, como botões, desenhos e logotipos.

Tendo apenas cores limitadas torna estes arquivos de imagem relativamente pequeno no tamanho, que é sempre uma coisa boa. Também é possível especificar pixels transparentes, o que significa que em vez de uma cor nada será desenhado deixando a mostra por meio de fundo.

Eles também suportam animação GIF, armazenando múltiplos quadros e reproduzindo-os como uma seqüência. Não é tão amplamente utilizado mais, porém, agora que o Flash mainstream é muito bonito.

JPEG

JPEGs apoiar 16,7 milhões de cores e são, portanto, mais adequado para fotografias realistas. A qualidade da imagem pode variar de excelente a muito ruim, dependendo das definições de compressão. Tente encontrar um equilíbrio entre o tamanho ea qualidade do arquivo em formato grande fará com que o seu site para carregar lentamente.

PNG

PNGs são um formato um pouco mais recente na paisagem web design e são pensados para substituir GIFs (se bem compactado, um PNG palettized deve sempre ser menor no tamanho do arquivo que o seu homólogo GIF). Eles apóiam as paletas de cores como GIFs, bem como 16,7 milhões de cores, como JPEG, embora, ao contrário JPEGs, PNGs usar compressão sem perdas, que mantém 100% da qualidade da imagem original.

A característica talvez mais interessante é o seu suporte para transparência alfa. Cada pixel pode ter sua própria transparência que varia de 0 a 100% (ao contrário dos GIFs onde um pixel é transparente ou opaco) permitindo efeitos interessantes, como anti-aliasing (bordas lisas contra qualquer cor de fundo). É apoiada em todos os navegadores modernos (Firefox, Opera, Safari, IE7). Infelizmente IE6 não reconhece nativamente a transparência alfa, embora existam algumas soluções aceitáveis.