Cuándo utilizar IMG vs CSS background-image?

Es una decisión en blanco y negro para mí. Si la imagen es parte del contenido, como un logotipo o diagrama o persona (persona real, no personas de fotos de archivo), use la etiqueta <img /> más el atributo alt. Para todo lo demás hay imágenes de fondo CSS.

El otro momento para usar imágenes de fondo CSS es cuando se hace el reemplazo de imágenes de texto, por ejemplo. párrafos / encabezados.

Me sorprende que nadie haya mencionado esto todavía: Transiciones CSS.

Puede hacer una transición nativa de la imagen de fondo de div:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

Esto guarda cualquier tipo de animación JavaScript o jQuery para desvanecer un <img/>'s src.

Más información sobre las transiciones en MDN.

Las respuestas anteriores solo consideran el aspecto del diseño . Lo estoy listando en aspectos SEO.

Cuándo usar <img />

1. Cuando tu imagen necesita ser indexada por el motor de búsqueda
2. Si tiene relación con el contenido no con el diseño.
3. Si su imagen no es demasiado pequeña (no imágenes icónicas ).
4. Imágenes donde se puede añadir alt y title atributo.
5. Imágenes de una página web que desea imprimir utilizando print media css

Cuándo usar CSS background-image

1. Imágenes Utilizadas Exclusivamente para Diseñar.
2. Ninguna Relación Con El Contenido.
3. Pequeñas imágenes que podemos jugar con CSS3.
4. Repitiendo imágenes (En el icono del autor del blog, el icono de fecha se repetirá para cada artículo, etc.,).

Ya que los usaré basados en estas razones. Estas son buenas prácticas de Optimización de Motores de Búsqueda de Imágenes.

Los navegadores no siempre están configurados para imprimir imágenes de fondo de forma predeterminada; si desea que la gente imprima su página:)

Si tiene su CSS en un archivo externo, entonces a menudo es conveniente mostrar una imagen que se usa con frecuencia en todo el sitio (como una imagen de encabezado) como imagen de fondo, porque entonces tiene la flexibilidad de cambiar la imagen más tarde.

Por ejemplo, supongamos que tiene el siguiente HTML:

<div id="headerImage"></div>

...y CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

Unos días después, cambia la ubicación de la imagen. Todo lo que tienes que hacer es actualizar el CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

De lo contrario, tendría que actualizar el atributo src de la etiqueta <img> apropiada en cada archivo HTML (suponiendo que no esté utilizando un lenguaje de scripting del lado del servidor o CMS para automatizar el proceso).

También las imágenes de fondo son útiles si no desea que el usuario pueda guardar la imagen (aunque nunca he necesitado hacer esto).

Casi lo mismo que la respuesta de sanchothefat, pero desde un aspecto diferente. Siempre me pregunto: si eliminara completamente las hojas de estilo del sitio web, ¿los elementos restantes solo pertenecen al contenido? Si es así, hice bien mi trabajo.

Algunas respuestas complican el escenario aquí. Esta es una situación muy simple.

Solo responde a esta pregunta cada vez que quieras colocar una imagen:

¿Es esto parte del contenido o parte del diseño?

Si no puedes responder a esto, ¡probablemente no sepas lo que estás haciendo o lo que quieres hacer!

Además, NO considere al lado de las dos técnicas, solo porque desea ser "imprimible" o no. También NO ocultar contenido desde un punto de vista SEO con CSS. Si te encuentras administrando tu contenido en archivos CSS, te disparas en la pierna. Esto es solo una decisión trivial de lo que es contenido o no. Todos los demás aspectos deben ser ignorados.

Añadiría otros dos argumentos:

• Una etiqueta img es buena si necesita cambiar el tamaño la imagen. Por ejemplo, si la imagen original es 100px por 100 px, y desea que sea 80px por 80px, puede establecer el ancho CSS y la altura de la etiqueta img. No conozco ninguna buena manera de hacer esto usando background-image. EDITAR: Esto ahora también se puede hacer con una imagen de fondo, utilizando el background-size Atributo CSS3.

• Usando background-image es buena cuando necesitas cambiar dinámicamente entre sprites. Por ejemplo, si tiene una imagen de botón y desea que se muestre una imagen separada cuando el cursor se desplace sobre el elemento, puede usar una imagen de fondo que contenga los sprites normal y hover, y cambiar dinámicamente la posición del fondo.

Foreground = img.

Background = CSS background.

Utilice imágenes de fondo solo cuando sea necesario, por ejemplo, contenedores con imágenes que se teselan.

Uno de los mayores PROS al usar IMÁGENES es que es mejor para SEO.

Usando una imagen de fondo, necesita especificar absolutamente las dimensiones. Esto puede ser un problema significativo si realmente no los conoce de antemano o no puede determinarlos.

Un gran problema con <img /> son las superposiciones. ¿Qué pasa si quiero una sombra interior CSS en mi imagen (box-shadow:inset 0 0 5px rgb(0,0,0,.5))? En este caso, dado que <img /> no puede tener elementos secundarios, debe usar posicionamiento y agregar elementos vacíos que equivalen a marcado inútil.

En conclusión, es bastante situacional.

Un beneficio más del uso de la etiqueta está relacionado con el SEO, es decir, puede proporcionar información adicional sobre la imagen en el atributo ALT de la etiqueta de imagen, mientras que no hay forma de proporcionar dicha información al especificar la imagen a través de CSS y en ese caso solo el nombre del archivo de imagen puede ser indexado por los motores de búsqueda. El atributo ALT definitivamente le da a la etiqueta ventaja SEO sobre el enfoque CSS. Por eso, según mi opinión, es mejor especificar las imágenes que desea clasificar bien en los resultados de búsqueda de imágenes (por ejemplo, Búsqueda de imágenes de Google) utilizando la etiqueta .

