[Resolvido] background para carregar img no css economiza tempo?

Israel Elias · Julho 28, 2012

Fala galera beleza

E o seguinte, já ouvir muitas pessoas dizendo que usando background para carregar img com varios icones economiza tempo de carregamento do site.

exemplo de uma img com varios icones abaixo:

o css:

#google{background: url('http://meusite/images/icones.png') no-repeat -455px -198px;width: 100px;height:30px;}

#facebook{background: url('http://meusite/images/icones.png') no-repeat -355px -98px;width: 100px;height:30px;}

#msn{background: url('http://meusite/images/icones.png') no-repeat -155px -38px;width: 100px;height:30px;}

#orkut{background: url('http://meusite/images/icones.png') no-repeat -55px -10px;width: 100px;height:30px;}

*como vocês viram acima no exemplo css, existe 4 carregamento de img usando background, essa img carregada pelo background não vai está baixando 4 vezes a img inteira, no caso acima a img icones possui 33.91KB

*não seria melhor baixar os icone de cada vez e os ícones sejam img separadas! e usando backgroud-image

qual a opinião de vocês

André do Vale · Julho 28, 2012

Sim, é a melhor saída, com certeza. Diminui as requisições HTTP e dá um gás no carregamento do site.

Na montagem de sprites, normalmente uso em 3 tipos, de acordo com o que compõe ela:

PNG 8 bits alpha;
PNG 32 bits;
e JPEG 80% de qualidade;

Imagens de fundo, faixas de repetição, ficam em outro(s) arquivo(s) a parte.

Para melhorar, na sua marcação CSS, agrupe o "background-image" e "background-repeat" dos elementos, ou então modularize em uma única classe ou ID. :thumbsup:

Israel Elias · Julho 28, 2012

modularize em uma única classe ou ID interessante

fiz um exemplo usando classe como o elemento que dá o background no fundo.

ver se está certo!

A img sprite do menu:

a pagina:

<html>
<style type="text/css">
*{margin:0px;padding:0px;position:relative;}
.sprite{background:url(images/sprites.png) no-repeat -1px -1px;}/*classe sprite que vai colocar img em todos que tiver essa class*/

/* o menu */
ul{list-style:none; width:500px;height:auto;float:left;}
ul li{float:left;	margin-right:3px;}
ul li a{width:50px;height:40px;display:block;}   
ul li a:hover#opt1{ background-position: -52px -1px; }
ul li a:hover#opt2{ background-position:-103px -1px; }
ul li a:hover#opt3{ background-position:-154px -1px; }

/*a box*/
#box{	width:50px;height:40px;float:left;}
#box:hover{background-position:-154px -1px; }
</style>
</head>

<body>


<ul>
   <li><a href="#" id='opt1' class='sprite'></a></li>
   <li><a href="#" id='opt2' class='sprite'></a></li>
   <li><a href="#" id='opt3' class='sprite'></a></li>
</ul>

<div id='box' class="sprite"></div>
</body>
</html>

nessa pagina todas a tag que tiver a class .sprite, tera a img sprite no fundo

É isso que você quis dizer com modularize em uma única classe ou ID?!

Marco Bruno · Julho 28, 2012

Bom dia, Israel Elias.

Cada imagem em nossa page é um request, sendo assim, o sprite é uma otima solução para otimização.

Mas não podemos nos esquecer da semântica. Pensando em semântica, não podemos colocar uma imagem que tem uma informação relevante para o usuário no sprite ou sendo carregada pelo css, ou seja, se a imagem passa uma informação para o usuário deverá ser carregada no HTML (tag img).

Att, Marco Antonio.

Israel Elias · Julho 28, 2012

poderia então carregar a img numa class e depois usar o background-position exemplo:

.sprite{background:url(images/sprites.png) no-repeat -1px -1px;}

#opt1{ background-position: -52px -1px; }
#opt2{ background-position:-103px -1px; }
#opt3{ background-position:-154px -1px; }

<div id='opt1' class='sprite'></div>
<div id='opt2' class='sprite'></div>
<div id='opt3' class='sprite'></div>

pois sempre vejo o background sendo carregado dentro de uma (div, li, a e etc ...) nesse caso acima foi carregado numa class poderia ser feito assim?!

Marco Bruno · Julho 28, 2012

Olá, Israel Elias.

Sim pode ser feito dessa forma, só evoluindo sua idéia segue um exemplo abaixo:

.replacement { position: relative; }

.replacement span {
   position: absolute;
   left: 0; top: 0;
   width: 100%; height: 100%;
}

a span { backgroud: url('images/sprite.png') no-repeat; }

.first span { background-position: 100px 100px; }
.second span { background-position: 100px 200px; }
.third span { background-position: 100px 300px; }

<!-- Exemplo de um menu que tera icones -->
<a href="#" class="first replacement">Home<span></span></a>
<a href="#" class="second replacement">Fotos<span></span></a>
<a href="#" class="third replacement">Contato<span></span></a>

Sendo um menu tem que estar em uma lista, mas não entrei nos méritos de semântica, a grande vantagem do código acima é o que você ganha pronto utilizando a classe "replacement".

Qualquer dúvida da um grito!

