Imagem pelo css ou html?

Question

uma duvida simples, mas quero saber qual a forma de puxar uma imagem, pelo proprio HTML ou CSS? existe diferen�a?...

Roniere Almeida · Answer

boa pergunta, mas acho que pelo html seja mais rapido, mas n�o tenho certeza....

Marcelo Pastore · Answer

n�o to lembrando se o carregamento de imagem � mais rapido pelo css ou html....

Roniere Almeida · Answer

tb tenho essa duvida....

Claudio Aguiar · Answer

duvidas, duvidas...huahua...

Lucas · Answer

Al�m de voc�s pensarem no que � mais ou menos r�pido, voc�s devem pensar em sem�ntica web.

Saibam:

HTML: especifica��o / estrutura
CSS: estiliza��o do seu HTML

A tag <img> � inerente ao HTML (veja HTML5 e seus conceitos). Ent�o deixe-o no HTML.

Se a sua d�vida (que n�o me ficou muito clara) for na quest�o de dinamiza��o da imagem, ai j� s�o "outros 500".

Abra�os.

Atenciosamente,

Lucas Garcia Daveis.

Roniere Almeida · Answer

Certo, mas � interessante essa parte, da pagina que contem uma imagem e n�o fica muito tempo carregando, acho muito chato particularmente....

Claudio Aguiar · Answer

n�o entendi bem Lucas....

Lucas · Answer

O que realmente vai demorar � baixar a imagem em si.

Se a imagem for baixada e o HTML tamb�m, mas o CSS ainda n�o (e estivermos carregando a imagem via CSS), ent�o n�o teremos imagem renderizada, apenas quando o CSS for baixado.

Entretanto, se tivermos o HTML e a imagem, o browser j� ter� renderizado ele.

Tendo isso em mente, voc� deve fazer o que o (X)HTML, e depois o HTML 5 / CSS 3 tem mandado fazer, estipulado pelo W3C.

A renderiza��o no browser ap�s elas terem sido baixadas, � muito r�pido.
O maior problema est� na lat�ncia de rede, ent�o:

- Se preocupar com minimiza��o do HTML, do CSS, do Javascript etc � uma �tima ideia.

- Utilizar imagens mais compressadas poss�veis. Veja, "poss�veis", n�o v� deixar sua imagem toda "pixelizada" somente para ganhar performance. Voc� tem que balancear as coisas e encontrar um "meio termo".

- N�o escalar a sua imagem direto no c�digo. Ou seja, voc� baixa uma imagem de 1000 x 1000 e depois deixa ela com 500 x 500: trafegou coisa desnecess�ria pela rede para n�o utilizar isso.

- Utilize o carregamento progressive (JPG) ou interlaced (PNG) das imagens. Veja um simples exemplo aqui:
[url]http://www.patrickmeenan.com/progressive/view.php?img=http://farm2.staticflickr.com/1434/1002257937_021cb46a33_o.jpg[/url]

Enfim. Abra�os.

Roniere Almeida · Answer

perfeita as explica��es, agrade�o!!! vlw mesmo...tb precisava saber mais ....

Claudio Aguiar · Answer

agora sim Lucas, deu pra entender de boa....

Marcelo Pastore · Answer

muito bem explicativo, otimo post....

F�rum Imagem pelo css ou html? #461788