Formatos de imagem para web design

Quando você usa imagens em um site, você tem duas coisas a considerar: o formato e otimização de imagem. Quando você obter esses fatores no local, você tem uma imagem nítida para o futuro que carrega rapidamente e tem a mesma aparência em qualquer navegador web. Se você errar, você tem uma imagem que cargas à velocidade da luz, mas parece horrível, ou você tem uma imagem que parece absolutamente linda, mas leva três forevers para carregar.

Video: DPI, Qualidade e Resolução de imagem - Imprimir com qualidade - Tutorial de Photoshop

O formato de arquivo de imagem GIF para web design

Uma imagem guardada como GIF (Graphics Interchange Format) arquivo compreende 256 cores (8 bits). Imagens guardadas com o formato GIF podem ser vistos em todos os navegadores atuais. O GIF (giff pronunciado ou jiff) formato de imagem é comumente usado para imagens com grandes áreas de cor sólida (tais como logotipos ou símbolos gráficos (como botões). Este formato de arquivo também funciona bem quando o banner é predominantemente texto.

O tamanho do arquivo da imagem resultante depende de como você otimizar a imagem. Quando você otimizar uma imagem GIF, você especifica o número de cores com a qual a imagem é gravada e o algoritmo de redução de cor. O objetivo é otimizar a imagem para que ele ainda parece ser bom e carrega rapidamente.

imagens GIF também suportam transparência. Esta opção é útil quando você está exibindo texto sobre uma imagem de fundo. Quando você criar a imagem, use uma cor de fundo similar, ou o mesmo que, a da imagem de fundo da página da web.

Video: Como Salvar Arquivo em Formato de imagem No Corel Draw X7

Não use o formato GIF para salvar imagens realistas com milhões de cores. A paleta de cores restritiva degrada a qualidade da imagem. Se você usar pontilhado (Onde as cores da paleta de 256 cores são misturadas para criar um fac-símile razoável de uma cor não na paleta), o tamanho do arquivo é muito grande para uso prático em uma página web.

O formato de arquivo de imagem JPEG para web design

O formato de arquivo JPEG (Joint Photographic Experts Group) é ideal para imagens realistas com milhões de cores. O original do JPEG (pronuncia-se JAY-peg) O formato também tem um derivado conhecido como JPEG 2000, que apresenta uma melhor compressão de imagem que resulta em arquivos menores.

Infelizmente, como esta escrito, JPEG 2000 é suportado apenas pelo Safari. O formato JPEG faz a sua magia por compressão de imagens. Quando você compactar uma imagem, os dados são perdido- portanto, o formato JPEG é conhecido como um formato com perdas. A figura mostra uma imagem JPEG de portfólio web de um fotógrafo.

A qualidade da imagem é determinado pela quantidade de compressão você aplica ao salvar a imagem. A compressão ideal depende da quantidade de detalhes na imagem e o tamanho da imagem na página web onde poderá inseri-lo.

Se a imagem é pequena, sem muitos detalhes, você pode aplicar compressão mais alta para a imagem. Se a imagem ocupa uma grande parte da página web e contém um monte de detalhes, você vai ter que aplicar menos compressão de imagem. Caso contrário, o detalhe será barrenta, ea imagem não será nítida.

Felizmente, a maioria dos aplicativos de edição de imagem, como Fireworks e Photoshop, tem opções que permitem comparar a imagem original lado a lado para uma versão da imagem com compressão aplicada.

Se você tiver uma imagem com um monte de texto - como um banner com um logotipo do texto e um slogan texto - salvar a imagem no formato JPEG irá resultar em texto com bordas irregulares por causa do texto anti-aliasing misturar as bordas do texto com a imagem ao redor.

Video: Web Designer quer saber! - Como escolher fotos?

A melhor maneira de superar isso é usar um aplicativo de edição de imagem (como fogos de artifício) que lhe permite “fatia” uma imagem em seções e, em seguida, salvá-los em formatos diferentes.

Salvar as seções fatiadas com texto no formato GIF e o resto da imagem como arquivos JPEG. Quando você otimizar a imagem, certifique-se de especificar colors- suficiente de outra forma, você verá as bordas recortadas, onde o anti-aliasing combina a fonte para o fundo.

O formato de arquivo de imagem PNG para web design

O formato PNG (Portable Network Graphics) foi originalmente concebido para substituir o formato GIF. Para gráficos como botões e banners, você pode salvar um arquivo usando o formato PNG-8, o que resulta em um arquivo de 8 bits que suporta transparência. Quando você está trabalhando com imagens realistas com milhões de cores, você pode salvar os arquivos usando o formato PNG-24, que salva o arquivo com milhões de cores.

A melhor característica do PNG (pronunciado sibilo) Formato é que ele usa compressão sem perdas, semelhante ao) compressão (LZW usado quando comprimir arquivos salvos como arquivos TIFF (Tagged Image File Format) LZW. Isso resulta em uma boa aparência do gráfico com um tamanho de arquivo relativamente pequeno.

A desvantagem de usar o formato PNG foi diferentes níveis de suporte por navegadores da web populares. navegadores atuais oferecem melhor suporte para o formato PNG, mas ainda existem questões quando os arquivos PNG salvos com transparência são exibidos.