Otimizando seus Graphic Designs para a web

O artigo fornece informações sobre como otimizar seus projetos gráficos para a Web.

A+ A-

É um problema comum. Você passou horas criando um ícone de olhar bonito ou logotipo, mas agora que o seu cliente tenha aprovado a sua obra de arte, ele quer otimizado para a internet.

A excelência do design gráfico

A excelência do desenho artístico não é apenas uma habilidade. É uma atitude.

Obtendo seus projetos prontos para um site ou de integração dentro de um produto de software é muitas vezes de partir o coração, você passou horas em um trabalho de amor garantindo que seus gráficos olham o melhor que puder e agora você tem que reduzir a sua qualidade, a fim de minimizar o tamanho do arquivo.

Confissões de um gráfico Comprador

Agora, por uma confissão, eu não sou um designer gráfico de profissão - normalmente, o meu papel é o de um cliente. Um comprador gráficos. Como tal, eu tenho um interesse económico no sentido de garantir o melhor equilíbrio entre qualidade e tamanho do arquivo.

Um pouco de fundo Sobre Mim

Meu dia de trabalho está em execução e gestão de uma aplicação desktop login do Facebook chamado Chit Chat, como tal, tendem a ser o elo perdido entre designers e programadores.

Para o meu Baixar Facebook aplicação, por exemplo, eu tive que garantir que ele tem baixo uso de memória. Para fornecer outro exemplo, o meu site que distribui a minha ferramenta de desktop Facebook que tive para garantir que ele carrega rapidamente, enquanto a venda de Chit Chat (o nome da minha ferramenta de software), tanto quanto possível.

kilobits extra resulta em perda de receita por meio de pessoas clicando fora do site, bem como, e em custo extra - largura de banda custa dinheiro. Como tal, eu sei uma coisa ou duas sobre como minimizar o tamanho do arquivo enquanto maximiza a qualidade.

O elefante na sala - O comércio entre o tamanho do arquivo e qualidade de imagem

Escusado será dizer que o tamanho do arquivo ea qualidade da imagem é um trade-off, no entanto, há uma série de coisas que você pode fazer para minimizar o tamanho do arquivo de seus gráficos. Este artigo irá fornecer-lhe algumas dicas úteis, a fim de garantir que suas imagens são uma qualidade tão alta quanto possível para o tamanho do arquivo menor.

Use uma grande ferramenta

Existe uma idade velho ditado de que "um mau trabalhador culpa suas ferramentas", no entanto, quando se trata de design gráfico, você vai querer usar uma grande ferramenta, a fim de tirar o máximo proveito de seus gráficos.

Em suma, eu recomendo o uso de Adobe Fireworks CS6, na minha experiência, é muito melhor do que qualquer outra ferramenta de exportar imagens grande teia pronto para o menor tamanho de arquivo possível.

Escolha Seu Graphic Formatos Sabiamente

Enquanto a maioria dos designers já estará ciente de que certos formatos são melhores do que outros para certas coisas, os usuários mais avançados terão de estar cientes do fato de que alguns navegadores - ou seja, Internet Explorer 6 não suportam imagens transparentes de forma nativa.

Além disso, alguns telefones inteligentes não suportam certos formatos gráficos. Devido a diferentes algoritmos usados ​​para guardar imagens, alguns formatos são melhores que outros em certas coisas. Eu recomendaria que você testar diferentes formatos para ver o que fica melhor para o menor tamanho de arquivo. Normalmente, JPGS são os melhores para fotografias, PNGs melhores para texturas e imagens e GIF melhor para a animação. Dito isto, GIF muitas vezes pode atingir um tamanho de arquivo menor do que PNG - na maioria das vezes, no entanto, qualidade, muitas vezes sofre.

Como Colours Muitos que você precisa?

O formato PNG é um grande formato em que para salvar seus ícones, normalmente ele vai oferecer grandes tamanhos de arquivo, mantendo uma qualidade fantástica. O formato PNG oferece várias sub-formatos - diferentes taxas de bits para o qual o formato PNG vai salvar a - 8 bits, 16 bits e 24 bits. Ao salvar imagens para a web, normalmente 8 bits será a sua melhor curso de ação.

O formato PNG oferece-lhe a oportunidade de salvar seus gráficos com uma quantidade limitada de cores, em compensação, o formato, em seguida, oferece-lhe um tamanho de arquivo reduzido. Reduzir a quantidade de cores que você precisa 256-128, ou talvez 64 podem tornar pouco diferente para o olho mas uma diferença significativa proporcional ao tamanho do arquivo. A redução de um 2,5 arquivo Kb por 0.5Kb através da redução da quantidade de cores pode parecer não muito, mais de 20 imagens que ainda oferece uma redução de 20% - 10Kbs. Faz diferença.

Esticando suas imagens no navegador

Certos aspectos de um projeto pode ser facilmente repetido - ou esticado - por um codificador dentro de um aplicativo site ou software. Por exemplo, um fundo ou de cabeçalho que é constituído por um padrão de repetição podem ser cortados para o denominador comum mais baixo e o código de software pode fazer a replicação resultando em um tamanho inferior.

Para lhe dar um exemplo, em chitchat.org.uk - o site que distribui o nosso app conversando Facebook, usamos um padrão de repetição de Facebook fotos de perfil.

Estandardização

Mantendo menus e itens padronizados pode ajudar a reduzir o tamanho do arquivo de um site.

Apache Compression

A menos que você é um expert lado do servidor - ou um pouco de um computador geek como eu, você provavelmente não vai saber sobre este truque. Se você está desenvolvendo um arquivo PSD para um design do site, ou o desenvolvimento de um site, é provável que você vai ter uma velocidade alvo com a qual trabalhar. Isso pode resultar em alguns sacrifícios projeto bem horríveis.

No entanto, aqui é um truque para ter em mente que não será imediatamente óbvio. Mais provável que não o seu cliente terá acesso a um pacote de hospedagem web profissional, eles vão gostar têm acesso a algo chamado HTACCESS assumindo que eles hospedar em um servidor Web Apache - que a maioria dos sites fazem. Dentro desse arquivo HTACCESS, algumas linhas de código pode fazê-lo de tal forma que o host proporciona comprimido (pense "zipado") arquivos para o navegador que são extraídos em tempo real pelo navegador.

Isso resulta em um tempo de carga mais rápida.

O código é:

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI (?: gif |? Jpe g | png). $
no-gzip não-variam
SetEnvIfNoCase Request_URI
. (?: Exe |? T gz | zip | bz2 | sentar | rar) $
no-gzip não-variam
SetEnvIfNoCase Request_URI .pdf $ não-gzip não-variam
BrowserMatch ^ Mozilla / 4 gzip-only-text / html
BrowserMatch ^ Mozilla / 4.0 [678] não-gzip
BrowserMatch bMSIE! No-gzip! Gzip-only-text / html