Este documento discute a inserção e edição de imagens em HTML. Ele explica como usar as tags <img> e seus atributos src e alt, além de estilos CSS como width para redimensionar imagens. Também aborda formatos de imagem como JPG e GIF, edição de imagens em softwares como Photoshop para otimizar qualidade e tamanho, e endereços de imagens relativos versus absolutos.

1. Imagens
(X)HTML
Professor Jolvani
Aula 09, 10 e 11

2. Imagens (X)HTML
 Bem vindos a mais uma aula de xhtml, nesta aula vamos trabalhar com imagens
 Então vamos preparar duas imagens para executarmos as atividades...
 Copiamos e renomeamos a última aula, aula05 para aula06.html
 Então vamos inserir uma imagem... Usa-se a tag <img>, esta é uma tag in-line,
não dá quebra de linha
 Se usarmos uma tag onde não encontramos a imagem ...
 Então usamos o atributo src... + o atributo obrigatório alt... Será
apresentado se a imagem não for encontrada...

3. Imagens (X)HTML
 Porém a imagem ficou muito grande, mas nos temos como redimensionar a
imagem...
 Outra maneira é usar o atributo style... (do css) com a propriedade width...
Definido a largura em pixels
 Ao definir a largura em pixel ela fica fixa, quando minimizamos
ou maximizamos o browser ela fica do mesmo tamanho, mas se
definíssemos a propriedade width 50% por exemplo a imagem
seria redimensionada quando max – min o browser ..... Teste.
 Eu gostaria que essa imagem fosse um parágrafo... Podendo fazer
o alinhamento ao centro. Usando align este também esta
depreciado... Então, agora usaremos o atributo style...
 <p> </p> é um box (uma caixa)

4. Imagens (X)HTML
 Cabe uma revisão para alterar o código align para style ....
 Faça isso em todo o código...
 Colocando a outra imagem... Já sabemos qual a tag usar e os
atributos obrigatório: <img src=“” alt=“” /> lembre-se de dar um
espaço antes de fechar a tag...
 A imagem ficou abaixo do texto, porém,
 Gostaria que ficasse alinhada a direita...

5. Imagens (X)HTML
 Como fazer isso align=“right” e redimensione
a imagem...
 Encontre outros atributos
 Verifique os atributos depreciados no
w3scools.

6. Imagens (X)HTML – Aula 10
 Edição de Imagens
 Performance das Imagens
 Photoshop – ferramenta profissional para edição de imagens
 Criamos um novo arquivo html – aula07.html...
 As tags img funcionam de forma diferente...
Primeiro o browser carrega o arquivo html,
formata o arquivo e quando ele chega na tag img
ele faz uma nova requisição ao servidor solicitando
as imagens...
 E a cada imagem ele faz uma requisição ao
servidor... Enquanto ele não encontrar a imagem
ele fica requisitando....
 Após conseguir carregar ele para de “atualizar”,
fazer a requisição...

7. Imagens (X)HTML – Aula 10
 Em caso de carregarmos imagens de extensões diferentes, imagens com ou sem fundo,
ou fundo transparente Ex: JPG e GIF é que:
 O JPG funciona melhor com imagens continuas como fotografias, e os GIFs funcionam
melhores para imagens com algumas cores sólidas imagens com linhas, cliparts ou
pequenos texto de imagens, logos ... Imagens menos “complexas”
 Em JPG vc pode representar uma imagem com 16 milhões de
cores, e o GIF com até 256 cores diferentes
 O JPG é um formato com perdas.... Para poder reduzir o tamanho
do arquivo algumas informações são perdidas... O GIF também
reduz o arquivo mas não perde nenhuma informação... Formato
sem perdas
 O JPG não suporta transparências enquanto o GIF pode-se definir
cor de fundo e transparência...
 Então se eu alterar a cor de fundo observamos o que acontece
com as imagens...

8. Imagens (X)HTML – Aula 10
 Carregar a imagem, colocar cor de fundo e verificar a diferença...
 Com as imagens transparentes conseguimos colocar cor atrás da imagem...
 No nosso projeto html temos que tomar o cuidado com o tamanho das imagens....
 A imagem usada possui 1280 x 720 e estamos definido ela com uma dimensão de 450px. Com
136 kb, (geralmente são maiores). Quando nos fazemos uma requisição ao servidor ele vai
carregar esse arquivo. E nossa ave com 300 x 211 e 80 kb....

9. Imagens (X)HTML – Aula 10
 Como as imagens são maiores então o tamanho da página fica maior.
Demora + para carregar. Então seria necessário usar um editor de imagem
para deixa-las + “enxutas”
 Para isso possuímos vários editores, tais como:
 Photoshop
 Gimp
 Image Magic
 Todos gratuitos...

10. Imagens (X)HTML – Aula 11
 Então vamos editar nossas imagens para deixar o projeto mais pequeno...
Pode ser no photoshop...
 No nosso caso a imagem deve ter 450px (pixels)
 Alterar o nível de qualidade

11. Imagens (X)HTML – Aula 11
 Salvar como figura da web (Gif x JPG)
 Vamos editar num editor que vc possui - paint
Observe que a imagem já está
reduzida...

12. Imagens (X)HTML – Aula 11
 No Paint - Redimensionar
 Altere as dimensões para 450 pixel e
 A outra imagem para 150 px.
 No paint a transparência foi perdida...

13. Imagens (X)HTML – Aula 11
 Fazer ajustes finos ...
 Endereço relativo...
 Copiamos a imagem para outra pasta e testamos...
 Altere o endereço e saia um nível ...
 Mais um nível = ../../img/fotos.jpg; no mesmo nível
 E se ela estivesse fora do meu computador, na web por
exemplo...
 Ai temos o endereço absoluto...
 Encontre uma imagem de um determinado site e teste...
 Finalizamos então com endereço relativo X absoluto.

14. Imagens (X)HTML – Aula 11
 http://www.photoshoponline.com.br/editor/
 http://fotografiatotal.com/os-6-melhores-editores-de-fotografia-gratis

15. Próxima Aula: Listas