iwtraining

Entendendo os formatos GIF, JPG, PNG e SVG Começando

Entendendo os formatos GIF, JPG, PNG e SVG

Ao criar conteúdo para o seu site no Adobe Photoshop, Illustrator, Fireworks, ou outros programas, você vai economizar tempo  de carregamento e espaço dependendo dos formatos de imagem para a web que você utilizar: GIF, JPG e PNG. Quanto mais você souber sobre cada formato, mais facilmente você pode decidir qual usar para o tipo de necessidade daquele momento.

GIF

O GIF (Graphic Interchange Format) foi projetado especificamente para a web. Esses arquivos, que têm a extensão .gif, são mais úteis para os elementos da interface, botões, bordas gráficas e afins.

Sobre o formato:

  • Suporta um máximo de 256 cores (paleta de 8 bits);
  • Usar compressão lossless (compressão de dados da imagem onde nenhum dado é perdido);
  • Aceita transparência;
  • Suporta animação, ou seja, você pode fazer um banner animado;

JPG

Batizado com o nome do grupo que criou o padrão, o formato JPEG (Joint Photographic Experts Group) é destinado principalmente para imagens com qualidade fotográfica e usa o sufixo. jpg. Designers usam jpg para imagens que devem ser exibidas em maior qualidade em suas páginas.

Ao considerar a possibilidade de usar este formato, lembre-se disso:

  • Suporta 16 milhões de cores (24 bits de cor);
  • Pode ser usado para impressão e Web, porque o formato suporta tanto o espaço de cor CMYK como RGB;
  • Pode comprimir dados de imagem muito, descartando pixels adjacentes de cor duplicado, mas muita compressão pode resultar em bloco como “artefatos” que parecem naturais;

PNG

O PNG, ou Portable Network Graphic, combina muitas características gif e jpg e, em seguida, adiciona um alguns recursos próprios. O formato foi originalmente concebido para superar as limitações de arquivos GIF e a maioria dos projetistas agora preferem para imagens que exijam transparência, sombras e afins.

Ao considerar a possibilidade de usar este formato, lembre-se disso:

  • Suporta milhões de cores (RGB para a cor, até cores de 48-bit);
  • Suporte de transparência;
  • Usar compressão sem perdas, ou seja, você não perde nenhuma qualidade cada vez que você salvar o arquivo PNG;

SVG

Criada pela W3C, o SVG (Scalable Vector Graphics), é um formato imagem gerada através de informações em linguagem XML que definem desenhos e gráficos bidimensionais estáticos, dinâmicos ou animados. Não perdem qualidade ao serem ampliados.

Algumas características:

  • Suporte de transparência;
  • É formada por cálculos matemáticos;
  • Não perde qualidade ao ser redimensionada;

Está com duvidas?

Aluno iwtraining tem acesso a um fórum exclusivo para discutir com os instrutores e outros alunos. Acesse agora mesmo!

Share this article

Em seus 12 anos de experiência, tanto em design como em desenvolvimento, trabalhou em diversos projetos, muitos de grande porte, para clientes como Banco do Nordeste, Sebrae, Anna Pegova, Grupo Deib Otoch, dentre outros. Como designer, trabalha com o Adobe Photoshop desde a versão 3.0, além do Illustrator, sendo certificado pela Adobe (ACE e ACI) nestes softwares. Como desenvolvedor, foca seus esforços atualmente no ActionScript 3.0 (Plataforma Flash) e Objective-C (iOS). Ministra, desde 2005, treinamentos na @iwtraining para estudantes e profissionais, além de grandes empresas como Cagece, TRE, TRT, Esmaltec, Grupo Edson Queiroz, Sebrae, Senac, Correios.

Deixe um comentário