As imagens são elementos fundamentais em páginas Web. Elas ajudam na comunicação visual, tornam o conteúdo mais atrativo e facilitam a compreensão das informações.
Para utilizar imagens corretamente é importante conhecer os formatos disponíveis e suas características.
Uma imagem digital é um arquivo que armazena informações visuais e pode ser exibido em computadores, celulares, tablets e navegadores.
Cada formato possui características específicas relacionadas à qualidade, transparência, animação e tamanho do arquivo.
| Formato | Uso Principal |
|---|---|
| JPG / JPEG | Fotografias e imagens com muitas cores. |
| PNG | Logotipos e imagens com transparência. |
| GIF | Animações simples. |
| WEBP | Imagens otimizadas para Web. |
| SVG | Vetores e ícones escaláveis. |
É um dos formatos mais utilizados para fotografias e imagens com muitos detalhes.
Muito utilizado para logotipos, ícones e imagens com fundo transparente.
O GIF permite criar animações simples e curtas.
Desenvolvido pelo Google para oferecer imagens leves e com excelente qualidade.
SVG significa Scalable Vector Graphics (Gráficos Vetoriais Escaláveis).
Diferente dos demais formatos, ele utiliza vetores e não pixels.
| Formato | Transparência | Animação | Qualidade |
|---|---|---|---|
| JPG | ❌ | ❌ | Alta |
| PNG | ✅ | ❌ | Muito Alta |
| GIF | Parcial | ✅ | Média |
| WEBP | ✅ | ✅ | Muito Alta |
| SVG | ✅ | Via CSS/JS | Perfeita |
| Situação | Formato Recomendado |
|---|---|
| Fotografias | JPG ou WEBP |
| Logo com transparência | PNG ou SVG |
| Ícones | SVG |
| Animações simples | GIF ou WEBP |
| Formato | Principal Característica |
|---|---|
| JPG | Fotografias. |
| PNG | Transparência. |
| GIF | Animações. |
| WEBP | Otimização para Web. |
| SVG | Vetorização. |