Ambas maneras cumplen su función, pero considero que lo que más las diferencia es lo siguiente.
Función url
en CSS
Si tu imagen sólo cumple un objetivo estético o decorativo en el sitio, como en el caso de las imágenes de fondo, y no aporta nada al contenido, entonces es conveniente declararlas en tu hoja de estilos. También es conveniente utilizar este método cuando no quieres que una imagen aparezca cada vez que alguien imprima el sitio.
Atributo alt
en HTML
En cambio, si hablamos de un logo o de una imagen que aporta sentido al contenido de la página, entonces deberías declararlas en la etiqueta <img>
, ya que la misma permite el uso de el atributo alt=""
.
Este atributo proporciona un texto alternativo en los siguientes casos:
- Si el usuario tiene baja conexión, y no puede cargar la imagen.
- Si hay un problema con el
src
y no se encuentra la misma. - Si el usuario utiliza un screen reader.
Debido al uso de palabras, y como mejora la accesibilidad, naturalmente va a mejorar el SEO de tu sitio.
Ejemplo:
<img src="perrojugandopelota.jpg" alt="perro mediano color negro jugando con una pelota"/>
Aquí hay una respuesta más completa en inglés.
Y aquí te dejo un artículo súper completo sobre el atributo alt.