Carregar imagens
Publicado em: 2011-04-25 — 63.051 visualizacoes
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>
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2011-04-25 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2011/04/25/carregar-imagens/trackback no seu site.
Eu apliquei e funcionou, muito legal.
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.
É 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.
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
Muita criatividade , parabens
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.
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.
Gostei muito.
A criatividade é absurdamente fora do normal.
E bem simples.
Aparabens..
Att,
Vinicius da Silva
Admin – ViverVirtual
ViverVirtual
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.
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!
Não vejo vantagens em fazer essa técnica com CSS. O jquery resolvi isso de uma forma melhor. Além do mais terei que carregar duas imagens para o efeito…
Fica aí mais um bom exemplo das folhas de estilos.
Idéia simples, mas bem objetiva.
Sim é uma solução CSS, e acho desnecessário o uso do jQuery caso seja apenas um simples site com carregamento de imagens. Ou no caso de não ser usado em outra parte do site, seria apenas um trabalho a mais.
No caso do sprites, basta usar melhor os sprites. Porque não um sprite para recursos menores e outro para maiores?
Se o logo ficasse no sprite do carregando por exemplo, o tempo seria reduzido com certeza, porque a pessoa já teria carregado esse sprite mais leve.
É questão de saber aplicar.
Não concordo com essa gambiarra.
Hoje com ferramentas como o Fireworks, onde podemos exportar as imagens com uma qualidade um pouco menor, imperceptível, acho que esta solução não seria a ideal. Acho que a diminuição da qualidade já renderia uma otimização no carregamento, ou até mesmo, como mencionado, utilizar algum recurso da jQuery, porém também sou contra isso, pois terá de carregar um plugin exclusivamente para carregamento de imagem.
Quanto a solução do Guilherme, de usar sprites, não pode se atribuir a todo o site, pois uma imagem contendo todas as imagens de um site poderia levar alguns segundos a mais para ser carregada, concordo em utilizar esta prática para elementos comuns, como botões, menus, etc., mas não para todas as imagens do site.
Portanto a minha solução seria: Utilizar imagens com uma qualidade menor, sem utilizações de “workarounds” com duas imagens ou utilizar javascript para fazer o carregamento de imagens.
Vale como conhecimento para quem usa uma imagem no CSS Sprite de todo o site, mas concordo Bruno que diz: “em tempos de ADSL”.
Quem não tem ADSL em casa é porque conecta em ADSL em Lan House.
É uma técnica interessante, que usa fatores muito básicos.
Gera um retrabalho na questão de imagens, mas se for um site institucional com poucas atualizações anuais vale o esforço.
Assim, essa solução é apenas CSS e tals… E nem todo desenvolvedor tem, pode ou deve obrigatoriamente utilizar jQuery (ou qq outro motor js) pra resolver todos os problemas.
E se todas as imagens do site estivessem em uma imagem só? Teríamos um carregamento otimizado, e pouca utilização de js
No caso do meu site se fez necessário pois a imagem em questão faz parte do menu em Java e os plugins de Jquery que tentei colocar conflitaram com o javascript do menu, fazendo com que parasse de funcionar.
Não recomendo o método para ser aplicado em todo um site, mas apenas como mais uma opção para uma situação excepcional, como a acima descrita.
A opção de Jquery substituindo a imagem por uma barra de loading pode nem sempre ser a melhor. Uma barra de loading rodando no lugar do banner do site pode ressaltar a idéia de lentidão na conexão.
Versatilidade é tudo na web!
Parabéns, sua solução é bem interessante e até já tinha utilizado-a, porem me deparei com o problema relatado por Bruno, onde tinha que ter uma imagem de baixa qualidade para cada imagem de boa qualidade, se o seu caso for parecido com o meu onde era uma galeria.
Entretanto uma solução eficiente é utilizando jquery com a função load(), você ao invés de exibir a imagem de baixa resolução poderia colocar uma imagem de(carregando) e só apos a imagem de alta resolução tiver totalmente carregada, você a exibe.
Conhecimento válido 🙂
Ah achei meio tenso, porque sugere que o site ia teeeoricamente abrir mais rápido, mas é apenas uma ilusão.
Isso vai dar mais trabalho e vai ficar mais pesado, porque agora são 2 imagens. Mas sei la, se inventaram deve ser porque alguem teve a necessidade de fazer isso.
Em tempos de ADSL fazer algo assim para um browser completo é meio desnecessário, se a pessoa se dá o trabalho de criar duas imagens para cada estilo e se dedicar a escrever html dobrado para isso é mais fácil e ágil fazer um sprite para otimizar esse processo.
Se for para dispositivo mobile, use media-queries e seja feliz.
Isso até certo ponto é interessante, mas hoje com jQuery podemos ter soluções bem melhores e mais ágeis usando plugins como por exemplo: On Demand, Lazy Load e outros.
A parte contra deste método é que além de carregar 2 imagens diferentes (sendo 1 delas inútil depois o carregamento), dificulta a manutenção. Visto que caso uma imagem precise ser trocada, a sua versão em baixa qualidade terá que ser substituida também.
De qualquer forma, vale como conhecimento. 🙂