Background Grande, prós e contras

Postado em 18. out, 2009 por Chiavegatti em CSS, Design

É indiscutível, mas um Background grande causa um impacto visual muito impressionante em qualquer site. Com isso o webdesigner consegue trabalhar com diferentes variações de design e utilizando recursos muito explorados por fotógrafos como o Depth of field (defoque de campo) ou foco. O Background por sua vez não precisa necessáriamente ser uma foto, pode ser uma grande ilustração ou mesmo um vídeo.

Neste post você explicar um pouco sobre os diferentes estilos de background grande e como você poderá utiliza-los. Abordarei também o impacto que esse recurso causa no cosumo de banda e tráfego no site assim como pode afetar seu desempenho geral, e finalmente vou explicar como implementar backgrounds grandes no site site.

Estilos de Background Grande

Essencialmente existem diversos estilos, no entanto o estilo mais utilizado com maior frequência nos sites são:

Fotografias como Background
Graficos e ilustrações como Background
Animações como Background

Fotografias como Background

A Banda Larga está se tornando cada vez mais barata as velocidades de conexão estão aumentando em decorrência disso, então mais e mais sites podem dar-se ao luxo de usar esse recurso.

Erros comuns ao utilizar Backgrounds grandes

Um dos erros mais comuns com o uso desse recuso é que o background grande deve obedecer as diferentes resoluções do monitor. O web designer deve testar sua aplicação em todas as resoluções e browsers diferentes o quanto possível para evitar esse tipo de erro muito comum.

Particularmente o web designer deve testar com diferentes larguras de janela do browser em formato não expandido, não maximizado! Porque muitos usuários normalmente não expandem os seus browsers para o formato full screen maximizado, mesmo eles tendo resoluções de tela bem grandes.

Vamos analsisar os erros mais comuns, que devem ser evitados com a aplicação de Backgrounds Grandes.

Imagens no centro, Lado-a-Lado ou Esticada.

Não é errado usar Backgrounds centralizados, lado-a-lado ou esticados em uma imagem, na realidade, é até recomendado, a fim de manter a simetria do site, porém o mau uso dessas técnicas pode dar a impressão para seus visitantes de que o web site foi mal feito e tem um design mediocre.

Para ilustrar isso vamos analisar a imagem abaixo, essa imagem foi criada a partir de uma resolução de 1024×768 de tela:

Como você pode ver, nessa resolução, não a absolutamene nada errado com o design, agora veja o mesmo site com resolução de 1680×1050:

A imagem usada como Background está centralizada, dá a impressão que é uma foto normal e não a composição do Background. Evite sempre utilizar imagens dessa maneira, você deve certificar-se que a imagem é grande o suficiente em largura para as resoluções de tela mais utilizadas atualmente, a melhor solução é fundir ou mesclar a imagem a uma cor sólida de background ou usar canal Alpha em sua imagem, com isso os visitantes do site que tem resolução de tela maior não irão notar esse problema.

Cortar uma imagem para aplicar de Background pode ser algo complicado, quando você não sabe como cada browser vai realmente processar e repoduzir os blocos de repetição dessa imagem.

Todos os browsers modernos podem reproduzir imagens aplicadas como background, com a ajuda de CSS (Cascading Style Sheets).

Uma imagem é repetida, usando uma propriedade CSS background para definir a imagem e especificar como replica-la. Veja o Exemplo:

body {background: url(“imagens/exemplo.jpg”) repeat-x;}

O Código acima insere a imagem “exemplo.jpg” como background para o elemento <body> e repete essa imagem horizontalmente por toda a área útil do browser. O Atributo repeat-x define que deve ser executada a repetição da imagem por todo o eixo x. Você também pode utilizar outros atributos de repetição:

repeat-x; Para repetir uma imagem horizontalmente
repeat-y; Para repetir uma imagem verticalmente
repeat-xy; Para repetir uma imagem em ambas as direções (vertical e horizontal)
no-repeat; Para não repetir a imagem

Agora o exemplo de aplicação de cada metódo:

body {background: url(”images/sample.jpg”) repeat-x;}
 
body {background: url(”imagens/exemplo.jpg”) repeat-x;}
 
body {background: url(”imagens/exemplo.jpg”) repeat-y;} 
 
body {background: url(”imagens/exemplo.jpg”) repeat-xy;}
 
body {background: url(”imagens/exemplo.jpg”) no-repeat;}

Vale lembrar que você não está limitado a definir um background somente para o elemento <body>. Ele pode ser configurado para qualquer elemento na sua página.

Para usar corretamente um bakcground lado-lado, você deve garantir que as bordas da imagem estão 100% compatíveis com seu padrão, portanto, a criação do background sem nenhuma emenda!

Por exemplo , a imagem abaixo mostra como é uma padrão (Uma pattern em inglês) que é aplicado lado-a-lado, mas está “cortada” ou fatiada” de forma errada. Observe que você vê claramente as bordas de cada imagem individual.

Para criar uma imagem sem bordas e emendas visíveis, o web designer deve cortar a imagem de tal forma que a borda da esquerda misture-se com a borda da direita a superior com a inferior, com na imagem a seguir:

