Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

CSS Sprites

30 Dec 2010 por Jose

Comentarios: 0

Google sprite

Un factor fundamental que debemos ter en conta á hora de programar unha páxina web é a velocidade de carga. Sempre que traballamos co código temos en conta este factor, pero hoxe comentarei unha técnica que nos permitirá reducir este tempo co uso de CSS. É unha idea que ten a súa orixe nos antigos videoxogos e na necesidade de utilizar mellores gráficos sen que isto afectase ó rendemento, coñecida como Master Grid.

A Master Grid non é máis que unha imaxe que contén todas as imaxes necesarias para a execución do xogo, e para mostrar a imaxe desexada só habería que alterar a posición do fondo; así a páxina web soamente necesita pedir ao servidor unha imaxe.

Esta técnica, chamada CSS Sprites, consiste niso, en cargar unha imaxe que contén a varias imaxes mais pequenas separadas entre se, evitando así descargalas individualmente reducindo o número de peticións HTTP ó servidor e xa que logo a velocidade de carga da páxina web.

Aínda que puidésemos pensar que é o mesmo descargar 5 imaxes de 10Kb que unha de 50Kb, isto non é verdade posto que deberemos ter en conta que para cada imaxe necesitaremos unha conexión nova que ademais levará asociadas unha serie de cabeceiras que tamén aumentarán o tamaño das peticións.

Como utilizalo?

Simplemente usando as propiedades de background-image e background-position cargaremos a imaxe colectora e posteriormente moverémonos sobre esta para mostrar unicamente a zona desexada.

Vexamos algún exemplo: a nosa imaxe basee será esta:

Imaxe colectora

E posteriormente mostraremos cada un dos botóns que usariamos por separado.

O código HTML sería:

<div class="edit_item"></div>
<div class="delete_item"></div>
<div class="create_item"></div>

Mentres que o CSS

.edit_item {background: transparent url(sprites_icon.png) left top no-repeat; height: 46px; width: 40px;}
.delete_item {background: transparent url(sprites_icon.png) -40px top no-repeat; height: 46px; width: 36px;}
.create_item {background: transparent url(sprites_icon.png) -76px top no-repeat; height: 46px; width: 39px;}

Outro caso onde podemos aplicar isto sería nos casos onde cambiamos a imaxe de fondo ao facer un hover. Esta técnica é moi útil para evitar a oscilación que se produce ó cambiar as imaxes, mellorando así o aspecto da páxina.

<a href="#" id="change_icon" class="change_icon"></a>

#change_icon {background: transparent url(sprites_icon.png) -76px top no-repeat; display: block; height: 46px; width: 39px;}
#change_icon:hover {background-position: -40px top; width: 36px;}

Páxinas como XING, Amazon, Yahoo ou Google, utilizan esta técnica para moitas das súas imaxes de fondo.

Xeradores de sprites

Talvez a tarefa máis pesada de todo isto sexa a creación da imaxe colectora, para isto existen diversas páxinas web que facilitan o traballo, tanto á hora de xuntar as imaxes como para localizar a súa posición. Aquí deixo algunhas delas, aínda que hai moitas máis.

Comentarios

0 comentarios. Comentar.

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?