html background - ¿Cuándo usar IMG vs.CSS de imagen de fondo?




size position (25)

¿En qué situaciones es más apropiado usar una etiqueta IMG HTML para mostrar una imagen, en lugar de una background-image CSS, 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.


Answers

Si tiene su CSS en un archivo externo, 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 adelante.

Por ejemplo, digamos que tienes 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, 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ía que actualizar el atributo src de la etiqueta <img> adecuada en cada archivo HTML (suponiendo que no esté utilizando un lenguaje de scripts del lado del servidor o CMS para automatizar el proceso).

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


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

Puedes transicionar de forma nativa la imagen de fondo de un 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 el src <img/> .

Más información sobre transiciones en MDN .


¡Hay otra razón! Si tiene un diseño receptivo 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.


Utilice la imagen de fondo CSS en un caso de múltiples máscaras o versiones de diseño. Se puede usar Javascript para cambiar dinámicamente una clase de un elemento, lo que lo obligará a mostrar una imagen diferente. Con una etiqueta IMG, puede ser más complicado.


Los navegadores no siempre están configurados para imprimir imágenes de fondo por defecto; Si quieres que la gente imprima tu página :)


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

El uso de la imagen de fondo (según lo que conozco en la mayoría de los navegadores) desactivará la opción de guardar la imagen directamente.


¿Qué pasa con el tamaño de la imagen? Si uso la etiqueta img, el navegador ajusta la imagen. Si uso el fondo css, el navegador simplemente corta un fragmento de la imagen más grande.


Otro beneficio del uso de la etiqueta <IMG> está relacionado con el SEO, es decir, puede proporcionar información adicional sobre la imagen en el atributo ALT de la etiqueta de la imagen, mientras que no hay manera de proporcionar dicha información cuando se especifica la imagen a través de CSS. solo el motor de búsqueda puede indexar el nombre del archivo de imagen. El atributo ALT definitivamente le da a la etiqueta <IMG> una ventaja SEO sobre el enfoque de 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) mediante la etiqueta <IMG>.


Yo añadiría otros dos argumentos:

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

  • Usar la imagen de fondo es bueno 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 desplaza sobre el elemento, puede usar una imagen de fondo que contenga los sprites normal y flotante, y cambiar dinámicamente la posición del fondo.


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


Usos apropiados de IMG

  1. Use IMG si pretende que otras personas impriman su página y desea que la imagen se incluya de forma predeterminada. - JayTee
  2. Use IMG (con texto alt ) cuando la imagen tenga 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 la IMG

  1. Use el atributo alt de IMG plus si la imagen es parte del contenido , como un logotipo o diagrama o persona (persona real, no personas con fotografía). - sanchothefat
  2. Use IMG si confía en la escala del navegador para renderizar una imagen en proporción al tamaño del texto.
  3. Utilice IMG para múltiples imágenes de superposición en IE6 .
  4. Use IMG con un z-index para estirar una imagen de fondo y llenar toda su ventana.
    Tenga en cuenta que esto ya no es cierto con el tamaño de fondo CSS3; ver # 6 a continuación.
  5. El uso de img lugar de background-image 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 CSS si la imagen no es parte del contenido . - sanchothefat
  2. Utilice imágenes de fondo CSS al hacer reemplazo de imagen de texto, por ejemplo. párrafos / encabezados. - sanchothefat
  3. Use background-image si pretende que otras personas impriman su página y no desea que la imagen se incluya de forma predeterminada. - JayTee
  4. Use background-image si necesita mejorar los tiempos de descarga, como con los sprites CSS .
  5. Use background-image si necesita que solo una parte de la imagen sea visible, como con los sprites CSS.
  6. Use background-image de background-size:cover para estirar una imagen de fondo para llenar toda la ventana.

Uso imagen en lugar de imagen de fondo cuando quiero que sean 100% extensibles, lo cual es compatible con la mayoría de los navegadores.


HTML es para contenido y CSS para diseño. ¿Es la imagen necesaria 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 de imagen de fondo en CSS para inyectar la imagen. Al igual que muchas personas aquí ya han mencionado, puedes usar un pseudo elemento en la imagen si lo deseas.


Use imágenes de fondo solo cuando sea necesario, por ejemplo, contenedores con imagen que se mosaico.

Uno de los principales PROS mediante el uso de IMÁGENES es que es mejor para SEO .


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

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

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

Si no puede responder esto, probablemente no sepa qué está haciendo o qué quiere hacer.

Además, NO considere las dos técnicas, solo porque desearía ser "compatible con la impresora" o no. Tampoco oculte el contenido desde un punto de vista SEO con CSS. Si te encuentras administrando tu contenido en archivos CSS, te disparas en la pierna. Esta es solo una decisión trivial de lo que es contenido o no. Cualquier otro aspecto debe ser ignorado.


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


Otra imagen de fondo PRO: imágenes de fondo para las listas de <ul> / <ol> .

Use imágenes de fondo si son 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 ser agregadas a las imágenes de Google.

** La única imagen repetida que encierro en una etiqueta <img> es el logotipo del sitio / empresa. Debido a que las personas tienden a hacer clic en él para ir a la página de inicio, entonces lo envuelven con una etiqueta <a> .


También tenga en cuenta que la mayoría de las arañas de los motores de búsqueda no indexan las imágenes de fondo de 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 un beneficio SEO en breve).

Donde todas las imágenes definidas con etiquetas se indexan (a menos que se excluyan manualmente) y pueden atraer tráfico de los motores de búsqueda si sus atributos de título / alt y nombres de archivo se optimizan correctamente (escriba alguna palabra clave).


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


Primer plano = img.

Fondo = CSS de fondo.


En una pequeña entrada, he tenido problemas con las imágenes sensibles que ralentizan la representación en el iPhone durante 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.


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


Puede usar etiquetas IMG si desea que las imágenes sean fluidas y se amplíen 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 son parte del contenido, uso sprites CSS para mantener el tamaño de descarga mínimo a menos que realmente quiera animar iconos, etc.


En lo que respecta a la animación de imágenes con CSS TranslateX / Y (la forma correcta de animar html): si realiza una grabación de Chrome Timeline de imágenes de fondo CSS animadas frente a etiquetas IMG que están siendo animadas, verá que los tiempos de pintura son drásticamente más cortos para el CSS imágenes de fondo.


Actualmente no hay manera de seleccionar el elemento primario de un elemento en CSS.

Si hubiera una manera de hacerlo, estaría en cualquiera de las especificaciones actuales de los selectores de CSS:

Mientras tanto, tendrá que recurrir a JavaScript si necesita seleccionar un elemento padre.

El borrador de trabajo del nivel 4 de los selectores incluye una pseudo-clase :has() que funciona igual que la implementación de jQuery . A partir de 2018, esto todavía no es compatible con ningún navegador .

Usando :has() la pregunta original podría resolverse con esto:

li:has(> a.active) { /* styles to apply to the li tag */ }




html css image background-image