Hoy os comento un tema que me ha parecido muy curioso… se trata de una técnica de optimización o un recurso que nunca antes había utilizado. Con esto puede reducir latencias de cargas de imágenes así como la reducción de líneas de código que conforman la implementación de nuestro sitio web.

Además de incrementar la interactividad con un único fichero con diversas imágenes en la misma, esto permite la creación de botones curiosos que al pasar por encima cambien sin necesidad de utilizar mecanismos de carga previa (preload) o múltiples llamadas a ficheros en el servidor web ya que las variaciones de imagenes están ya cargadas aunque no sean visibles.

El código asociado a esta técnica es una propiedad CSS:

background-position: X Y;
Donde X e Y son valores entre un determinado porcentaje, unas dimensiones en píxeles o 0.

Esto, combinado con una serie de pseudo-propiedades como lo son :hover, :visited, :actived… permite un gran dinamismo a la hora del desarrollo visual de nuestro sitio, como no, evitando botones JavaScript y siguiendo tips y recomendaciones útiles para el SEO.

Un posible ejemplo podría ser el siguiente:


.boton {width: 100px;height:20px; background:url('./imagen.png') left top no-repeat;}
.boton {background-position: 0 0;}
.boton:hover {background-position:-100px 0;}


Evidentemente esto hace que nuestras líneas de código CSS sean menos numerosas y más cargadas de información.

Por el contrario, no todo es precioso y bonito, esta técnica debe ser utilizada para imágenes sin valor para nuestra web, simplemente imágenes que formen parte del diseño y no: fotografías, capturas o en general gráficos que aporte valor añadido a nuestro sitio web, ya que esto serán tenidos en cuenta como un fondo más sin importancia aparente.