css - sirve - img html
¿Las imágenes cargan más rápido en HTML o CSS? (5)
Si cargo una imagen usando este html en mi barra lateral
<img src="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" height="200px" width="200px" alt="image" />
¿Se cargaría más rápido / más lento que si en su lugar coloco la barra lateral donde mi style.css (que se llama en el encabezado) tiene
.image {
width: 200px;
height: 200px;
background-image: url(''http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png'');
}
<div class="image"></div>
El navegador comenzará a descargar la imagen tan pronto como lea la url de la imagen en HTML y colocará la url de la imagen en el archivo css. Se descargará cuando se aplique esa regla de clase o CSS. Siempre te recomiendo usar sprites CSS para incluir imágenes en tu web. páginas.
Esto se puede verificar fácilmente con Firebug (en la red), herramientas de desarrollo de Chrome (en la red), Fiddler o cualquier otro sniffer HTTP que prefiera.
Si coloca la imagen en CSS como imagen de fondo, la imagen solo se descargará cuando esa clase esté realmente utilizada y sea visible . Si lo coloca en un img , se descargará inmediatamente y bloqueará el procesamiento incluso si es invisible.
Al final, ambos son tan rápidos si se cuenta la velocidad a la que la imagen se carga per se. La verdadera pregunta es si el rendimiento percibido es mejor, ya que el orden en que se descarga la imagen puede ser diferente dependiendo de dónde coloque su elemento.
Sin embargo, me preocuparía más sobre los otros aspectos. Tener la imagen como imagen de fondo significa:
- La imagen no es un contenido
- No es imprimible
- Puede usar un sprite para reducir el número de solicitudes HTTP (lo que mejora el rendimiento)
- Es más lento animar la imagen de fondo que img
Hice una pequeña prueba con el complemento YSlow de mozilla.
Sin ningún reseteo css, jquery / javascript y otras cosas, obtuve los resultados
Usando tuve esta estructura dentro
<div id="wrap">
<img src="images/5.png" alt="" />
</div><!--/wrap-->
y el YSlow me había dicho que la página se cargó en 0.149 s
Usando fondo: url ()
Luego puse mi imagen como fondo en un div llamado "wrap" y el resultado fue un poco más rápido, el promedio del tiempo de carga fue de alrededor de 0.125 s.
En esta prueba, utilicé una imagen png que tiene 10.5 KB (200px X 200px).
Por cierto, debes pensar cuándo usar o cuándo usar una etiqueta (como span / div, etc.). Para tener una estructura profesional y agradable, debes usar la etiqueta solo para imágenes de contenido. La forma más sencilla de ver es desactivar el CSS. Si tiene el contenido necesario (como galerías, logotipos, avatar, etc.) sin CSS, esto significa que utilizó el método correcto. No es útil cargar algunas cosas como imágenes con esquinas redondeadas y otras cosas de diseño usando etiquetas, no importa si va a ser un poco más rápido. Piensa que una persona que tiene una conexión lenta quizás use una versión sin css, por lo que para él no es útil cargarla con un pequeño rincón de una caja. Solo quiere ver contenido, no cosas estúpidas cuando su ancho de banda es lento y limitado.
Si los coloca en el archivo CSS, solo comenzarán a descargarse una vez que se haya descargado el archivo CSS. Esto podría hacer que el enfoque CSS sea un poco más lento. Aparte de eso, debería ser lo mismo.
Un argumento para que las imágenes css sean más rápidas es que las aplicaciones web que utilizan muchas imágenes pequeñas pueden combinarlas en una gran imagen embaldosada y usar css para recortar el archivo de imagen de origen de acuerdo con los límites de la subimagen contenida. Reducir el número de viajes redondos al servidor para obtener imágenes adicionales puede aumentar en gran medida los tiempos de carga de dichas aplicaciones. De hecho, google usa esta idea en muchas de sus propias aplicaciones como gmail, aunque puede ser una tarea ardua administrarla manualmente.