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

css background image size

Question

¿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.

Answer 1

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.

Answer 2

¡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.

Answer 3

¿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.

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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.

Answer 10

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 en stock), use la <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 un reemplazo de imagen de texto, por ejemplo. párrafos / encabezados.

Answer 11

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.

Answer 12

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

Answer 13

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 .

Answer 14

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>.

Answer 15

Por encima de las respuestas se considera solo el aspecto del diseño. Lo estoy enumerando en los aspectos de SEO.

Cuándo usar <img />

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

Cuándo usar background-image CSS

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

Como los usaré basándome en estas razones. Estas son buenas prácticas de optimización de motor de búsqueda de imágenes.

Answer 16

Primer plano = img.

Fondo = CSS de fondo.

Answer 17

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.

Answer 18

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.

Answer 19

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).

Answer 20

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.

Answer 21

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).

Answer 22

Un par de otros escenarios donde se debe utilizar la background-image :

• Cuando quieres que la imagen cambie cuando el mouse está sobre ella.
• Cuando quieras añadir esquinas redondeadas a la imagen. Si usa img , la imagen se filtra fuera de las esquinas redondeadas.

Answer 23

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

Un gran problema con <img /> es superposiciones. ¿Qué box-shadow:inset 0 0 5px rgb(0,0,0,.5) si deseo una sombra interna de 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 la posición y agregar elementos vacíos que equivalgan a un marcado inútil.

En conclusión, es bastante situacional.

Answer 24

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 .

Answer 25

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.

Answer 26

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.

Answer 27

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.

Answer 28

IMG carga primero porque el src encuentra en el propio archivo html, mientras que en el caso de background-image de background-image la fuente se menciona en la hoja de estilo, por lo que la imagen se carga después de cargar la hoja de estilo, lo que retrasa la carga de la página web.

Answer 29

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> .

Answer 30

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

Además, si la imagen tiene un significado o si se puede hacer clic, un img es mejor que un fondo css . Para todas las demás situaciones, creo que se puede utilizar un fondo css .

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

Estudiante web de paris, francia