Imagens(X)HTML

Professor Jolvani

Aula 09, 10 e 11

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...

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)

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...

Imagens (X)HTML Como fazer isso align=“right” e

redimensione a imagem...

Encontre outros atributos

Verifique os atributos depreciados no w3scools.

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...

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...

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....

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...

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

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...

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...

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.

Imagens (X)HTML – Aula 11

http://www.photoshoponline.com.br/editor/

http://fotografiatotal.com/os-6-melhores-editores-de-fotografia-gratis

Próxima Aula: Listas