Imagem pelo css ou html?
uma duvida simples, mas quero saber qual a forma de puxar uma imagem, pelo proprio HTML ou CSS? existe diferença?
Claudio Aguiar
Curtidas 0
Respostas
Roniere Almeida
22/11/2013
boa pergunta, mas acho que pelo html seja mais rapido, mas não tenho certeza.
GOSTEI 0
Marcelo Pastore
22/11/2013
não to lembrando se o carregamento de imagem é mais rapido pelo css ou html.
GOSTEI 0
Roniere Almeida
22/11/2013
não to lembrando se o carregamento de imagem é mais rapido pelo css ou html.
tb tenho essa duvida.
GOSTEI 0
Claudio Aguiar
22/11/2013
duvidas, duvidas...huahua
GOSTEI 0
Lucas
22/11/2013
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.
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.
GOSTEI 0
Roniere Almeida
22/11/2013
Certo, mas é interessante essa parte, da pagina que contem uma imagem e não fica muito tempo carregando, acho muito chato particularmente.
GOSTEI 0
Claudio Aguiar
22/11/2013
não entendi bem Lucas.
GOSTEI 0
Lucas
22/11/2013
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.
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.
GOSTEI 0
Roniere Almeida
22/11/2013
perfeita as explicações, agradeço!!! vlw mesmo...tb precisava saber mais .
GOSTEI 0
Claudio Aguiar
22/11/2013
agora sim Lucas, deu pra entender de boa.
GOSTEI 0
Marcelo Pastore
22/11/2013
muito bem explicativo, otimo post.
GOSTEI 0