Aula 56 - Formatos de Imagem

Introdução

Existem diversos formatos de imagens utilizados na Web. Cada um possui características específicas relacionadas à qualidade, tamanho do arquivo, transparência e desempenho.

📌 Escolher o formato correto é fundamental para criar páginas rápidas, bonitas e eficientes.

Por que existem vários formatos?

Nem toda imagem possui a mesma finalidade. Fotografias, logotipos, ilustrações e ícones possuem necessidades diferentes.

Fotos precisam de boa qualidade e tamanho reduzido.
Logos precisam de transparência.
Ícones precisam ser escaláveis.
Animações precisam de movimento.

JPG (JPEG)

O formato JPG é amplamente utilizado para fotografias e imagens com muitas cores.

Vantagens	Desvantagens
Arquivo leve	Perde qualidade ao comprimir
Compatibilidade universal	Não suporta transparência

PNG

O PNG é muito utilizado para imagens com fundo transparente e elementos gráficos.

Vantagens	Desvantagens
Alta qualidade	Arquivos maiores
Suporta transparência	Pode aumentar o tempo de carregamento

WEBP

O formato WEBP foi desenvolvido pelo Google para oferecer qualidade e desempenho ao mesmo tempo.

Arquivos menores que JPG e PNG.
Suporte à transparência.
Suporte à animação.
Excelente para websites modernos.

📌 Atualmente o WEBP é considerado um dos melhores formatos para Web.

SVG

SVG é um formato vetorial que utiliza código XML para desenhar imagens.

Ideal para:

Logotipos
Ícones
Diagramas
Ilustrações

⚠️ Não é recomendado para fotografias.

GIF

GIF é um formato conhecido por permitir animações simples.

Uso	Exemplo
Animações	Memes animados
Banners	Propagandas simples

Comparação dos Formatos

Formato	Transparência	Animação	Qualidade
JPG	❌	❌	Alta
PNG	✅	❌	Muito Alta
GIF	Parcial	✅	Média
WEBP	✅	✅	Muito Alta
SVG	✅	Via CSS/JS	Perfeita

Qualidade x Tamanho do Arquivo

Quanto maior a qualidade da imagem, maior tende a ser o tamanho do arquivo.

Exemplo:

Foto JPG: 500 KB
Mesma foto PNG: 2 MB
Mesma foto WEBP: 300 KB

Compressão de Imagens

Compressão é o processo de reduzir o tamanho do arquivo sem comprometer significativamente a qualidade.

Tipo	Descrição
Lossy	Perde parte dos dados para reduzir tamanho.
Lossless	Mantém todos os dados da imagem.

Resolução da Imagem

Resolução representa a quantidade de pixels presentes em uma imagem.

Resolução	Exemplo
1280 x 720	HD
1920 x 1080	Full HD
3840 x 2160	4K

DPI e PPI

Sigla	Significado
DPI	Dots Per Inch (impressão)
PPI	Pixels Per Inch (telas)

📌 Para websites normalmente trabalhamos com pixels e PPI.

Imagens Responsivas

Imagens responsivas adaptam-se automaticamente ao tamanho da tela do dispositivo.

<img src="foto.webp" alt="Imagem" style="max-width:100%;">

Essa técnica evita que imagens ultrapassem os limites da página.

Boas Práticas

Utilizar WEBP sempre que possível.
Redimensionar imagens antes do envio.
Evitar arquivos gigantes.
Utilizar SVG para ícones e logotipos.
Otimizar imagens para dispositivos móveis.

🖼️ Formatos de Imagem