Use perfeitamente imagens de fundo grandes em páginas da web

Question

Quero ter imagens em segundo plano enormes no meu site, mas sem dar ao usuário dificuldade em baixá -las e o site parecendo feio como as cargas de fundo.

Eles não teriam maior que 1920 x 1080 de tamanho, no entanto, é difícil dizer em termos de Kilobytes/Megabytes.

Quais são as minhas opções aqui e quais são mais eficazes?

Não estou muito preocupado com a largura de banda, só quero o usuário pensar que tudo parece bom;)

Answer 1

Uma opção é usar vários fundos. Tenha um fundo pequeno como camada inferior e cubra -o com fundo maior.

Pode ser complicado ter dois antecedentes se você quiser no corpo e quero apoiar o IE. A solução pode ser iniciar um fundo menor do corpo, use JS para alterar o fundo de baixa resolução para alta resolução depois de carregar:

var i = new Image();
i.onload = function(){document.body.style.backgroundImage = 'url(' + i.src + ')';}
i.src = 'gigantic.jpg';

---

Lembre-se de que esse fundo tão grande precisa de mais RAM do que alguns navegadores móveis (os iPhones pré-3gs se recusam a decodificar essa imagem ou começarão a limpar o conteúdo do cache/guia em pânico).

O último problema pode ser contado com as consultas de mídia CSS:

http://lofotenmoose.info/css/destroy/media-queries-background-stretch/

Exceto consulta max-device-width em vez de (virtual/zoom) max-width.