Att, Marco Bruno.

André do Vale · Julho 28, 2012

Marco Antônio, não entendi essa ideia de "replacement" que você usou. Poderia explanar um pouco mais?

Israel, irei demonstrar como escrevo meu código, utilizando como exemplo o seu post #3:

<html>
<style type="text/css">
* {
 margin: 0px;
 padding: 0px;
 border: none;
}
ul a, body > div {
 background:url(images/sprites.png) no-repeat -1px -1px;
 width: 50px;
 height: 40px;
}
ul {
 display: inline-block;
}
ul li {
 float: left;
 margin: 0 3px 0 0;
 list-style: none;
}
ul a {
 display: block;
}   
ul li:first-child a:hover {
 background-position: -52px -1px;
}
ul li:nth-child(2) a:hover {
 background-position: -103px -1px;
}
ul li:last-child a:hover {
 background-position: -154px -1px;
}
</style>
</head>

<body>

 <ul>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
 </ul>

 <div></div>

</body>
</html>

Esta maneira que faço pode ser considera a pior possível. Pois eu curto trabalhar apenas com hierarquia, e quando meu CSS tende a ficar com 2000 linhas ou mais, assim eu consigo trabalhar muito mais fácil.

Mas enfim, você já possui o entendimento plausível para o uso de sprites. Agora é botar mão na massa nos seus trabalhos! :thumbsup:

Marco Bruno · Julho 28, 2012

Olá, André Campos.

Não entedi qual é a sua dúvida sobre a classe replacement.

O que você não entendeu?

Att, Marco Bruno.

André do Vale · Julho 28, 2012

Qual o porquê do uso de um span vazio para colocar um simples fundo? O elemento pai dele pode receber o fundo sem problemas. E também o posicionamento usado ali no CSS (positivo, alto e sem repetição), creio que não vá dá certo. :thumbsup:

William Bruno · Julho 28, 2012

Oi André,

A técnica de replacement sugerida pelo Marco, é esta aqui do Dave Shea:

http://www.maujor.com/tutorial/image-replacement.php

As vantagens dela são:

-> você não precisa sumir com o texto(usando text-indent)

-> Se a imagem não carregar o conteúdo em texto estará disponível para o usuário

-> Se o css não carregar o texto existe no html de verdade(melhor indexamento por robos)

André do Vale · Julho 28, 2012

@William

Como o próprio Maujor cita: "Para o desespero dos xiitas".

Eu me considero um xiita nisso, kkk. Tag vazia, ao meu ver, é gambiarra maior.

William Bruno · Julho 28, 2012

@William

Como o próprio Maujor cita: "Para o desespero dos xiitas".

Eu me considero um xiita nisso, kkk. Tag vazia, ao meu ver, é gambiarra maior.

hum... esconder o texto, e privar o usuário do conteúdo, é muito pior do que uma tag vazia :lol:

e se considerarmos o ie8 como corte, podemos usar a propriedade "content", eliminando assim a tag vazia. =)

André do Vale · Julho 28, 2012

hum... esconder o texto, e privar o usuário do conteúdo, é muito pior do que uma tag vazia :lol:

e se considerarmos o ie8 como corte, podemos usar a propriedade "content", eliminando assim a tag vazia. =)

Onde trabalho existe diversos "padrões" a seguir, desde o atendimento inicial de orçamento até o back-end. Quando este trabalho chega em mim (front-end), não vou encontrar elemento algum em que é necessário "esconder" o texto. Todo e qualquer texto com que trabalho eu mostro no HTML (que também é visível ao navegador) e posiciono pelo CSS.

É algo bem relativo, e que dependemos também do bom senso do designer.

Gostei da dica de substituir o span (antes sugerido pelo Marco) pelo content em :after ou :before. :thumbsup:

William Bruno · Julho 28, 2012

não vou encontrar elemento algum em que é necessário "esconder" o texto.

hum.. geralmente qndo os designers (sem bom senso), usam fontes que não são de sistema, e são pagas(portanto, não podemos fazer font-face), então essa técnica se justifica.

Israel Elias · Julho 29, 2012

Vlw galera ae pela ajuda muito mesmo!

só queria saber o que o André Campos informou sobre modularize em uma única classe ou ID

Abraços

André do Vale · Julho 29, 2012

Vlw galera ae pela ajuda muito mesmo!

só queria saber o que o André Campos informou sobre modularize em uma única classe ou ID

Abraços

É basicamente agrupar atributos iguais na "asa" de uma classe. Assim, evita de ficar repetindo o mesmo trecho várias vezes pelo código, e apenas repete a classe no HTML. :thumbsup:

Israel Elias · Julho 30, 2012

Só me passa um exemplo Andre! pra matar essa duvida rsrs vlw

André do Vale · Julho 30, 2012

Israel, é como você fez no post #3. Veja que no post #1 estava tudo sendo repetido de forma desnecessária. :thumbsup:

Arquivado

[Resolvido] background para carregar img no css economiza tempo?

Recommended Posts

Israel Elias 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Israel Elias 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marco Bruno 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Israel Elias 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marco Bruno 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marco Bruno 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Israel Elias 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Israel Elias 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real