Al hacer una página web, los desarrolladores tienen básicamente dos retos:
- Hacer que la página tenga una buena navegabilidad y un buen rendimiento.
- Crear algo que sea también estético y funcional.
El uso de imagenes en las páginas web sin duda hacen que estas se conviertan en algo mucho más visual y entendible para el resto de los mortales, pero, alerta, un mal uso de estas, bien sea por no manejar bien los tamaños o por tener imagenes en exceso, pueden provocar que tu página se pierda en infinidad de peticiones y con ello empeorar notablemente la funcionalidad y el rendimiento.
Para solventar este problema CSS pone a tu disposición los IMAGE SPRITES
¿QUE SON LOS IMAGE SPRITES?
Un image sprite es una colección de imagenes puesta en una única imagen, la utilización de estos es altamente recomendable en la utilización de imagenes estaticas para una página web, como podrian ser los fondos, o en el caso que os pongo de ejemplo una sencilla barra de botones.
¿PASOS PARA CREAR UN IMAGE SPRITE?
Lo primero, es hacerte con un buen programa para la generación y edición de imagenes tipo Photoshop, en mi caso, generalmente utilizo el GIMP.
- Crear una imagen “grande” donde irán ubicadas todas las imagenes a utilizar y colocar de forma ordenada las imagenes que se utilizarán.
- Localizar las coordenadas x, y iniciales el ancho y el alto de cada una de las imagenes, como se muestra en la imagen a continuación.
Hasta aquí en cuanto a la imagen sólo nos quedaría guardarla en el lugar que hallamos elegido para ubicar las imagenes, yo siempre ubico este tipo de imagenes dentro del CLASSPATH en /CSS/IMAGES/STATIC, le llamaremos barraDeBotones.png y ya lo tendríamos todo controlado …
… vamos a por el HTML + CSS. En este caso vamos a poner la imagen dentro de un input del tipo SUBMIT pero podríamos hacerlo igual para un DIV, un elemento SPAN, o …
ETIQUETA HTML
input id=”ejemploBoton” type=”submit” value=”Envia”
INSTRUCCION CSS
#ejemploBoton{background: url(‘IMAGES/STATIC/barraDeBotones.png’) -60px -1px no-repeat; width: 58px; height:55px; border:none;}
Para el resto de botones, sólo nos quedaría variar las coordenadas, y ya lo tendríamos!