Categories: CSStodas

Carregar imagens

Transcrevo a seguir o email que recebi do leitor Vinícius Rezende solicitando que eu publicasse um método para carregar uma imagem de baixa resolução enquanto não se carrega a imagem definitiva de alta resolução.
Se você achar interessante e precisar use, mas antes leia os comentários sobre esta técnica.

Olá Maurício!
Inventei um modo de utilizar a função lowsource da tag imagem com CSS. Gostaria de compartilhar no site do maujor, pois esse site é referência em CSS e vi que essa é uma grande dúvida dos desenvolvedores em CSS em geral. Como nada encontrei na internet sobre o assunto, gostaria de compartilhar a idéia para retribuir um pouco o que esse site fez por mim, pois aprendi CSS no maujor.

O processo consiste em criar uma div com o tamanho exatamente igual ao da imagem a ser exibida, por exemplo, o Banner do site, e colocar a imagem com baixa resolução como o background dessa div. Assim, o background da div será substituído pela imagem de resolução boa assim que ela for carregada.

CSS

<style type="text/css">
    div#banner
    {
        margin: 0 auto;
        padding: 0;
        width: 1001px;
        height: 320px;
        background: transparent url('../images/menu red.gif') no-repeat left bottom;

    }

    div#lowsrc_banner
    {
        margin: 0 auto;
        padding: 0;
        width: 1001px;
        height: 320px;
        background: #000 url('../images/menu_red_low.jpg') no-repeat left bottom;

    }
</style>

HTML

<div id="lowsrc_banner">
<div id="banner">
</div>
</div>

Maujor

Next Capa para ~~coleção~~ livro CSS3 do Maujor »

Previous « O valor search da HTML5

View Comments

Liliane Freitas says:

21/07/2013 at 20:29

Eu apliquei e funcionou, muito legal.
Gilberson Leonardo says:

03/12/2012 at 17:15

Sim a solução é interessante, mas acho que deve existir alguma mais direta, porque, na minha opinião, concordando com o Bruno, não acho correto utilizar duas imagens, e mesmo se utilizar o atributo 'lowsrc' ainda assim teríamos duas imagens.

Uma solução, pra quem utiliza php, seria diminuir a qualidade da imagem pelo header, assim evitaria o trabalho de reduzir manualmente todas as imagens.

E pessoal, mesmo em tempo de ADSL, sabemos que imagens demoram para carregar, questão de segundos, mas demoram, e é muito interessante você pelo menos dar uma prévia ao seu usuário do será exibido.

O pessoal do globo.com utilizaram de uma técnica pra isso, carrega a imagem em low e depois em high, confiram na home.
Ricardo Doi says:

20/10/2011 at 0:02

É uma solução interessante mas de aplicação duvidosa.

Como já comentaram, os pontos negativos:

* Carrega duas imagens (a 1a torna-se inútil). Irrisório, mas isso significa mais tempo de render, mais consumo de memória/cache, mais requisição de servidor.

* O loading das imagens é em paralelo, e não sequencial. É improvável, mas a imagem de alta pode até carregar antes da baixa (o que a faz mais inútil ainda).

* É necessário uma div adicional (anti-semântica).

O que costumo fazer é simplesmente, numa div "placeholder", além da url da imagem, deixar uma cor de fundo (cinza). Assim, até a imagem carregar (ou se não carregar), fica um box cinza marcando o espaço.
Não é a mesma coisa, mas usar uma versão low assim é tão inútil quanto usar uma imagem progressiva.

E pensar que na época do netscape tínhamos o lowsrc exatamente para isso.
Edyonil says:

10/05/2011 at 13:14

Prefiro mesmo usar o low. Acho que para isso que a TAG serve. A tecnica acima dificultaria muito a manutenção, sem falar na perda de uma imagem. O jquery é muito bom, mas sim e para quem não sabe programa e ai? Acho o certo usar a TAG para tal sua finalidade e é para isso que serve a Low.

Abraços
Elaine Batista says:

06/05/2011 at 18:10

Muita criatividade , parabens
Leonardo A. Souza says:

04/05/2011 at 0:37

Quanto #mimimi! "Com jQuery é muito melhor"... "Todo mundo tem ADSL"...

Nós desenvolvedores não podemos pensar só no nosso próprio umbigo! E nem pensar que a nossa realidade e a das pessoas que nos cercam é a mesma do resto do mundo!

Pessoal nos comentários falam de ADSL como se fosse um bem farto no Brasil! Não é! Eu moro na cidade do Rio de Janeiro e conheço muita gente que não tem ADSL em casa pq a porcaria da Oi simplesmente não quer, e não são favelados. Isso no Rio, imagina no interior do Tocantins...

Esse povo ou fica na dial-up ou 3G (ou pior: EDGE), que são praticamente equivalentes em termo de velocidade. Com o agravante do acesso mobile muitas vezes ter limite de tráfego.

Solução pra isso são LAN Houses? Piada, né?

E jQuery resolve todos os problemas, né? E quando você precisar trabalhar sem ele, faz o que? Chora? Chama a mamãe?

jQuery é muito bom, mas você já trabalhou em um grande projeto onde não era possível usá-lo? Num ambiente de desenvolvimento (ex: Yahoo Application Plataform) onde vc simplesmente não pode usar bibliotecas externas? Ou num lugar onde seu chefe é fã de outra biblioteca (ou simplesmente não gosta de frameworks)? Acho que dá pra ficar a noite toda citando situações do gênero...

Não acho a solução do Vinicius perfeita (tem o problema da manutenção e de vc carregar uma img inútil e pesada), mas consigo ver utilidade pra ela. Ponto.
Danilo Guedes says:

29/04/2011 at 19:23

Bom, esse método hoje em dia é obsoleto por 2 motivos: Banda Larga acessível e soluções mais rápidas e de fácil manutenção com jquery.

Acho que essa alternativa ainda é prejudicial pelo fato de aumentar o peso da página.
Vinicius da SIlva says:

28/04/2011 at 22:08

Gostei muito.

A criatividade é absurdamente fora do normal.
E bem simples.
Aparabens..

Att,

Vinicius da Silva
Admin - ViverVirtual

ViverVirtual
Fred Vanelli says:

28/04/2011 at 13:51

A técnica é boa e criativa, mas vamos analisar pensando nas respostas do Bruno(ADSL) e do Anderson(Fireworks), com a velocidade da conexão hoje em dia em conjunto com a tecnologia de compressão de imagens, é possível criar imagens bem leves sem ter uma perda significativa na qualidade.

Um bom exemplo é a ferramenta "Save for Web & Devices" do Photoshop, que diminui as vezes até mais de 80% do tamanho do arquivo sem ter uma mudança de qualidade perceptível.
Cassio Dourado says:

26/04/2011 at 20:05

Muito útil essa técnica, apesar de simples...
devemos levar em consideração que nem todos os usuários tem uma internet de alta velocidade.
Parabéns!