Los Sprites, los podemos definir como la agrupación de varias imágenes en una sola, por ejemplo si en nuestra página web tenemos colocadas 4 fotos, estamos realizando 4 peticiones y 4 respuestas del servidor a diferentes tiempos de carga, la intención de los sprites es realizar 1 foto común para estas cuatro, de esta manera tan solo realizaríamos 1 petición y 1 respuesta.
Como podreís ver en la imagen, son dos interruptores, en este caso los use para el efector de apagar o encender la luz en la home. Uno efectúa el link para encender y el otro efectúa la acción de apagar la luz.
¿Como realizar la llamada a un interruptor o al otro?
Lo realizamos mediante siempre mediante el CSS, ya que es lo más limpio.
Encender luz: .lightSwitcher{position:absolute;top:190px;right:40px;z-index:101;background:url(/images/interruptor.png);background-repeat:no-repeat;background-position:0 0px;width:41px;height:41px;padding:0 0 0 20px;outline:none;text-decoration:none;}
Apagar luz: .turnedOff{color:#ffff00;background:url(/images/interruptor.png) no-repeat;background-position:0 -41px;width:41px;height:41px;}
#clickHere{position:absolute;top:-25px;left:130px;}
Como podéis ver llamo a la misma imagen, he destacado la palabra background-position ya que es esta nomenclatura la que dirá que parte de la foto mostramos.
Conclusión
Es un poco más costoso de hacer, pero también es la opción más recomendada, no dudéis en usar está técnica siempre que se pueda usar Sprites, es fundamental para un buen pagespeed.
0 comentarios:
Publicar un comentario