Un par de otros escenarios donde background-image debe usarse:

• Cuando quiera que la imagen cambie cuando el ratón se mueva sobre ella.
• Cuando desee agregar esquinas redondeadas a la imagen. Si utiliza img, la imagen se filtra por las esquinas redondeadas.

Use CSS background-image en un caso de múltiples skins o versiones de diseño. Javascript se puede usar para cambiar dinámicamente una clase de un elemento, lo que lo obligará a renderizar una imagen diferente. Con una etiqueta IMG, puede ser más complicado.

He aquí una consideración técnica: ¿se generará la imagen dinámicamente? Suele ser mucho más fácil generar la etiqueta <img> en HTML que intentar editar dinámicamente una propiedad CSS.

En lo que respecta a la animación de imágenes utilizando CSS translateX/Y (La forma correcta de animar html) - Si usted hace una grabación de Chrome Línea de tiempo de CSS de fondo-las imágenes que se animan vs etiquetas IMG que se animan verá que los tiempos de pintura son drásticamente más cortos para las imágenes de fondo CSS.

Hay otra razón! Si tiene un diseño responsivo y desea dividir el uso de imágenes de baja, media y alta resolución para dispositivos a través de consultas de medios, también debe usar fondos.

¿Qué pasa con el tamaño de la imagen? Si utilizo la etiqueta img, el navegador escala la imagen. Si utilizo css background, el navegador solo corta un trozo de la imagen más grande.

Además, tengo una sección de galería que tiene tamaños de imagen inconsistentes, por lo que aunque esas imágenes obviamente se consideran contenido, utilizo imágenes de fondo y las centro en divs con un tamaño establecido. Esto es similar a lo que hace Facebook en sus álbumes..

Img es una etiqueta html por una razón, por lo que debe usarse. Para referenciar o ilustrar cosas, personas por ejemplo: en artículos.

También si la imagen tiene un significado o tiene que ser seleccionada para un img es mejor que un de fondo css. Para todas las demás situaciones, creo que se puede usar un fondo css .

Aunque, es un tema que necesita ser discutido una y otra vez.

Estudiante de Web de París, Francia

Solo una pequeña para agregar, debe usar la etiqueta img si desea que los usuarios puedan 'hacer clic derecho' y 'guardar imagen'/'guardar imagen', por lo que si tiene la intención de proporcionar la imagen como un recurso para otros.

El uso de imagen de fondo (por lo que sé en la mayoría de los navegadores) deshabilitará la opción de guardar la imagen directamente.

Una pequeña entrada, He tenido problemas con las imágenes responsivas ralentizando el renderizado en iphone hasta por un minuto, incluso con imágenes pequeñas:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

Pero al cambiar a usar imágenes de fondo el problema desapareció, esto solo es viable si se dirige a navegadores más nuevos.

IMG cargue primero porque el src está en el propio archivo html, mientras que en el caso de background-image el origen se menciona en la hoja de estilos, por lo que la imagen se carga después de cargar la hoja de estilos, retrasando la carga de la página web.

HTML es para el contenido y CSS es para el diseño. ¿Es necesaria la imagen y necesita ser recogida por los lectores de pantalla? Si la respuesta es sí, entonces ponga la imagen en el HTML. Si es puramente para el estilo, entonces puede usar la propiedad background-image en CSS para inyectar la imagen. Al igual que muchas personas aquí ya han mencionado, puede usar un pseudo elemento en la imagen si lo desea.

También tenga en cuenta que la mayoría de las arañas de los motores de búsqueda no indexan imágenes de fondo CSS, por lo tanto, las imágenes de fondo serán ignoradas y no podrá obtener ningún tráfico de los motores de búsqueda (sin beneficio SEO en resumen).

Donde como todas las imágenes definidas con etiquetas están indexadas (a menos que se excluyan manualmente) y pueden traer tráfico de los motores de búsqueda si sus atributos title/alt y nombres de archivo están optimizados correctamente (w.r.t alguna palabra clave).

Puede usar etiquetas IMG si desea que las imágenes sean fluidas y se escalen a diferentes tamaños de pantalla. Para mí estas imágenes son en su mayoría parte del contenido. Para la mayoría de los elementos que no forman parte del contenido, uso sprites CSS para mantener el tamaño de descarga mínimo a menos que realmente quiera animar iconos, etc.

Utilizo image en lugar de background-image cuando quiero que sean 100% estirables, lo que es compatible con la mayoría de los navegadores.

Si desea agregar una imagen solo para el contenido especial de la página o para una sola página, debe usar la etiqueta IMG y si desea poner una imagen en más de una página, debe usar la Imagen de fondo CSS.

Otro fondo-image PRO: Fondo-imágenes para <ul>/<ol> listas.

Utilice imágenes de fondo si forman parte del diseño general y se repiten en varias páginas. Preferiblemente en forma de sprite de fondo para la optimización.

Use etiquetas para todas las imágenes que no forman parte del diseño general y que probablemente se coloquen una vez, como imágenes específicas para artículos, personas e imágenes importantes que merecen agregarse google images.

** La única imagen repetida que encierro en una etiqueta <img> es el logotipo del sitio/empresa. Debido a que la gente tiende a hacer clic en él para ir a la página de inicio, por lo tanto, lo envuelves con una etiqueta <a>.