[html] Cuándo usar IMG vs. CSS background-image?


Answers

Es una decisión en blanco y negro para mí. Si la imagen es parte del contenido, como un logotipo, diagrama o persona (persona real, no personas de fotos), utilice el atributo <img /> tag plus 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.

Question

¿En qué situaciones es más apropiado usar una etiqueta HTML IMG para mostrar una imagen, a diferencia 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.




¿Qué hay del tamaño de la imagen? Si uso la etiqueta img, el navegador escala la imagen. Si utilizo el fondo CSS, el navegador simplemente corta un fragmento de la imagen más grande.




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




En cuanto a animar imágenes usando CSS TranslateX / Y (la forma correcta de animar html): si haces una grabación de la línea de tiempo de Chrome de imágenes de fondo de CSS animadas frente a etiquetas animadas de IMG, verás que los tiempos de pintura son drásticamente más cortos para CSS imágenes de fondo.




Otra imagen de fondo PRO: imágenes de fondo para listas <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 formen parte del diseño general, y es muy probable que se coloquen una vez, como imágenes específicas para artículos, personas e imágenes importantes que merecen agregarse a las imágenes de Google.

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




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




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

Además, si la imagen tiene un significado o debe poder hacer clic en ella, una img es mejor que un fondo CSS . Para cualquier otra situación, creo que se puede usar un fondo CSS .

Aunque es un tema que debe discutirse una y otra vez.

Web Student de Paris, Francia




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




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




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 el estilo, puede usar la propiedad de imagen de fondo en CSS para inyectar la imagen. Tal como mucha gente aquí ya ha mencionado, puede usar un pseudo elemento en la imagen si lo desea.




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

Un gran problema con <img /> es superposiciones. ¿Qué pasa si quiero 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 el posicionamiento y agregar elementos vacíos, lo que equivale a un marcado inútil.

En conclusión, es bastante situacional.




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 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 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ía que actualizar el atributo src de la etiqueta <img> apropiada 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).




Primer plano = img.

Fondo = Fondo CSS.




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?

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

Además, NO TENGA en cuenta al lado de las dos técnicas, simplemente porque desea ser "amigable 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 disparaste en la pierna. Esta es solo una decisión trivial de lo que es contenido o no. Cualquier otro aspecto debe ser ignorado.




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 debe ser indexada 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 puede agregar alt y atributo de title .
  5. Imágenes de una página web que desea imprimir utilizando medios impresos css

Cuándo usar background-image CSS

  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 de motor de búsqueda.




Links