Tutorial Iniciante de HTML: Imagens

24 02 2008

Imagem numa página HTML

As coisas podem parecer um pouco chatas e paradas com toda esta formatação de texto. Mas, é claro, a web não é feita só de texto, ela é multimídia e a forma de mídia mais comum é a imagem.

A tag img é usada pra inserir uma imagem num documento HTML e sua sintaxe é essa:

<img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="Logo do HTML Dog" />

O atributo src diz ao navegador onde encontrar a imagem. Como na tag a, esse atributo pode ser absoluto, como o exemplo acima demonstra, mas geralmente é relativo. Por exemplo, se você criar sua própria imagem e salvar com o nome “minhaimagem.jpg” numa pasta chamada “imagens”, o código seria <img src="imagens/minhaimagem.jpg"...

Os atributos width (largura) e height (altura) são necessários porque se eles forem removidos, o navegador vai tentar calcular o tamanho da imagem enquanto ela carrega, ao invés de depois que a página carrega, o que significa que o layout do documento pode ficar se mexendo enquanto a página está carregando.

O atributo alt é uma descrição alternativa. Ele é usado por pessoas que não podem ou escolheram não ver as imagens (como deficientes visuais). É obrigatório na última versão do HTML.

Perceba que, como a tag br, a tag img não possui uma tag de fechamento, e fecha a si mesma, terminando com “/>”.

Tipos de Imagens

A construção de imagens pra web está um pouco fora do escopo desse minicurso, mas não custa nada explicar algumas coisas…Os formatos de arquivo mais usados para imagens são GIF, JPEG e PNG. Todos eles são formatos comprimidos, cada um feito pra uma situação diferente. GIFs não podem ter mais que 256 cores, mas elas mantém as cores da imagem original. Quanto menos cores você tiver na imagem, menor será o tamanho do arquivo.

Gifs devem ser usadas em imagens simples, com cores sólidas.

Exemplo de imagem gif

JPEGs usam um algoritmo matemático para comprimir a imagem, o que vai distorcer levemente o original. Quanto menor a compressão, maior o tamanho do arquivo, mas maior a qualidade da imagem. Uma imagem JPEG normalmente perde qualidade cada vez que a imagem é salva.

Jpegs devem ser usadas em imagens como fotografias, com muitas cores.

Paisagem

(foto por ecstaticist)

O PNG surgiu pra ser uma alternativa ao GIF melhor que ele – e é. O PNG consegue trabalhar com muitas cores e possui uma compressão eficiente (tanto quanto o JPEG) – e o arquivo não perde qualidade cada vez que é salvo. Além disso, o formato PNG suporta transparência.

Pngs são adequadas pra qualquer tipo de imagem.

Mesmo com todas essas vantagens, o ainda PNG não é tão comum quanto seus rivais, e o motivo disso é o Internet Explorer, que até a versão 6 não suportava corretamente PNGs transparentes, o que atrasou sua adoção.

Imagens provavelmente vão ser os maiores arquivos que um webdesigner principiante vai usar. É um erro comum ignorar o tamanho do arquivo das imagens, que pode ser extremamente grande. Páginas web devem carregar o mais rápido possível, e se você lembrar que muitas pessoas ainda usam modems que fazem download a menos de 7kb por segundo (na verdade menos de 5kb), você vai ver como um arquivo grande pode deixar mais lento o carregamento de uma página. E ninguém gosta de ficar esperando uma página. Você precisa encontrar um equilíbrio entre qualidade e tamanho do arquivo. A maior parte dos programas de manipulação de imagem permite a você comprimir imagens e o melhor jeito de descobrir qual a melhor solução pra você é tentativa e erro.

Páginas Relacionadas

Exemplos

Referência

BlogBlogs Tags: , , ,

Esse material é uma tradução do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

22 responses

29 02 2008
Evandro Myller

Cara, realmente esse foi um post muito util – nao q os outros nao tenham sido tb xD. vez ou outra vejo um site com uma img jpeg como plano de fundo pra um botao convencional ou algo do tipo. Ou entao vejo um png de 50kb+ pra um cabecalho numa pagina (ja passei por isso :P). entao, pquem tah comecando agora, esse ehum otimo post, e recomendo q comecem a partir de entao a trabalhar bem da qualidade vs. tamanho das imgs usadas numa pagina web.

29 02 2008
Elomar França

Obrigado!

E tomara mesmo que as pessoas leiam isso aqui (ou qualquer outro tutorial bom) antes de saírem por aí colocando cabeçalhos de 50kb.

2 05 2008
Mike

Eu não consigo inserir imagens do meu computador no documento HTML. Tentei inserir uma imagem bem simples (apesar de ser uma imagem grande e um pouco pesada), com o seguinte endereço:

C:\Documents and settings\documentos compartilhados\imagens compartilhadas\amostra de imagens\inverno.jpeg

Largura de 800 pixels (é grande, mas é só para teste)
Altura de 600 pixels

Tentei não só essa imagem, mas de vários endereços, tamanhos, entre outros, e não consigo inserir nenhuma imagem.

Como corrijo esse erro?

5 12 2012
boladao de amor

Ah mike

2 05 2008
Elomar França

Você pode usar esse código:

[img src=”C:\Documents and settings\documentos compartilhados\imagens compartilhadas\amostra de imagens\inverno.jpg”]

Acho que o erro é que você digitou inverno.jpeg, e o nome da imagem deve ser inverno.jpg

Espero que dê certo!

3 05 2008
Mike

Tudo bem que errei em escrever inverno.jpeg, e o certo deveria ser inverno.jpg

Mas, mesmo corrigindo o erro não consigo inserir nenhuma imagem que seja do computador, apenas imagens de sites da internet. Já tentei outras imagens, de outros endereços e também tentei usar os formatos GIF e PNG, mas nenhum deu certo.

Tentei uma imagem bem menor e de endereço mais fácil, a forma que escrevi a tag está abaixo. Por favor, poderia corrigir o problema?


[img src=”c:\trabalho.gif” width=”167″ height=”96″ alt=”Trabalho”/]

ps: onde há colchetes, utilizei os símbolos < e >

3 05 2008
Elomar França

Olá, Mike

O problema é que o atributo src aceita URIs, que são identificadores de recursos. Pra identificar um arquivo no seu computador, você precisa usar um uri no esquema

file:///c:/arquivo.gif

Como isso é bem estranho, é mais recomendável colocar a imagem na mesma pasta do documento HTML, e o “src” ficaria apenas

arquivo.gif

ou usar o caminho relativo, por exemplo

imagens/arquivo.gif

Espero ter ajudado.

7 05 2008
Mateus Pinheiro de Lima

mike tenta colocar na mesma pasta que tá o arquivo html e faz asssim :

vê se da
vlw

7 05 2008
Mateus Pinheiro de Lima

mike tenta colocar na mesma pasta que tá o arquivo html e faz asssim :

( )

vê se da
vlw

7 05 2008
Mateus Pinheiro de Lima

mike tenta colocar na mesma pasta que tá o arquivo html e faz asssim :

img src=”inverno.jpg” width=”116″ height=”116″ alt=”Inverno”

entre
vê se da
vlw

7 05 2008
Mateus Pinheiro de Lima

desculpa te repetido muitas vezes é por que eu não soube posta corretamente

31 05 2008
igor

uma curiosidade ,

cm faz pra clicar na imagem e ela aparecer sozinha na pagina e para poder ampliar ela(como no cade e no google).

2 06 2008
Elomar França

Olá, Igor

Para a imagem aparecer sozinha, basta fazer um link para o arquivo da imagem

[a href=”imagem.jpg”]Imagem[/a]

Sobre ampliar a imagem, isso é feito pelo navegador quando está exibindo uma imagem grande demais pra tela, e não por quem fez a página. Por isso, não dá pra ter certeza que em todo lugar ela possa ser ampliada.

Té mais!

4 06 2008
pekena

Oi eu tenteii colocar uma foto jpg sendo qe qando vou ver aparece uma quadro com x e não aparce a foto!
Voce pode me ajudar ?!

e tbm tipo eu ja ate fiiz o site so qe o [b] .com.br[/b] eu não sei coloca pode me ajudar nisso tbm ?!

3 09 2008
emerson

ei meu problema é igual a dda “pekena ” coloquei a foto mas lá aparece um “x” e não abre a foto oq devo fazer????

3 09 2008
Elomar França

Olá,

O problema de vocês deve ser o mesmo do pessoa ali em cima. Leiam os outros comentários e vejam se alguma solução se encaixa. Se nenhuma der certo, coloquem o código aqui que eu tento ver o que está errado.

2 10 2008
Ellyh

Oi! Não entendo nada de HTML … quer dizer, pouco! E estes dias estava querendo criar uma pagina na web…
Tava afim de colocar uma imagem no navegador, mas daí nem consigo! Sei que tenho que criar um favicon e talls, e até criei certinho mas dai tenho que hospedá-lo e o formato (ico*) parece que não é suportado…

Já procurei de todos os jeitos e não consigo achaar!
Algém pode me explicar diretinho como que faz? Detalhadamente??

Desde já obrigada!
=*

8 10 2008
Elomar França

Olá, Ellyh

Tem uma explicação bem legal aqui: http://www.quintacategoria.com.br/posts/mini-tutorial-inserindo-favicon-no-seu-siteblog/

Nesse link: http://neosite.ilogic.com.br/dicas/2007/08/21-melhores-geradores-de-favicon-da-internet.html você encontra mais alguns geradores de favicons.

Talvez o problema seja que sua hospedagem que não aceita arquivos .ico. Se for isso, entra em contato com eles e vê se tem como resolver isso. Se eles não aceitarem de jeito nenhum, tenta renomear o .ico pra .gif e vê se funciona (nunca tentei).

25 07 2011
Fernanda

Foi muito útil!

Obrigada 😀

18 12 2011
moreirahelon

olá, onde posso aprender a colocar uma imagem grande no fundo da página, e com todos os textos por cima dela?

6 05 2012
laura LIMA

nao entendo eu copiei uma foto da net para minhAS imagens e não “colA”
ELE APAREÇIA ANTES E AGORA QUANDO QUERO COLAR UMA FOTO NO MEU PC NAO DA PORQUE AO APERTAR O BOTAO ESUERDO O “COLAR” UE TINHA ANTES NAO APAREÇE!!! AJUDE – ME PLEASE

31 03 2016
Emanuel Alves

Ola, eu tenho uma imagem que é um GIF ANIMADO mas o cliente mandou pra mim esse gif animado no formato html document como fazer para trasformar em gif sem ser html?

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: