DEBATE: Imágenes VS fondos.

[buzu]

Recientemente me ha rondado en la cabeza esta pregunta de cuanto una imagen deja de ser una imagen y pasa a ser un fondo. Me explico, como desarrolladores tenemos 2 formas (en realidad más, pero 2 son las más importantes) de insertar imágenes en un documento: la etiqueta IMG de HTML y la regla background-image de CSS. La pregunta es cuando usamos una y cuando la otra?

Tenemos por ejemplo el típico caso de los logotipos. Muchos hacen lo siguiente:

Código HTML:

<h1 id="logo">Super Web</h1>
 

Código CSS:

h1{
text-indent: -1000px;
background-image: url('image.png');
overflow: hidden;
}
 

En mi opinión eso no se debería hacer. El logo es parte de la identidad de tu sitio web, por que querrías rebajarlo a un elemento tan insignificante como un simple fondo? La respuesta es simple: SEO. Y es de hecho tan simple como absurda, pero ese debate lo dejamos para otra ocasión.

Otro ejemplo que podemos examinar son los iconos. Si tenemos por ejemplo una aplicación que muestra una ficha de usuario de la siguiente manera:

Nombre: Superuser
Apellido: Sudo
Localidad: Root
Email: [email protected]

Ahora supongamos que queremos que se vea mejor. Para esto vamos a agregar unos iconos. La pregunta es, lo ponemos como fondo o como imagen?

En donde crees tu que está la linea que divide un fondo de una imagen?
En mi opinión, toda imagen que tiene un significado visual dentro del contexto del documento debería ser implementada mediante la etiqueta IMG. De este modo, yo pondría los iconos así:

Código HTML:

<img src="user.ico.png" alt="Icono de usuario." /> Nombre: Superuser
 

Y la regla image-background la dejaría para casos donde la imagen es sin lugar a dudas un fondo, como en el caso de un degradado que va a lo largo del título de una tabla.

Ahora, muchos pueden decir que los iconos serían mejor si fueran fondos. En ese caso me gustaría escuchar el razonamiento detrás de esta idea ya que el propósito de este debate es definir que linea divide el uso de imágenes mediante etiqueta IMG y mediante regla CSS.

[maycolalvarez]

uno de los usos más frecuentes del uso de fondos CSS background para imágenes a parte del SEO es reducir la cantidad de peticiones al servidor, optimizando así la carga de la página, como se hace en youtube para representar todos los botones y demás formas, así como también para rollover's sin retardo.

El problema viene a la hora de impresión, cuando por defecto en la mayoría de los navegadores está deshabilitada la opción de imprimir las imágenes de fondo, y obliga a que los reportes (al menos los hechos en html) se hagan con IMG, otro problema es el comportamiento de IMG en el baseline cuando se aplican DTD's estrictos en el cual aparece ese molesto "margen" inferior, que tranquilamente puede resolverse con vertical-align:bottom; o casos desesperados de aplicar display:block; a la imagen.

Últimamente he optado por optimizar mis desarrollos con backgrounds CSS, porque supone muchas ventajas, entre ellas que la ruta o path depende del css y no del url actual, con el cual solo me preocupo por vincular el css a mi página y me olvido de recordar imágenes y solo me enfoco en aplicar estilos

[webosiris]

LOGO: si, a pesar de que yo mismo lo pongo como fondo, quizás lo más semántico sea como img. Ma explicale eso a un cliente, y además creo que de los fallos de semántica, es de los menos graves y menos contraproducentes.

ICONOS: decididamente como fondo. La línea está aquí:

Ahora supongamos que queremos que se vea mejor. Para esto vamos a agregar unos iconos.

todo lo que sea con fin estético, tiene que ir como fondo.

[mariomon17]

Yo creo que lo del logo es esencial que sea con img, mas que nada para que Google Images lo indexe, es un acceso directo a la pagina

[buzu]

Buenos aportes.

maycolalvarez, lo de minimizar las peticiones al servidor me parece una buena "excusa" para usar fondos y no imágenes. Ahora me pregunto si alguien ha intentado lograr lo mismo pero con una imagen (Tag IMG) y clip. La cosa se complica sin duda y además trae otros problemas de semántica, que es lo que queríamos solucionar en este caso, pero como ejercicio quizá sea buena práctica, aun que no lo recomendaría para uso en proyectos reales.

webosiris, yo personalmente he usado ambos, logos como imagen y como fondo, aun que siempre he preferidos ponerlos como imagen. En cuanto a los iconos, que pasa cuando vas a poner un icono que no tiene texto, por ejemplo un botón de play al que no quieres ponerle el texto play? En ese caso también lo pondrías como fondo? Digo por que en ese caso el icono ya no es solo para que se vea bien, sino que pasa a ser parte esencial del contenido.

mariomon17, muy buena razón para usar img en el logo. No se me había ocurrido.

[mariomon17]

Yo los iconos los utilizo con img cuandolos envuelvo con una <a>. Si no los envuelvo con <a> generalmente uso sprites a si que empleo CSS.

[buzu]

Muy buena regla para los iconos mariomon17

[webosiris]

Iniciado por buzu

el icono ya no es solo para que se vea bien, sino que pasa a ser parte esencial del contenido.

en caso de que sea contenido, va en el html, por supuesto.
Pero en el ejemplo que pones de user.ico.png no es el caso. Es por eso que estas cosas hay que analizarlas caso por caso, la semántica no se puede automatizar tanto y tiene componentes subjetivos también.

De todas formas mi regla es:
¿lo que voy a agregar es información o es para que quede lindo?
- Para que quede lindo > CSS > fin.
- Es información

¿se puede decir lo mismo con texto?
- Si. Incluyo la información como texto y regreso al inicio
- No. Incluyo la img en HTML > fin.



PD:y con este, llego a mi mensaje 9000

[buzu]

Felicidades por el mensaje 9000!

Y me gusta esto:

la semántica no se puede automatizar tanto y tiene componentes subjetivos también.

[daPhyre]

Sobre los íconos, opino igual... Si es un ícono importante (Como el ícono a mi blog, a mi facebook, un avatar o similar), este debería ser un IMG. Por el contrario, si es simplemente estético (un ícono de una flechita a los enlaces, un ícono que haga que el enlace se vea bonito, pero no proporciona información real), entonces debería ser con CSS.

Además, la ventaja de los íconos con CSS, es que se pueden usar como Sprites, y sobre ello, ya hay varias ventajas extra.

Por el "logo", el razonamiento es igual. Si se trata de un Isotipo, este debería ser una imagen al lado del nombre de la empresa. Por el contrario, si se trata de un Logotipo que sustituye al título principal, este debería ser sustituido mejor con la imagen de fondo. Así, no solo hablamos de lo que es bueno o no para SEO, si no de lo que es correcto para los navegadores que no despliegan CSS.

[mariomon17]

Muy buenos ejemplos!

[cronosmen]

Tampoco olvideis que en una web puede ser que no seamos los unicos que toquemos el código, entonces si participa más gente hay que modularizar mucho y hacerlo muy sencillo, me parece que, no es lo mismo tocar una imagen que una imagen de fondo

[buzu]

cronosmen, tienes razón. No es lo mismo trabajar solo que trabajar en equipo. Creo que cuando se trabaja en equipo puede resultar un poco más ambiguo el tema. Es necesario establecer parámetros a seguir y apegarse a ellos.
Ahora, ¿hasta que punto creen que afecte el reemplazo de texto por imágenes? ¿que tanto creen que se puede justificar? Esto parece ser la misma pregunta, pero no lo es. Si consideramos el ejemplo que puse anteriormente cuando trataba de hacer que mi ficha de datos se viera mejor, puedo agregar los iconos como fondos, pero el texto sigue ahí. Pero ahora hablo de totalmente sacar el texto del área visual del cliente. Por ejemplo, que hacemos en los casos en que el cliente no acepte imágenes? Con un IMG aparece el texto alternativo, pero los fondos no tienen dicho texto.

[daPhyre]

Iniciado por buzu

Con un IMG aparece el texto alternativo, pero los fondos no tienen dicho texto.

