Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Imagens em HTML - JPG, JPEG, GIF e PNG

Agora que você já sabe a importâncias de fotos e imagens para sites e para a internet de um modo geral, vamos começar a estudá-las, entender o que são de fato, bem como conhecer alguns tipos de imagem de uso comum nos sites, que usaremos em nosso curso de HTML.


O que é uma imagem

Com certeza você já deve ter mexido naqueles programas para fazer desenhos. O mais conhecido é o simples e famoso Paint.
Provavelmente você também já deve ter usado uma espécie de lupa que tem lá, que dá um zoom nos seus desenhos.

Ao usar esse zoom várias vezes 'entrando' na imagem para deixar ela maior, chega em uma limite onde não dá mais para aumentar o zoom. Nesse momento vemos vários quadradinhos, cada um pintando com uma cor.
E uma figura não é nada mais que isso: diversos bloquinhos minúsculos, cada um pintado com uma cor.

Esse bloquinho pode ser de diversos formatos, geralmente são quadrados ou linhas.
Os chamamos de pixel, que é a menor unidade de uma imagem. A qualidade de uma foto é definida pelo número de pixels existentes em uma imagem.

Ou seja, quanto mais pixel uma figura tem, mais desses bloquinhos existem, e quanto mais e menores eles forem, melhor a qualidade, pois terá mais bloquinhos desse. É como se a imagem tivesse mais informações, o que define uma imagem melhor, pois irá conter mais detalhes.

O mais interessante é a maneira como podem ser interpretadas as imagens: como informações de texto.

Sim, você pode escrever uma imagem. Imagine que você quer escrever uma carta para um amigo, você pode 'escrever' a imagem:
Primeiro pixel = cor vermelha
Segundo pixel =  cor amarela
...
Décimo pixel =   cor verde
...


Obviamente, existem milhões de pixels em uma foto de boa qualidade, bem como uma infinidade de combinações de cores (conforme deve ter estudado no artigo sobre a tabela de cores em HTML), o que tornariam a tarefa praticamente impossível para um ser humano. Mas para um computador não.

