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 CSS:
Ver originalh1{
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:
Ver original<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.