Cuándo utilizar IMG vsCSS background-image?

https://stackoverflow.com/questions/492809

20-08-2019
|

Pregunta

En qué situaciones es más adecuado utilizar un HTML IMG la etiqueta para mostrar una imagen, en contraposición a una CSS background-image, y vice-versa?

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

Solución

Usos adecuados de IMG

Use IMG si tiene la intención de tener las personas imprimen su página y usted desea que la imagen se incluya de forma predeterminada. & # 8212; JayTee
Use alt (con z-index texto) 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

Use img más el atributo alt si la imagen parte del contenido como un logotipo o diagrama o persona (persona real, no foto de personas). & # 8212; sanchothefat
Use background-image si confía en la escala del navegador para representar una imagen en proporción al tamaño del texto.
Usar background-size:cover para múltiples imágenes superpuestas en IE6 .
~~Use <=> con un <=> en orden estirar una imagen de fondo para llenar toda su ventana.~~
Nota, esto ya no es cierto con CSS3 background-size; ver # 6 a continuación.
Usar <=> en lugar de <=> puede mejorar dramáticamente el rendimiento de las animaciones sobre un fondo.

Cuándo usar CSS background-image

Utilice imágenes de fondo CSS si el La imagen no forma parte del contenido . & # 8212; sanchothefat
Usar imágenes de fondo CSS cuando haciendo reemplazo de imagen de texto p.ej. párrafos / encabezados. & # 8212; sanchothefat
Use <=> si tiene la intención de tener las personas imprimen su página y usted no desea que la imagen se incluya de forma predeterminada. & # 8212; JayTee
Use <=> si necesita mejorar los tiempos de descarga, ya que con sprites CSS .
Use <=> si necesita que solo una parte de la imagen sea visible, como con los sprites CSS.
Use <=> con <=> para estirar una imagen de fondo para llenar toda su ventana.

Otros consejos

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 etiqueta <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 realiza una sustitución de imagen 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 una imagen de fondo de 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 atenuar el <img/> 's src.

Más información sobre las transiciones en MDN .

Por encima de las respuestas considera sólo el aspecto de Diseño .Yo estoy enumerando en aspectos de SEO.

Cuando el uso de <img />

Cuando Tu Imagen necesita ser indexado por los motores de búsqueda
Si tiene relación con el contenido, no el diseño.
Si la imagen no es demasiado pequeño ( no imágenes icónicas ).
Imágenes donde usted puede agregar alt y title atributo.
Las imágenes de una página web en la que desea imprimir utilizando un material de impresión de css

Cuando el uso de CSS background-image

Imágenes Puramente Utilizados para el Diseño.
Ninguna Relación Con El Contenido.
Pequeñas Imágenes, que podemos jugar con CSS3.
La repetición de las Imágenes ( En el blog de la autora icono , icono de fecha se repetirá para cada artículo, etc.,).

Como yo los uso basado en estas razones.Estas son las 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 de forma predeterminada; 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 tarde .

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 atributo src de la etiqueta <img> 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 respuesta de sanchothefat , pero desde un aspecto diferente. Siempre me pregunto: si eliminaría por completo 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 desea ser " imprimible " 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.

Agregaría otros dos argumentos:

Una etiqueta img es buena si necesita cambiar el tamaño de la imagen. P.ej. 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, usando background-size atributo CSS3.
Usar background-image es bueno cuando necesita cambiar dinámicamente entre sprites . P.ej. 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 al usar < IMG > la etiqueta está relacionada 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 forma de proporcionar dicha información al especificar la imagen a través de CSS y, en ese caso, solo se puede indexar el nombre del archivo de imagen por buscadores. El atributo ALT definitivamente da & Lt; IMG & Gt; etiqueta la ventaja de SEO sobre el enfoque CSS. Es por eso que, 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) usando & Lt; IMG & Gt; etiqueta.

Primer plano = img.

Fondo = fondo CSS.

Utilice imágenes de fondo solo cuando sea necesario, p. contenedores con imagen que mosaicos.

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

Usando 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 <img /> son las 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 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 debe utilizar background-image:

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

Utilice 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 etiqueta <img> 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 las imágenes de fondo 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 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 se debe hacer clic en ella, 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 procesamiento en el iPhone hasta por 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.

IMG carga primero porque el src está en el archivo html en sí mismo, mientras que en el caso de background-image la fuente se menciona en la hoja de estilo para que la imagen se cargue 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 mucha gente aquí ya ha 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 de CSS, por lo tanto, las imágenes de fondo serán ignoradas y no podrá obtener tráfico de los motores de búsqueda (sin beneficio de SEO en resumen).

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 (w.r.t 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 de 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 agregarse a 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 de inicio, por lo tanto, lo envuelve con una etiqueta <a>.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow