[SOLUCIONADO] ¿Cual es la forma mas correcta de insertar imagenes?

[jakijem]

¿Cual diriais que es la forma más adecuada de insertar imagenes "no esenciales", es decir, de esas que el diseñador ha puesto para hacer bonito, pero que no aportan nada de información esencial:

Código HTML:

<div id="imagen"><img src="imagen.png"></img></div>
 

O asi:

Código HTML:

<div id="imagen">.</div>
 

con este CSS:

Código CSS:

#imagen {
width: 20px;
height: 20px;
text-indent: -9999px;
background-image:url(imagen.png);
}
 

[alzacon]

¿Contenido o presentación? Si dices que es presentación
http://librosweb.es/css/capitulo_1.html

[jakijem]

es presentación, pero con eso no me aclaras nada,

lo que quiero decir es: ¿es correcto poner un <div> vacio (con propiedades de background-image definidas en el css) para poner una imagen que no aporte nada de contenido (presentación) ?

O por el contrario, aunque la imagen tenga mas que ver con la presentación que con el contenido, se debe poner con una etiqueta <img> en el html y luego ya definir sus atributos en el css?

[alzacon]

Está pregunta no es la misma que la de antes...

- Si la imagen es únicamente para mejorar la presentación del contenido entonces va en las hojas de estilo. http://librosweb.es/xhtml/capitulo_6.html

- No es necesario crear un div para poner una imagen de fondo, se pueden poner varias imagenes de fondo en un mismo elemento.

[TommyGun]

¡Hola!
Actualmente con el boom del diseño responsive o sensible te recomendaría que igualmente pongas la imagen con la etiqueta IMG, esto claro si no se trata de un background de página. Pero, en suposición que es un botón, la etiqueta IMG es más correcta.

¡Ojo! Se puede hacer responsive un fondo de un div, pero no va a tomar exactamente el tamaño que debería todo el tiempo.

[jakijem]

Iniciado por TommyGun

¡Hola!
Actualmente con el boom del diseño responsive o sensible te recomendaría que igualmente pongas la imagen con la etiqueta IMG, esto claro si no se trata de un background de página. Pero, en suposición que es un botón, la etiqueta IMG es más correcta.

En este caso en concreto, no se trata ni de backgrounds, ni de botones, sino de imagenes de acompañamiento, como de "relleno" del espacio

Y otra cosa seria también el logo...

En cualquier caso, si las ponemos en el css, ¿es correcto hacerlo con un div que tenga background-image? o cual es la forma correcta de hacerlo?

[BaSingSe]

Si es imagen para rellenar un contenido entonces usa <img> si es para background entonces un <div id="background"> y en css pones tu imagen de fondo

Código CSS:

#background{
  background-image: url("img/banner.jpg");
  background-repeat: no-repeat;
  background-position: center;
  width:100%;
  }
 

El uso del <div> antes de <img> dependerá de ti puedes tanto usarlo como no usarlo..
Ejemplo si es una imagen dentro de un párrafo <p> en lo personal no usaría <div>. Ahora si es una galería de imágenes por ejemplo entonces un <div> te ayudaría a centralizar y ordenar todas las imágenes.

Espero haberte aclarado tu duda.

[jakijem]

Gracias, veo que lo más heterodoxo es aplicar la imagen como <img> siempre que esté en el contenido, aunque no tenga gran relevancia y esté solo para "decorar" (lo que podria entenderse como presentación) y dejar solo la inclusion en <div> para los fondos,