Você vê agora que as bordas individuais da imagem estão unidas uma a outra dando a impressão de que não existem várias e sim apenas uma imagem compondo o Background, a imagem acima foi composta a partir da imagem padrão abaixo:

Quando uma imagem é disposta em formato Escalar, o fator mais importante é a qualidade dessa imagem e a resolução da sua audiência. Um web designer deve levar em consideração os diferentes formatos de imagem que são otimizados para cada estilo particular de exposição e uso.

.gif – Graphic Image Format
.jpeg – Joint Picture Expert Group
.png – Portable Network Graphics

Gif é um formato de imagem otimizado para gráficos bem simples, com cores solidas na maiora das vezes, que usam textos e formas primitividas, circulos, linhas, retangulos, quadrados, quando utilizamos o gif para esses tipo de imagem são obtidos excelentes resultados de compressão e qualidade de exposição da imagem. O gif deve ser evitado e não é recomendado para fotografias. Veja O exemplo.

Imagem em formato gif, tamanho de 3,3 KB

A mesma imagem em formato Jpeg - 13,5KB

Com isso você percebe claramente que o formato Jpeg não é recomendado para o uso em elementos gráficos. Assim o formato Jpeg deve ser usado para imagem complexas , fotografias e o Gif para gráficos.

No caso de fotografias e imagens grandes é essencial otimiza-las tanto o quanto possível, a fim de poupar tráfego de dados no servidor e consumo da velocidade de banda do visitante do seu site.

Evitar a ampliação escalar de imagens pequenas, porque quando isso acontece a resolução também diminui significativamente, como ilustrado na imagem abaixo (clique e observe o que acontece):

O Problema com o exemplo acima é que o site redimensiona a imagem automaticamente de acordo com a resolução da tela que com com que a imagem de fundo tornese “pixelada (pron: picselada)” quando visualizada em monitores de resolução de grandes dimensões.

O Impacto do uso de Backgrouds grandes no tráfego de dados e no desempenho do Site

Backgrounds grandes geralmente equivalem a arquivos fisicamente grandes que podem levar a um enorme impacto no tráfego de dados e também na experiência do usuário.

O tráfego de dados é a quantidade de informações que está sendo transferida de um lugar para o outro, especificamente nesse caso do servidor para o cliente. Quando são usadas imagens em grandes proporções e dimensões, o tempo de carregamento do site pode aumentar de forma muito expressiva e sensível.

Assim, é essencial , primordial e louvável otimizar suas imagens, usando resoluções e formatos adequados, bem como realizar a otimização de outros recursos do seu site, tais como arquivos CSS, Flash e Javascript.

Vamos analisar os exemplos a seguir:

Agora veja o consumo de conexão desse site através do relatório:

Foram feitas 12 requisições e total de 627 KB foram baixados do servidor. Agora pense comigo, isso signifca que cada vez que um único usuário visita o site 627Kb são baixados e somados ao tráfego total do site.

Se o site tiver uma média bem baixa, de 50 visitas diárias, esse “total” seria de 31.350 MB por dia.

Eu usei o firebug que é um plugin do firefox para ver as solicitações do site e ter uma idéia de como otimiza-lo.

Dicas e Truques

Você nunca deve negligenciar as resoluções sobre as quais não pode testar seu site. Existem serviços atualmente como o Browsershots para testar seu site usando diferentes resoluções de tela, navegadores, etc…

Existe também o Microsoft SuperPreview, uma ferramenta fantástica que em breve terá um post dedicado e exclusivo.

Grandes resoluções de tela não são tudo o que você deve levar em consideração na hora de criar um novo site, é preciso considerar também as resoluções de tela menores, ainda mais atualmente que a navegação através de dispositivos móveis é crescente. Um web designer deve projetar para cada browser, tendo por objetivo atingir a sua audiência de forma coesa e idêntica, independente do browser que ela utilize mas. É muito importante re-afirmar que dispositivos móvies como o iPhone, iPodTouch e smartphones são cada vez mais utilizados para navegar pela web.

Você também pode optar por exibir uma implementação de interface diferente detectando a resolução de tela do visitante, browser ou dispositivo que ele está usando, com a ajuda de um pequeno código javascript que altera o CSS de acordo com os parâmetros que você determina ou você mesmo pode criar um código para isso. O blog A List Apart tem um ótimo tutorial sobre como criar um “switcher de CSS”.

Um outro truque possível é usar um emulador de celular, para visualizar como seu site aparece em determinado dispositivo, por exemplo , você pode usar o Windows Mobile 6 Emulator.

Otimizar os Backgrounds é essencial, outra técnica que você pode utilizar é conhecida como CSS sprites (em inglês.)

Se a foto que você pretende usar como background no seu site for muito pequena ou se sua aparecia corre o risco de ficar “estranha”, você pode trabalhar seu projeto em torno dessa foto. Como no exemplo:

Você pode perceber que a imagem acima é propositalmente pequena, para que o projeto seja completamente integrado internamente.

Outra dica interessante é criar uma cor sólida de fundo para toda a foto, e usar essa mesma cor aplicada ao CSS que determina a cor do background fazendo uma combinação perfeita entre a foto e fundo real.