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

¿En qué situaciones es más apropiado usar una IMGetiqueta HTML para mostrar una imagen, en lugar de un CSS background-image, y viceversa?

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

Usos adecuados de IMG

1. Úselo IMGsi desea que las personas impriman su página y desea que la imagen se incluya de forma predeterminada. - JayTee
2. Use IMG(con alttexto) cuando la imagen tenga un significado semántico importante, como un icono de advertencia . Esto garantiza que el significado de la imagen pueda comunicarse en todos los agentes de usuario, incluidos los lectores de pantalla.

Usos pragmáticos de IMG

1. Utilice el IMGatributo más alt si la imagen es parte del contenido , como un logotipo o diagrama o persona (persona real, no personas de fotografía). - sanchothefat
2. Úselo IMGsi confía en la escala del navegador para representar una imagen en proporción al tamaño del texto.
3. Úselo IMG para múltiples imágenes superpuestas en IE6 .
4. Use IMGcon un z-indexpara estirar una imagen de fondo para llenar toda su ventana.
   Tenga en cuenta que esto ya no es cierto con CSS3 background-size; ver # 6 a continuación.
5. El uso en imglugar de background-imagepuede mejorar drásticamente el rendimiento de las animaciones sobre un fondo.

Cuando usar CSS imagen de fondo

1. Use imágenes de fondo CSS si la imagen no es parte del contenido . - sanchothefat
2. Use imágenes de fondo CSS cuando reemplace la imagen del texto, por ejemplo. párrafos / encabezados. - sanchothefat
3. Úselo background-imagesi desea que la gente imprima su página y no desea que la imagen se incluya de forma predeterminada. - JayTee
4. Úselo background-imagesi necesita mejorar los tiempos de descarga, como con los sprites CSS .
5. Úselo background-imagesi necesita que solo una parte de la imagen sea visible, como con los sprites CSS.
6. Use background-imagecon background-size:coverpara estirar una imagen de fondo para llenar toda su ventana.

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 fotografía), utilice la <img />etiqueta 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 realiza la sustitución 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 divla imagen de fondo de un:

#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 JavaScript o jQuery para desvanecer un <img/>'s src.

Más información sobre transiciones en MDN .

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

Cuándo usar <img />

1. Cuando su imagen necesita ser indexada por un 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 alty titleatribuir.
5. Imágenes de una página web que desea imprimir utilizando medios impresos css

Cuando usar CSS background-image

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

Como los usaré en función de estos motivos. 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 por defecto; si tiene la intención de que la gente imprima su página :)

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, 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 srcatributo de la <img>etiqueta apropiada en cada archivo HTML (suponiendo que no esté utilizando un lenguaje de script 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 eliminaría 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 demasiado el escenario aquí. Esta es una situación muy simple.

Simplemente responda a esta pregunta cada vez que desee colocar una imagen:

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

Si no puede responder esto, ¡probablemente no sepa lo que está haciendo o lo que quiere hacer!

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

Yo agregarí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 la altura CSS 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-sizeatributo CSS3.

• Usar background-image es bueno cuando necesita 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 encuentra sobre el elemento, puede usar una imagen de fondo que contenga los sprites normales y de desplazamiento, y cambiar dinámicamente la posición del fondo.

Un beneficio más 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 imagen, mientras que no hay forma de proporcionar dicha información al especificar la imagen a través de CSS y caso solo los motores de búsqueda pueden indexar el nombre del archivo de imagen. El atributo ALT definitivamente le da a la etiqueta <IMG> ventaja de SEO sobre el enfoque CSS. Por eso, según yo, 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 <IMG>.

Primer plano = img.

Fondo = fondo CSS.

Utilice las imágenes de fondo solo cuando sea necesario, por ejemplo, contenedores con imagen que los mosaicos.

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

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

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

En conclusión, es bastante situacional.

Un par de otros escenarios donde se background-imagedeben usar:

• Cuando desea que la imagen cambie cuando el mouse se encuentra sobre ella.
• Cuando desee agregar esquinas redondeadas a la imagen. Si lo usa img, la imagen se escapa de las esquinas redondeadas.

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

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

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

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 animadas, verá que los tiempos de pintura son drásticamente más cortos para CSS Imágenes de fondo.

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

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

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 debe ser clicable, una img es mejor que un fondo CSS . Para cualquier otra situación, creo, se puede usar un fondo CSS .

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

Estudiante web de París, Francia

Solo una pequeña para agregar, debe usar la etiqueta img si desea que los usuarios puedan hacer clic con el botón 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 la imagen de fondo deshabilitará (hasta donde yo sé en la mayoría de los navegadores) la opción de guardar la imagen directamente.

Una pequeña entrada, he tenido problemas con las imágenes receptivas que ralentizan el renderizado en iPhone por hasta un minuto, incluso con imágenes pequeñas:

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

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

IMGcargue primero porque srcestá en el archivo html en sí mismo, mientras que en el caso de background-imagela fuente se menciona en la hoja de estilo, por lo que la imagen se carga después de cargar la hoja de estilo, retrasando la carga de la página web.

HTML es para contenido y CSS es para diseño. ¿Es necesaria la imagen y los lectores de pantalla deben recogerla? Si la respuesta es sí, coloque la imagen en el HTML. Si es solo para diseñar, puede usar la propiedad de imagen de fondo en CSS para inyectar la imagen. Tal como 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 las imágenes de fondo CSS, por lo tanto, las imágenes de fondo serán ignoradas y no podrá obtener tráfico de los motores de búsqueda (en resumen, no hay beneficio de SEO).

Donde todas las imágenes definidas con etiquetas están indexadas (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 están optimizados correctamente (escriba alguna palabra clave).

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

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

Si desea agregar una imagen solo para el contenido especial en la página o solo para una 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 <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 ser agregadas a las imágenes de Google.

** La única imagen repetida que adjunto en una <img>etiqueta 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, lo envuelves con una <a>etiqueta.