De fato, quando um usuário entra em um site e vê a imagem, é isso que acontece.
O servidor envia as informações (pixel 1 cor #ffffff, pixel 2 cor #f45f00 etc), e seu navegador vai interpretando isso, pintando e exibindo pixel por pixel, e o resultado é uma imagem na tela do usuário.

Compressão de imagens: Importante para criação de sites

Antes de entrarmos em detalhes sobre os tipos mais comuns de imagens e aqueles que iremos trabalhar, aqui em nossa apostila de HTML, precisamos entender um importante conceito para webmasters, o de compressão de imagens.

Ainda voltando para o Paint, se você fizer um desenho e salvá-lo no formato padrão do Paint vai ver que ele fica armazenado com a extensão .bmp, e provavelmente terá alguns megas de tamanho.

Agora vá na opção Salvar como  e selecione a extensão .jpg, .jpeg ou .png
Verá que o mesmo desenho, com a mesma qualidade é BEM menor, e a qualidade é praticamente idêntica.

Por que isso ocorre? Dentre outros motivos, pela capacidade de compressão das imagens, ou seja, a capacidade de reduzir suas informações para que ocupem menos espaço. É como zipar ou passar winrar em arquivos: eles ficam menores, mas não são alterados.

E por que isso é importante no HTML e criação de sites?
Muito simples, com certeza já deve ter entrado em sites que tinham imagens gigantes que levavam um tempo para carregar. Se usou internet na época dos modens 56k (ligados no telefone) deve se lembrar como era ver uma imagem em um site: ela ia abrindo beeem devagar, linha por linha. Uma angústia!

Portanto, teremos uma preocupação e cuidado especial com o tamanho das imagens na hora de criar um site, pois poderá pesar no carregamento de uma página, e o tempo que uma página demora para carregar é um importante fator que o Google usa para rankear seu site nos resultados de busca (maior fonte de visitas de um website).

Além do mais, se para você webmaster a demora no carregamento é um problema, ela não é para o usuário, pois a primeira coisa que eles fazem quando um site demora a abrir é sair. Iremos aprender não somente como usar imagens em um site em HTML, mas também como definir seu tamanho, medidas e formato de compressão.



Tipos de imagem: jpg, jpeg, gif e png

Vamos agora conhecer os três principais formatos de imagem comprimidas que iremos usar na criação de nossos sites em HTML.
Provavelmente já deve ter ouvido falar neles, pois suas extensões são bastante famosas: JPG (ou JPEG), GIF e PNG.

JPG ou JPEG

JPEG são as letras iniciais de Joint Photographic Experts Group  e é, na verdade, uma maneira de compressão de imagens, onde esse nível de compressão é flexível e ajustável ao nosso interesse.
Além disso, é conhecida pela sua capacidade de armazenar muita informação.
Ou seja, é indicada para fotos que vão exigir alto grau de qualidade.

Por exemplo, se clicar nessa imagem verá sua alta qualidade. Há muitas informações e detalhes nela, que podem ser exibidos de maneira compactada através do método JPEG de compressão:

Compressão de imagens
Praia de Canoa Quebrada, no Ceará


Devido ao seu grau de qualidade, é frequentemente usada para fotos de paisagens e pessoas, por terem muitos detalhes.
Geralmente quando tiramos fotos de celulares, scanners e câmeras digitais, eles são salvos e fazem uso do método de compressão JPEG.

Ou seja, use JPG ou JPEG para imagens de qualidade, que irão exigir muitos detalhes, muitos pixels.
Também pode ser usada com figuras simples, mas a compressão não será muito útil em imagens de pouca qualidade e informação.

GIF

Com certeza você conhece os famosos gifs, um tipo de 'desenho animado' muito popular na internet, pois ao contrário das fotos e imagens comuns, elas se movimentam. Sempre fizeram bastante sucesso em sites de humor e redes sociais.

GIF significa Graphics Interchange Format, e ao contrário do que muitos pensam, não serve somente para animações. É muito usada para armazenar imagens estáticas também (inclusive por webmasters, na hora de configurar e ajustar espaços em um website).

Assim como em filmes (que são várias fotos juntas), um GIF animado nada mais é que várias imagens, vários GIFs juntos, que foram compactados e exibidos.
Além desta característica, outro importante detalhe dos GIFs é que eles possuem qualidade  limitadíssima em comparação a outros métodos de compactação e exibição de figuras.

Ele é tão limitado, que pode exibir somente 256 cores (8 bits de combinação).
Logo, não é muito indicado para imagens que necessitem de muita informação, como imagem de um rosto ou paisagem.
Porém, por ser mais simples, geralmente os gifs possuem tamanhos bem pequenos.

Os gifs são geralmente usados para desenhos e figuras simples, sem muitos detalhes. Animações, em geral:
Bandeira do Brasil em GIF

PNG

Esses métodos de compressão de imagens, como o que foi usado em GIFs geralmente são feitos por engenheiros de empresas privadas, e realmente valem ouro. Afinal, se utiliza de conhecimentos de computação e matemática para reduzir o tamanho de uma imagem. Por isso, sempre houveram alguns problemas com patentes e uso público de tais métodos de compressão.

O formato PNG (Portable Network Graphics) é formato de imagem muitíssimo utilizado e recomendado para quem desejar usar imagens em seus websites, pois seu uso é livre e gratuito.

As imagens nestes formatos geralmente são bem pequenas e possuem ótima qualidade, facilitando bastante seu uso e agilizando o carregamento de um site.

Outro ponto importante, é que é fácil e possível encontrar imagens PNG sem fundo.

Por exemplo, a imagem abaixo possui fundo branco. Se você colocar em um site com fundo preto, a imagem vai continuar tendo fundo branco (ou seja, vai ter um trecho branco no meio de seu site).

Como colocar fotos em HTML


Já a imagem abaixo mostra o que realmente importa na foto (os dados) e sem fundo.
Ou seja, essa imagem num site de fundo amarelo, terá fundo amarelo. Só aparecendo a imagem dos dados. Esse efeito é bem comum em fotos PNG

Como usar imagens em um site HTML

É como se recortássemos somente o contorno dos dados, dando um excelente aspecto para o design de seus sites. Vamos ver como isso funciona na prática em breve, nesta seção sobre Imagens em HTML, de nosso curso online grátis de HTML.
Interessante, não?

2 comentários:

Anônimo disse...

Não consigo colocar uma imagem png, e outras sim. Porque será que isto esta acontecendo? Tenho outras imagens png no site funcionando..

Zidane (PHLLOKID) disse...

Good

Tutoriais de HTML e CSS