Pregunta Cuándo usar IMG vs. CSS background-image?


¿En qué situaciones es más apropiado usar un HTML? IMG etiqueta para mostrar una imagen, a diferencia de un CSS background-image, ¿y viceversa?

Los factores pueden incluir accesibilidad, soporte de navegador, contenido dinámico o cualquier tipo de límites técnicos o principios de usabilidad.


780
2017-09-23 23:58


origen


Respuestas:


Los usos apropiados de IMG

  1. Utilizar IMG si pretendes tener gente imprime tu página y desea que la imagen se incluya por defecto. -JayTee
  2. Utilizar IMG (con alt texto) cuando la imagen tiene un significado semántico importante, como un icono de advertencia. Esto garantiza que el significado de la imagen se pueda comunicar en todos los agentes de usuario, incluidos los lectores de pantalla.

Usos pragmáticos de IMG

  1. Utilizar IMG más atributo alt si la imagen es parte del contenido como un logotipo o diagrama o persona (persona real, no personas físicas). -sanchothefat
  2. Utilizar IMG si confía en la escala del navegador para representar una imagen en proporción al tamaño del texto.
  3. Utilizar IMG  para múltiples imágenes superpuestas en IE6.
  4. Utilizar IMG con un z-index en orden a estirar una imagen de fondo para llenar toda su ventana
    Tenga en cuenta que esto ya no es cierto con el fondo de CSS3; ver # 6 a continuación.
  5. Utilizando img en lugar de background-image puede mejorar dramáticamente el rendimiento de las animaciones sobre un fondo.

Cuándo usar la imagen de fondo CSS

  1. Use imágenes de fondo de CSS si imagen no es parte del contenido. -sanchothefat
  2. Use imágenes de fondo CSS cuando obra reemplazo de imagen de texto p.ej. párrafos / encabezados. -sanchothefat
  3. Utilizar background-image si pretendes tener gente imprime tu página y no desea que la imagen se incluya de manera predeterminada. -JayTee
  4. Utilizar background-image si necesita mejorar los tiempos de descarga, como con Sprites de CSS.
  5. Utilizar background-image si necesita que solo una parte de la imagen sea visible, como con los sprites de CSS.
  6. Utilizar background-image con background-size:cover para estirar una imagen de fondo para llenar toda su ventana.

671
2018-01-29 18:31



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), utilice el <img /> etiqueta más 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 realiza la sustitución de imágenes de texto, por ejemplo. párrafos / encabezados.


271
2018-01-29 18:32



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

Puedes hacer una transición nativa divImagen de fondo de

#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 ahorra cualquier tipo de animación de JavaScript o jQuery para desvanecerse <img/>es src.

Más información sobre transiciones en MDN.


96
2018-04-10 06:18



Las respuestas anteriores solo consideran el aspecto del Diseño. Lo estoy enumerando en aspectos de SEO.

Cuándo usar <img /> 

  1. Cuando tu imagen necesita ser indexado 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 puedes agregar alt y title atributo.
  5. Imágenes de una página web que desea imprimir utilizando medios impresos css

Cuándo usar CSS background-image

  1. Imágenes puramente usadas para diseñar
  2. Sin relación con el contenido.
  3. Pequeñas imágenes que podemos jugar con CSS3.
  4. Repetición de imágenes (en el icono del autor del blog, el ícono de la fecha se repetirá para cada artículo, etc.,).

Como los usaré basados ​​en estas razones. Estas son buenas prácticas de optimización de imágenes en motores de búsqueda.


55
2018-04-20 17:01



Los navegadores no siempre están configurados para imprimir imágenes de fondo por defecto; si tiene la intención de que la gente imprima su página :)


48
2018-05-22 18:03



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

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 más tarde, cambias 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ías que actualizar el src atributo del apropiado <img> etiqueta 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 quieres que el usuario pueda guardar la imagen (aunque nunca he necesitado hacer esto).


44
2018-02-13 18:29



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


39
2018-02-02 22:30



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

Solo responda a esta pregunta cada vez que quiera colocar una imagen:

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


37
2018-05-22 18:00



Yo agregaría otros dos argumentos:

  • Un img la etiqueta es buena si necesita redimensionar la imagen. P.ej. si la imagen original es de 100 px por 100 px, y quiere que sea de 80 px por 80 px, puede establecer el ancho y alto de CSS de la etiqueta img. No sé de ninguna buena manera de hacer esto usando background-image. EDITAR: Esto ahora también se puede hacer con una imagen de fondo, usando el background-size Atributo CSS3.

  • Utilizando imagen de fondo es bueno cuando necesitas dinámicamente cambiar entre los sprites. P.ej. si tiene una imagen de botón, y desea que se muestre una imagen separada cuando el cursor se mueve sobre el elemento, puede usar una imagen de fondo que contenga tanto los sprites normal y hover, y cambiar dinámicamente la posición de fondo.


24



Primer plano = img.

Fondo = Fondo CSS.


15