8 Imagens

Prévia do material em texto

Infinitum Engenharia 
 
 Site: Infinitum Engenharia 
 
 
Imagens 
Há vários motivos para você incluir imagens a uma página web: você 
quer incluir um logotipo, fotografia, ilustração, diagrama ou gráfico. 
Tem varias coisas a considerar ao selecionar e preparar imagens para o 
seu site, mas reservar tempo para fazer isso de maneira certa tornara 
suas paginas mais atraentes e profissionais. 
Nesta página vamos estudar: 
Incluir uma imagem em suas páginas web utilizando HTML; 
Escolher qual o formato de imagem utilizar; 
Exibir uma imagem no tamanho certo; 
Otimizar uma imagem para o uso na web a fim de tornar o 
carregamento das páginas mais rápido. 
É possível incluir imagens utilizando o CSS usando a propriedade 
background-image. 
Escolhendo imagens para o site 
Uma imagem pode ajudar muito a transmitir a informação desejada, e 
imagens excelentes ajudam a fazer a diferença entre um site mediano e 
um excelente. 
As imagens podem ser usadas para definir o tom do site em menos 
tempo do que leva para ler uma descrição. 
Se você não tiver fotos para usar, existem outros sites que oferecem 
imagens excelentes gratuitas. 
Lembre-se que todas as imagens estão sujeitas a direitos autorais, e 
você pode ter problemas se simplesmente copiar as fotos de outro site. 
Antes de utilizar as imagens, atente-se para as seguintes características: 
Ser relevantes; 
Transmitir informação; 
Transmitir o clima certo 
Ser instantaneamente reconhecíveis; 
Encaixar-se na paleta de cores do site. 
http://www.infinitumengenharia.com.br/
https://www.youtube.com/channel/UC4R6c9N6fQ7NtGHmGjt-h_A
 
 Infinitum Engenharia 
 
 Site: Infinitum Engenharia 
 
 
Armazenando as imagens no site 
Uma boa pratica é criar uma pasta para todas as imagens que o site 
usa. 
Conforme o site cresce, é recomendável organizar os arquivos do site. 
Manter as imagens em pastas separadas ajuda a estruturar o site. 
Se a quantidade de imagens for muito grande, talvez seja interessante 
criar subpastas e categoriza-las. Por exemplo, imagens como logotipo e 
botões podem ficar em uma pasta chamada interface, fotografias de 
produtos podem ser armazenadas em uma pasta chamada produtos e as 
imagens relacionadas as noticias ficam em uma pasta chamada notícias. 
Adicionando imagens 
Para adicionar uma imagem a pagina, você precisa usar um elemento 
<img>. Por exemplo: 
 <img src=”##” alt=”$$” title=”&&&”> 
Esse é um elemento que não tem fechamento. Ele deve receber os 
seguintes atributos: 
Src 
Isso informa o navegador onde ele pode localizar o arquivo de imagem. 
Isso geralmente será uma URL relativo apontando para uma imagem em 
seu próprio site. 
Alt 
Isso informa uma descrição de texto da imagem que define a imagem se 
você não conseguir ve-la. 
Esse atributo é muitas vezes conhecido como texto alternativo. Ele deve 
dar uma descrição do conteúdo da imagem de modo que possa ser 
entendido por um software de leitor de tela e mecanismos de busca. 
Title 
Voce também pode usar o atributo title com o elemento <img> para 
fornecer informações adicionais sobre a imagem. A maioria dos 
navegadores exibe o conteúdo desse atributo em uma dica de 
ferramenta quando o usuário passa o mouse sobre a imagem. 
 
http://www.infinitumengenharia.com.br/
https://www.youtube.com/channel/UC4R6c9N6fQ7NtGHmGjt-h_A
 
 Infinitum Engenharia 
 
 Site: Infinitum Engenharia 
 
Altura e Largura das Imagens 
É possível especificar o tamanho da imagem de acordo com a 
necessidade. Apesar de não ser muito comum utilizar esse recurso no 
HTML, pois é preferível fazer com o CSS. 
Height – Isso especifica a altura da imagem em pixels. 
Width – Isso especifica a largura da imagem em pixels. 
Em geral, as imagens levam mais tempo para serem carregadas do que 
o código html. Portanto, uma boa ideia é especificar o tamanho da 
imagem de modo que o navegador possa exibir o restante da pagina e 
ao mesmo tempo deixar o espaço correto para a imagem que ainda esta 
sendo carregada. 
Exemplo: 
<img src=”##” alt=”$$” title=”&&&” height=” 450” width=”600” /> 
 