Esta es precisamente la esencia de estos formatos. Si tenemos una lista, no queremos que por ejemplo, aparezca

* [flechita] opción 1
* [flechita] opción 2
* [flechita] opción 3

Por tanto, lo mejor es poner las flechas como fondo CSS. Por otro lado, si son íconos nuestras imágenes, tenemos que ponerlos con IMG, para que en caso que que no haya imágenes, se vea así (Por poner un ejemplo):

* [Facebook logo]
* [Twitter logo]
* [Blog logo]

En el caso del popular H1, solo se sustituye un texto por su forma visual, así que dicho efecto es mucho más correcto que tener

[Nombre de mi empresa] Nombre de mi empresa

Claro, el problema es cuando queremos hacer un botón que cambie por medio de un fondo CSS Sprite, pues sin imágenes, este suele quedar sin texto alternativo... La mejor solución podría ser hacer algo similar a lo que hacemos con los H1, aunque muy pocos tomarían en cuenta este detalle.

¿Olvido algún detalle importante a tratar?

[nmaletm]

Hola
Espero no reflotar un tema demasiado antiguo (solo hace un mes), pero me interesa mucho el tema de 'daPhyre'

Iniciado por daPhyre

En el caso del popular H1, solo se sustituye un texto por su forma visual, así que dicho efecto es mucho más correcto que tener

[Nombre de mi empresa] Nombre de mi empresa

Claro, el problema es cuando queremos hacer un botón que cambie por medio de un fondo CSS Sprite, pues sin imágenes, este suele quedar sin texto alternativo... La mejor solución podría ser hacer algo similar a lo que hacemos con los H1, aunque muy pocos tomarían en cuenta este detalle.

A que te refieres por 'lo que hacemos con los H1', podrias decir como se dice, o como lo puedo buscar para encontrar ejemplos y demás...

Gracias!

[sanxuan]

En la línea del comentario de Buzu quiero hacer una pequeña aportación que sin ser habitual no creo que sea novedosa.
Se trataría no de desplazar el texto sino de superponer la simulación del mismo como fondo de un div vacío con tamaño fijo que mediante posición absoluta oculte al texto.
Si no tenemos la imagen o no tenemos CSS, aparecerá el texto en el lugar correcto. No necesitamos un texto alternativo y el texto puede ser sin problema cualquier encabezado.
Los lectores de pantalla deberían seguir leyendo el texto en su lugar y no deberían leer nada en un div vacío.
Para ir un poco más allá aún se podría incluso utilizar la pseudoclase :hover para hacer desaparecer el texto simulado al pasar por encima con el ratón y de esa manera poder seleccionar el texto que permanece debajo.
Me gustaría escuchar consideraciones a éste método. Quizás se os ocurran razones para no usarlo, aparte de la mayor complejidad, que a mí se me estén escapando.

[nmaletm]

Me parece buena, lo de :hover para que se pueda seleccionar, es posible, pero creo que es posible para una página concreta (como una portada) pero no creo que sea bueno como uso habitual, más que nada por que todo se hace complejo.

Con :hover te refieres a CSS o a JS, porque creo que el problema del hover es si seleccionas más de una zona (no solo el titulo), quizá se podría hacer con alguna función de JS (o con JQuery) que detectara el evento de seleccionar.

Serviría este evento (http://api.jquery.com/select/)? Parece solo funcionar con forms, pero no estoy seguro.

Volviendo al tema de el div 'alternativo', se trataria de un div con la misma posición, con un z-index inferior al del 'fondo' o imagen, bastaría con que el div no tuviese color de fondo (solo tuviera imagen).

[daPhyre]

Iniciado por nmaletm

A que te refieres por 'lo que hacemos con los H1', podrias decir como se dice, o como lo puedo buscar para encontrar ejemplos y demás...

Si, creo que eso quedó un poco confuso... Me refiero a que, cuando se tiene una imagen con sprites, se haga algo así:

Código HTML:

<span id="spriteA">Texto Alternativo</span> 

Y ya en CSS sustituir ese spriteA por su respectiva imágenes con Sprites...