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.
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.
(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
Esse material é uma tradução do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.
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
). 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.
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.
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?
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!
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 >
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.
mike tenta colocar na mesma pasta que tá o arquivo html e faz asssim :
vê se da
vlw
mike tenta colocar na mesma pasta que tá o arquivo html e faz asssim :
( )
vê se da
vlw
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
desculpa te repetido muitas vezes é por que eu não soube posta corretamente
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).
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!
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 ?!
ei meu problema é igual a dda “pekena ” coloquei a foto mas lá aparece um “x” e não abre a foto oq devo fazer????
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.
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!
=*
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).