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




15 Answers

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.

html css image background-image

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




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.




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




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.




Primer plano = img.

Fondo = CSS de fondo.




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




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.



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.




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




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.




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.




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




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.




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




Related