Melhor forma de fazer isso...

[chlins 1]

Pessoal,

 

Preciso fazer este hotsite para uma campanha e estou com dúvida sobre como fazer isso com tanta imagem.

Como o fundo tem um degradê, teria que ser completo e ainda tem a marca e o cara.

 

Como fazer isso, já que a imagem completa em png fica com resolução degradada e e jpg pior ainda, claro com um tamanho máximo de 60kb.

 

Me dêem uma luz.

 

Preciso fazer isso urgente

 

Esta é a base do site

[crf_h0m3r 5]

Cara, CSS Sprites (aqui ou aqui) vai ajudar muito com esse monte de imagem.

Dê uma pesquisada :thumbsup:

[Eliseu M. 2]

É... tome muito cuidado com o tamanho dos arquivos. Boa parte do conteúdo desse hotsite será feito de imagens, então cheque a melhor compressão.

 

Se for utilizar sprites, prefira fazê-los na horizontal, pois o arquivo pode ficar 90% mais leve. Além disso, use um compressor de imagens, como o SmushIt.

 

Já que em hotsites a alteração de conteúdo é mínima, prefira utilizar JPG ou GIF, mesmo que tenha que fatiar o fundo junto e depois posicionar certinho no CSS. Use JPGs para imagens com muito blur e degradês, e GIFs para imagens com cores sólidas.

 

Uma técnica usada por grandes sites é a utilização de até três domínios estáticos de arquivos. É um subdomínio livre de cookies e com expiração de cache extensa, usado para acelerar o carregamento dos arquivos, pois os browsers fazem 2 downloads paralelos por domínio, então, se você tiver 4 domínios diferentes, serão 8 downloads paralelos =]

Exemplo:

 

meusite.com.br = HTML, CSS e JavaScript

img.meusite.com.br = Imagens

products.meusite.com.br = fotos dos produtos

users.meusite.com.br = fotos dos usuários cadastrados

 

 

- Use uma textura repetida (a dos traços horizontais) para o background do site, ao invés de uma imagem inteira;

- Exporte os retângulos da direita como GIF transparente (cor sólida) e posicione-os via CSS;

- O brilho branco no meio do background: a melhor maneira é exportá-lo como PNG32;

- A cordinha e os textos ("Acelere suas", "Conquistas...") ficarão mais leves como GIF.

 

Boa sorte, até mais!

[chlins 1]

É... tome muito cuidado com o tamanho dos arquivos. Boa parte do conteúdo desse hotsite será feito de imagens, então cheque a melhor compressão.

 

Se for utilizar sprites, prefira fazê-los na horizontal, pois o arquivo pode ficar 90% mais leve. Além disso, use um compressor de imagens, como o SmushIt.

 

Já que em hotsites a alteração de conteúdo é mínima, prefira utilizar JPG ou GIF, mesmo que tenha que fatiar o fundo junto e depois posicionar certinho no CSS. Use JPGs para imagens com muito blur e degradês, e GIFs para imagens com cores sólidas.

 

Uma técnica usada por grandes sites é a utilização de até três domínios estáticos de arquivos. É um subdomínio livre de cookies e com expiração de cache extensa, usado para acelerar o carregamento dos arquivos, pois os browsers fazem 2 downloads paralelos por domínio, então, se você tiver 4 domínios diferentes, serão 8 downloads paralelos =]

Exemplo:

 

meusite.com.br = HTML, CSS e JavaScript

img.meusite.com.br = Imagens

products.meusite.com.br = fotos dos produtos

users.meusite.com.br = fotos dos usuários cadastrados

 

 

- Use uma textura repetida (a dos traços horizontais) para o background do site, ao invés de uma imagem inteira;

- Exporte os retângulos da direita como GIF transparente (cor sólida) e posicione-os via CSS;

- O brilho branco no meio do background: a melhor maneira é exportá-lo como PNG32;

- A cordinha e os textos ("Acelere suas", "Conquistas...") ficarão mais leves como GIF.

 

Boa sorte, até mais!

 

Estava justamente fazendo isso, separando tudo e a imagem de fundo como textura repetida.

Os arquivos em PNG-8 está bem menor que em GIF.

O filete brando dessas imagens transparentes só resolvem usando o MATTE com uma cor do fundo?

Como posiciono varios elementos dentro da mesma DIV (div=geral, onde tem o fundo) ?

Seria com position: absolute? E como ter vários background na mesma div?

A imagem do CARA, tera que ser em PNG transparente. Pois JPG tem o fundo branco.

 

Sobre os domínios para separar os arquivos, podem ser os meus próprios domínios?