¿Es mejor definir imágenes en formato html o css directo?

Question

Si tengo la opción de insertar imágenes directamente en el html o en el css, digamos por ejemplo un enlace envuelto en una imagen que podría hacer cualquiera ...

<a href="#"><img src="#" alt="" width="" height="" /></a> 

O podría hacer ...

<a id="img" href="#"></a> 

#img {background: url('#') no-repeat; height: #; width: #;} 

¿Qué es mejor y por qué? Ambos funcionan como se desea, pero ¿hay alguna diferencia en los tiempos de carga, etc. o en alguna práctica considerada mejor?

Answer 1

Usar imágenes en HTML es mejor cuando la imagen tiene algún significado contextual ... si se trata de una imagen decorativa sin ningún significado contextual, entonces use CSS. CSS es para presentación, HTML es para contenido.

La mejor sugerencia para que usted pueda determinar si se debe utilizar HTML o CSS para un cuadro es: Si quito la imagen, será el contenido de la página web sigue teniendo sentido?

Una imagen en HTML tiene por objeto proporcionar un significado visual en el contexto, con un retroceso de texto significativo. Se debe evitar el uso de un elemento A sin contenido, ya que su contenido tendrá una relación con el enlace, para navegadores y rastreadores web (como un bot de Google).

Use imágenes CSS solo para fines decorativos. De lo contrario, puede dañar su posicionamiento en los motores de búsqueda. Siempre proporcione un atributo alt para las imágenes, determine qué se imaginará que un eventual visitante no pueda ver ninguna imagen.

Answer 2

Si la imagen tiene contexto, como un logotipo, o una foto, le sugiero que la cargue como <img>. Asegúrese de proporcionar texto alternativo por razones de accesibilidad y SEO.

Si una imagen no tiene contexto en el alcance de la página, entonces creo que el lugar correcto para ella, se define en el CSS que controla el diseño.

La idea es separar tu presentación de tu contenido tanto como puedas. Una imagen puede ser contenido, y si es así, debe estar en ella.

Answer 3

En general, trato de poner tantas imágenes en CSS como sea posible pero Doozer y Mario tienen buenos puntos. Si la imagen es importante para el contexto, puede ir en el HTML. También usaré las etiquetas <img> cuando el texto necesite flotar e imagen.

Una cosa que CSS puede hacer que <img> no puede son CSS image sprites. Este es el único beneficio de rendimiento real que obtendrá de uno u otro. Los sitios web hambrientos de rendimiento como youtube.com combinarán muchas imágenes en una imagen compuesta grande para reducir el tráfico HTTP (y por lo tanto los tiempos de carga de la página). Por ejemplo, este es un sprite tomado de youtube.com.

Answer 4

los siguientes principios: de HTML semántico. Si la imagen es contenido, es decir, una miniatura, foto o botón, use un elemento <img>. Si es más una parte del diseño de la página, una imagen de fondo puede ser más apropiada.

Un ejemplo más específico: Si está utilizando su imagen como un icono al lado de un enlace de texto, utilice una imagen de fondo:

<span class="printIcon" onclick="window.print()">Print</a> 

.printIcon { background: url(...) no-repeat; padding-left: 20px } 

Si la imagen es el propio botón, sin aspecto de texto, use un elemento <img> con un atributo alt apropiado que funcionaría para sustituir la imagen si no está disponible.

<img src="printButton.png" alt="Print" onclick="window.print()" />