Diferencia en el rendimiento entre los elementos de etiqueta img vs divs con imágenes de fondo?

Question

¿Existen diferencias en el rendimiento o el comportamiento de carga/almacenamiento en caché al mostrar imágenes en etiquetas img frente a divisiones con fondos de imágenes?

ejemplo Mi:

tengo un sitio con muchas imágenes superpuestas, algunas de las cuales tendrá que cargar dinámicamente con JavaScript. Una cuestión es que necesito anclar las imágenes a la derecha del elemento, para poder hacer un buen efecto de borrado a la derecha. Debido a esto, estaba usando un div con una imagen de fondo colocada a la derecha. No pude entender cómo hacer esto con img pero dado que los divs me funcionan, no sabía si esto importaría ...

Answer 1

AFAIK, el caché de los navegadores tiene las mismas imágenes, ya sea que estén en un DIV o IMG. En cualquier caso, creo que este es uno de esos casos en los que el rendimiento específico se define como un detalle de implementación interno para cada motor de renderizado (y posiblemente los navegadores creados a partir de ellos). Como tal, está fuera de nuestro control como diseñadores/desarrolladores y está sujeto a cambios de navegador a navegador y de versión a versión. En otras palabras, no pasaría mucho tiempo preocupándome por eso.

Answer 2

La única diferencia que se puede concebir que esto:

No se puede escalar imágenes como fondo, a pesar de que pueda por etiquetas img. Esto abriría un escenario en el que las imágenes de fondo se cargan más rápido porque te obliga a tener el tamaño nativo correcto en lugar de descargar la imagen completa y escalarla. Sin embargo, lo contrario podría ser cierto: dado que no le importaba tanto la calidad de la imagen, podría entregar imágenes más pequeñas a su página y ampliarlas.

Me quedaría con lo que sea más limpio (y más consistentemente - IE/FF/Chrome/Safari/etc).

Answer 3

Diferencias técnicas Sí, lo más notable es que puede establecer el ancho/alto de una etiqueta IMG y estirará la imagen, lo que puede ser útil en algunas situaciones.

Lo principal que debe tener en cuenta es el contexto de la imagen dentro del documento HTML. Si la imagen es contenido, digamos una imagen en una galería, usaría una etiqueta IMG. Si es solo parte de la interfaz, podría usar un div en su lugar.

Answer 4

La principal diferencia de rendimiento consiste en utilizar imágenes de fondo que le permiten utilizar sprites CSS. Tener una imagen que contenga una gran cantidad de imágenes de su página significa que el usuario solo tiene que hacer una solicitud en lugar de una para cada imagen.

Answer 5

Hay una gran diferencia en realidad. El rendimiento de div bg es mejor. pero puede establecer el ancho y alto de la etiqueta img.

que uno debe utilizar es depende en qué situación se encuentra.

Answer 6

Otra diferencia es con diseños sensibles. Si tiene un elemento que solo se muestra en ciertos anchos de pantalla (es decir, no en teléfonos móviles), todavía cargará la imagen si está especificada en el html (usando display: ninguno por ejemplo), pero la mayoría de los navegadores ahora lo harán NO cargue la imagen si se especifica una imagen de fondo en las reglas de consulta de CSS no utilizadas. Muchos de los primeros diseños receptivos fueron criticados porque todavía usaban el mismo ancho de banda que los sitios de tamaño completo.

También es útil con tales diseños porque puede especificar fácilmente diferentes imágenes para diferentes tamaños de pantalla. "Retina" se muestra en las tabletas e incluso las computadoras portátiles ahora no se verán mejor sin 2x res gráficos. Entonces ... incluso si no haces tales cosas ahora, probablemente sea una buena práctica entrar, ¡porque podrías necesitarla pronto!

Answer 7

Creo que al usar el atributo background-image en el div, el diseño de la página se carga primero y la imagen está presente en los divs que se cargan después de cargar el dom. así que al usar background-image, el diseño html se carga más rápido en el navegador web.