Dadas las 2 formas principales de insertar imágenes en HTML, ¿cuáles son las ventajas y desventajas de utilizar cualquiera de estos enfoques?

Esas dos formas son al menos semánticamente diferentes.

Puede usar la imagen de fondo en CSS para cargar ilustraciones, iconos e imágenes relacionadas con la interfaz de usuario de su documento HTML. Una propiedad de imagen de fondo se usa para agregar estilo a su contenido y no se debe usar para agregar contenido en sí.

Utiliza imágenes tradicionales cuando necesita insertar una imagen que es parte del contenido de su página web. Por lo tanto, si escribe una publicación de blog, puede contener algunas fotografías que desea incluir. Esas fotografías son imágenes, pero no tienen nada que ver con la interfaz de usuario de su blog. Ellos están contentos.

Creo que esta es una buena pregunta. Si lo pensamos detenidamente, puede ser útil de muchas maneras.

¿Cuándo preferimos la etiqueta a background-image ?

1. Imágenes dinámicas Si las imágenes se cargan dinámicamente (en la base de datos o desde algún servicio de alojamiento de imágenes), difícilmente puede declararlas en CSS.
2. Imagen perezosa cargada. Si le preocupa la velocidad de carga de todas las imágenes en su página web, probablemente pueda usar bibliotecas de carga lenta como tuupola / jquery_lazyload para cargar la imagen. Con esto, puede declarar la imagen como y el src será reemplazado más tarde con el campo data-original . Sin embargo, no hay forma de controlar cuándo cargar la imagen en CSS image-background, que siempre se cargan a la vez.
3. Optimizado para el rastreo de acciones sociales. Hay blogs que comparten botones como . Google Plus rastreará la primera imagen de la página y la agregará a su uso compartido. Por lo tanto, si está utilizando el fondo de la imagen, no hay forma de que esta imagen se muestre al compartir. Y una imagen en un intercambio siempre es útil.

¿Cuándo preferimos background-image a la etiqueta :

1. Reutilización de imagen. Para las imágenes que se usan más de una vez en una página, en lugar de usar etiquetas para escribir repetidamente, usar una clase CSS y establecer background-image puede hacer que el código sea limpio y flexible para el cambio.
2. Pequeños iconos en una imagen grande. Para disminuir las solicitudes HTTP, si está utilizando muchas imágenes de iconos pequeños (en lugar de fuentes de iconos), se recomienda colocar estos iconos pequeños en una imagen más grande y usar background-image y background-image-position para establecer la posición para cada icono

Si leemos nuevamente la preferencia anterior, probablemente lleguemos a la conclusión de que, en la mayoría de los casos, se prefiere la background-image para imágenes más pequeñas y la etiqueta para imágenes más grandes , aunque esto puede cambiar de acuerdo con la explicación anterior.

Una buena regla general: si una persona ciega que usa su sitio encuentra útil el texto alternativo, use un img.

Si va a poner una línea azul en el lado izquierdo de su página para marcar su sitio, esa es una imagen de fondo. La “barra lateral izquierda azul” es inútil para una persona ciega. Si va a publicar un gráfico que indique que las naranjas son mejores que las manzanas, un texto alternativo que diga “Naranjas = 7 AwesomeUnits; Apples = 2.5 AwesomeUnits” sería útil para una persona ciega.

Además: ¿Cuándo usar IMG vs. CSS-imagen de fondo?

Solo hay una forma principal de insertar una imagen en un documento HTML, y es a través de etiqueta. Esta es la única forma que es semánticamente correcta y tradicionalmente válida; especialmente para lectores de pantalla.

Agregar una imagen como imagen de fondo no es lo mismo, especialmente ahora que HTML5 y CSS3 le permiten producir gradientes “sobre la marcha”. Estas se consideran imágenes que serán difíciles de diferenciar de las imágenes para “contenido”, incluso para lectores de pantalla.