Nos hemos acostumbrado a utilizar imágenes de fondo pero Google no nos ayuda a indexar con este tipo de prácticas. Aquí propongo una solución para emular el resultado de poner una imagen en background-size: cover;

Vamos a estudiar el caso detenidamente con un par de ejemplos de cómo sería em ambos casos.

Usando imágenes con background-size: cover

Primero definimos el html:

<div class="image"></div>

Ahora definimos los estilos:

.image {
    height: 300px;
    background-position: 50% 50%;
    background-size: cover;
}

Ejemplo de background-size:cover

Ventajas de usar background-size:cover

  • No nos tenemos que preocupar que las imágenes rellenen el div.
  • Las imágenes se adapta para los diferentes tamaños del div (entendiendo que tiene un ancho variable y media queries para la altura del mismo).

Desventajas de usar background-size:cover

  • Para SEO nos va fatal.
  • No podemos asignar atributos de accesibilidad a las imágenes (por ejemplo alt).

Sin usar imágenes con background-size: cover

Primero definimos el html:

<div class="image">
    <img src="image.png">
</div>

Ahora definimos los estilos:

.image {
    position: relative;
    height: 300px;
    overflow: hidden;
}
.image img{
    position: absolute;
    top: 50%;
    left: 50%;
 
    width: auto;
    height: auto;
    min-width: 101%;
    min-height: 101%;
    max-width: none;
    max-height: none;
 
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

Ejemplo de sin background-size:cover y con la imagen en línea

background-size

Ventajas de no usar background-size:cover

  • Las imágenes nos indexa muy bien.
  • Podemos asignar atributos de accesibilidad a la imagen (por ejemplo alt).

Desventajas de no usar background-size:cover

  • Nos dificulta el que las imágenes se adapte y a menudo tiene un comportamiento raro.

En resumen: como siempre se tiene que valorar el sentido que tiene utilizar un método u otro para poner una imagen en un contenedor. Hay que valorar la finalidad del desarrollo y si las ventajas pesan más que las desventajas. Antes de lanzaros a una u otra opción parad un momento, pensad y luego ya empezáis a maquetar. Y a pesar de todos estos pasos uno se puede equivocar igualmente e incluso os valdrá la pena volver para atrás.

¿Qué penáis vosotros?

Categorías: CSS, HTML, SEO
Etiquetas:, , ,
Si necesitas una url corta puede usar: codygo.es/2013

Deja un comentario