Divs con fondos de imágenes frente a etiquetas de img

Question

Me preguntaba cuál es la mejor práctica con respecto a los divs con fondos y etiquetas img. Entiendo que los divs con fondos pueden tener cosas encima de ellos y lo que no, pero si es el caso con solo tener una imagen, ¿cuál es el método preferido? Quizás una mejor pregunta es ... ¿las etiquetas img están obsoletas? Cuando tienes una imagen que es un enlace ¿deberías usar una etiqueta img o un div?

Gracias! Matt Mueller

Answer 1

Fondos de div deberían ser solo eso: imágenes de fondo para el estilo. las etiquetas img deberían ser para cuando estás visualizando una imagen real como una imagen, digamos que estás mostrando una imagen de algo. debe usar una etiqueta de imagen y no un div bg

Answer 2

¿La imagen de diseño o contenido es?

si la imagen está relacionada con el diseño, lo usaría CSS y tenerlo en un div ... si su contenido relacionado con lo tendría en una img ...

Espero que ayude!

Answer 3

La etiqueta IMG no está obsoleta. Lo usa con imágenes dinámicas, que van y vienen de su sistema.

Las imágenes de fondo en divs son útiles cuando tiene un conjunto estático de imágenes que forman parte de su diseño. A veces puede fusionarlos en una imagen grande para minimizar el tiempo de carga y la cantidad de solicitudes HTTP por página.

Answer 4

Piense en ello como el marcado semántico:

1. Si se trata de una "imagen" en la página, por lo que el significado de la página, utilice la etiqueta img.

2. Si es algo que no es tan significativo para el significado de la página, es decir. imagen de fondo, use una imagen de fondo en cualquier tipo de elemento (no solo un div).

Esta diferencia realmente no importa cómo la página se muestra en la mayoría de los navegadores, pero tiene un significado diferente a aquellos que no están interpretación de las imágenes visuales.

Trate de imaginar cómo interpretarán los elementos las personas con discapacidad visual.

También puede haber un comportamiento ligeramente diferente por los motores de búsqueda. No sé si los motores de búsqueda recogerán imágenes de fondo para su búsqueda de imágenes. Si realmente quieres que la imagen salga, una etiqueta img es más segura.

Answer 5

Una buena forma de ver esto es ver su sitio con las hojas de estilo desactivadas. Descubrirá rápidamente que no aparecen todas las etiquetas DIV con imágenes de fondo. Todas sus imágenes de etiquetas IMG están justo donde deberían estar. Utilizaría las etiquetas DIV con imágenes de fondo para todos los aspectos del diseño y el diseño del sitio, y usaría etiquetas IMG para todo lo demás.

Las etiquetas IMG tienen propiedades alt y propiedades de títulos. Estos se utilizan en lugar de la imagen cuando no se carga o en lugar de la imagen solo en buscadores de texto o de tipo lector de pantalla.