----------------------abaixo é outra pagina do site------------------------- 
Regras para as imagens 
Para melhorar a performance do nosso site, temos que lembrar de três 
regras básicas, que estão resumidas abaixo. 
1 Salve as imagens no formato certo 
Sites utilizam principalmente imagens no formato jpeg, gif e png. Se 
você escolher o formato errado, a aparência da imagem pode não ser 
tão nítida como deveria e pode tornar a pagina do site lenta. 
2 Salve as imagens no tamanho certo 
Voce pode salvar a imagem na mesma largura em que ela aparecera no 
site. Se a imagem for menor do que a largura ou a altura que você 
especificou, ira demorar mais para ser exibida na pagina. 
3 Use a resolução correta 
Telas de computadores são compostas de pixels(pontos). As imagens 
usadas na web também são compostas por pontos minúsculos. A 
resolução refere-se ao numero de pontos por polegada. Assim, se salvar 
imagens em uma resolução mais alta resulta em imagens que são 
maiores do que o necessário e levam mais tempo para baixar. 
 
http://www.infinitumengenharia.com.br/
https://www.youtube.com/channel/UC4R6c9N6fQ7NtGHmGjt-h_A
 
 Infinitum Engenharia 
 
 Site: Infinitum Engenharia 
 
 
Formatos de imagem 
JPEG – Sempre que há muitas cores diferentes em uma foto, você deve 
usar um jpeg. Uma fotografia que apresenta neve ou um céu nublado 
pode parecer que contem grandes áreas que são apenas branco ou 
cinza, mas a imagem geralmente é composta por muitas cores que são 
sutilmente diferentes. 
GIF e PNG – A cor chapada refere-se a imagem que possui uma área 
com a mesma cor, como logotipos, ilustrações e diagramas. Use o 
formato GIF ou PNG ao salvar imagens com poucas cores ou grandes 
áreas da mesma cor. 
Resolução de imagem 
Quando utilizamos imagens, devemos ter cuidado com o tamanho dos 
arquivos. A resolução das imagens influencia no tamanho dos arquivos e 
também na qualidade. Assim, devemos pensar sobre a resolução das 
imagens mínimas necessárias para a nossa página. 
JPG, GIF e PNG pertencem a um tipo de formato de imagem conhecido 
como bitmap. Eles são compostos por muitos quadrados minúsculos. A 
resolução de uma imagem é o numero de quadrados que se encaixam 
em uma área quadrada de 1 polegada x 1polegada. 
Como existe um limite de resolução para os monitores e telas de 
dispositivos, uma imagem com alta resolução não aumenta a qualidade 
da imagem exibida, somente aumenta o tamanho do arquivo. 
 
Imagens vetoriais 
Imagens vetoriais são muito diferentes das imagens bitmap e são 
independentes da resolução. Imagens vetoriais são geralmente criadas 
em programas como o Adobe Illustrator ou InkScape. 
Quando uma imagem é feita a traço (como um logotipo, ilustração ou 
diagrama). As imagens com um formato vetorial são criadas inserindo 
pontos em uma grade, e desenhando linhas entre esses pontos. Uma cor 
pode então ser adicionada para “preencher” as linhas que foram criadas. 
A vantagem de criar desenhos vetoriais é que você pode aumentar as 
dimensões da imagem sem afetar sua qualidade. 
GIFs animados 
http://www.infinitumengenharia.com.br/
https://www.youtube.com/channel/UC4R6c9N6fQ7NtGHmGjt-h_A
 
 Infinitum Engenharia 
 
 Site: Infinitum Engenharia 
 
GIFs animados exibem vários quadros de uma imagem em sequencia e, 
portanto, podem ser usados para criar animações simples. 
Abaixo você pode ver os quadros individuais que compõem um GIF 
animado que exibe pontos laranja em círculo, como uma animação de 
carregamento de uma página web. 
Existem varias aplicações web que auxiliam a criar gifs animados a partir 
de imagens. Você pode experimentar alguns deles. 
É importante lembrar que cada quadro extra da imagem do GIF aumenta 
o tamanho do arquivo, e pode aumentar o tempo de carregamento da 
imagem e usuários web não gostam de esperar pelo download de 
imagens.Como usar legendas em imagens 
Imagens costumas ser acompanhadas de legendas. A HTML5 introduziu 
um novo elemento <figure> para conter imagens e suas respectivas 
legendas de modo que as duas permaneçam associadas. 
Pode haver mais de uma imagem dentro do elemento <figure> desde 
que todos eles compartilhem a mesma legenda. 
O elemento <figcaption> foi adicionado a HTML5 a fim de permitir que 
autores de paginas web adicione uma legenda a uma imagem. 
Antes da criação desses elementos não havia nenhuma maneira de 
associar um elemento <img> a legenda. 
http://www.infinitumengenharia.com.br/
https://www.youtube.com/channel/UC4R6c9N6fQ7NtGHmGjt-h_A