1

Tengo la duda de que es mejor o a que se considera buena practica.

Hacer esto

        <div>
            <img src="img/IMG_20201119_111508.jpg" alt="">
        </div>

O hacer esto

.img{
  margin:10px auto;
  border-radius:5px;
  border: 1px solid #999;
  padding:13px;
  width:220px;
  height:220px;
  background-size: 100% 100%;
  background-repeat:no-repeat;
  background:url(../img/imagen.jpg);
  background-size: cover;
  }
.img img{
  width: 100%;
}
<div class="img"></div>

Se que son dos maneras de incluir imagenes en el proyecto, peor que es mas conveniente a nivel de buena practica. puede ser que la de css sea mas para fondos? en el caso de las del html son mas para pequeñas imagenes dentro de las paginas ?

1
  • Personalmente es mejor ubicar imágenes en el HTML ya que permite el SEO de la imagen además de que es más ordenado. Commented el 8 dic. 2020 a las 12:59

2 respuestas 2

3

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.

2
  • 1
    Gracias midvetkin, te agradezco la respuesta super clara y gracias por los articulos. Los revise y quedo claro. Si pudiera dar puntos te los daria. Saludos y gracias Commented el 8 dic. 2020 a las 18:20
  • 1
    @Valpenr_994 si que puedes, marcando la como aceptada
    – user128299
    Commented el 8 dic. 2020 a las 19:02
1

Eso depende de la función que va cumplir la imagen en la página. Me explico:

  • Si es una imagen meramente decorativa y no representa ningún significado para el contenido deberías usar background: url("ruta de tu imagen"); o puedes incrustar la imagen con la etiqueta con el atributo alt sin contenido (alt="") y de esta manera los lectores de pantallas no la tendrán en cuenta y los navegadores sabrán que no representa nada importante para el significado del contenido.

  • Si la imagen si representa sentido para el contenido, pues deberás incrustarla con la etiqueta y el atributo alt con su respectiva descripción de la imagen. De esta manera los navegadores tendrán otro recurso más para saber de que trata tu página ya que leen el contenido del atributo alt y también ayudarás a comprender mejor el contenido de tu página a los usuarios que usan lectores de pantalla (accesibilidad).

En conclusión. Cualquiera de las dos opciones es una buena práctica. La cuestión es el sentido que va a tener la imagen en tu página. Esto último es lo que te debe hacer decidir como incrustar las imágenes en tu web.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.