Técnica CSS sprite sin background

Sprite es una técnica que nos permite agrupar muchas imágenes bajo una misma, y luego separarlas mediante CSS. Con dicha técnica conseguimos aligerar el peso de la página web y las peticiones que realizamos.

Hasta ahora utilizábamos las propiedades background-image y bakground-position colocando la imagen como fondo de un contenedor. Con este método se consiguen efectos muy logrados de substitución de imágenes sin precarga javascript, para hovers en los links de un menú, por ejemplo.

Nosotros hemos querido ir mas allá y tener una imagen con todos los elementos gráficos de la página web (hover, cabeceras, logos, bordes redondeados de tablas, etc... ) y 'recortar' parcialmente dicha imagen para mostrar sólo una parte dentro de la página. El tiempo de carga utilizando esta técnica se reduce drásticamente. La suma de las imágenes por separado daría un tamaño mayor que el de la imagen agrupándolas todas y, sobretodo, el realizar una sola petición para descargar todo el contenido gráfico de la web reduce muchísimo dicho tiempo.

Vamos a utilizar esta imagen:

Programación web

Control+Z Web technology

Para mostrar el efecto, vamos a suponer que necesitamos utilizar por separado el logo por un lado y el teléfono y el mail por otro. Aquí está el código:

CSS:
  1. body{font-family: verdana,arial,helvetica,sans-serif;font-size:.8em;color:#5f5f5f;margin:50px;}
  2. p{margin-top:50px;}
  3. /*Estilos genericos del sprite*/
  4. .sprite{ display:block;overflow:hidden;position: relative; }
  5. .spriteImg{ position: absoluteborder:none; }
  6.  
  7. /*Medidas y coordenadas especificas del elemento 1*/
  8. .logoContenedor { width: 305px; height: 95px; }
  9. .logoImg { top:-5px;left:-50px;}
  10.  
  11. /*Rollhover*/
  12. /*a.logoContenedor:hover .logoImg{top:-10px;left:-50px;}*/
  13.  
  14. /*Medidas y coordenadas especificas del elemento 2*/
  15. .infoContenedor { width: 200px; height: 50px; }
  16. .infoImg { top:-95px;left:-100px;}

HTML:
  1. Aquí necesito un enlace con el logo:
  2.  
  3. <a class="sprite logoContenedor" href="http://www.controlzeta.net">
  4. <img class="spriteImg logoImg" title="Control+Z Software" src="http://controlzeta.net/ControlZeta.png" alt="Control+Z Software" width="408" height="205" />
  5. </a>
  6.  
  7. Aquí usaremos el teléfono y el email:
  8.  
  9. <a class="sprite infoContenedor" href="http://www.controlzeta.net">
  10. <img class="spriteImg infoImg" title="Control+Z Software" src="http://controlzeta.net/ControlZeta.png" alt="Control+Z Software" width="408" height="205" />
  11. </a>

El ejemplo (y por tanto el código) lo tenéis aquí: http://controlzeta.net/Tutoriales/Sprite/sin-background.php

La explicación técnica es simple.

Necesitamos un contenedor para cada imagen (en este caso un <a> con display:block, podría ser un div u otra elemento) que nos delimite las medidas que tendrá el recorte de la imagen mostrada. Este contenedor debe tener la propiedad "overflow:hidden;" para que no se nos muestre el trozo de imagen que no queremos ver.

Dentro del contendor, insertamos el tag <img> con el src la imagen en cuestión y, importante, las medidas completas de la imagen original. Si no las introducimos, se nos escalará la imagen para adaptarse al contenedor. Además, debemos posicionar la imagen con los atributos css top y left, para "empezar" a mostrar la imagen desde la coordenada que nos interese.

Llevamos tiempo utilizando esta técnica pero en la variante background-image. En algunas ocasiones la hemos usado para reducir el tiempo de carga, pero implicaba problemas semánticos (un logo nunca puede ser una imagen de fondo) y de posicionamiento (una imagen de fondo no puede tener alt o title). Esta nueva técnica solventa los problemas mencionados, por lo que podremos extender el concepto a toda la web, consiguiendo agrupar tantas imágenes como queramos.

Fuente: google.com No porque lo hayamos buscado, que también, sino porque, si os fijáis, google utiliza esta imagen:

google.com

google.com

Curioso, ¿no?

Etiquetas: , , ,

3 comentarios para “Técnica CSS sprite sin background”

  1. shakaran dice:

    No esta nada mal esta técnica, pero no me acaba de convencer que el navegador (al menos firefox) siga interpretando un area de imagen completa (y no la region mostrada) al inspeccionar con firebug.

    De todas formas, esta bastante bien como alternativa.

    Saludos

    PD: Te aconsejo no usar espacios y caracteres como & en los nombres de imagenes.

  2. edu dice:

    Hola Shakaran.

    En nuestro caso, que tenemos el servidor en EEUU por costes y fiabilidad, el número de peticiones es muy importante en los tiempos de carga de la web. El tiempo de cargar un pequeño icono de 300 bytes o el de cargar una imagen de 10 kb con todos los iconos de la página es virtualmente el mismo. Si en esa imagen tenemos 20 iconos, nos ahorramos 19 peticiones, que equivale a muchos milisengudos.

    Hasta ahora usábamos background-image reposicionadas con background-position, pero no lo usábamos en toda la web por semántica (y SEO) ya que una imagen que tiene importancia no debería ser un fondo (además, a los background no se les puede poner ni title ni alt). Con esta técnica, estos problemas desaparecen.

    Si lo que te preocupa es el cargar muchas veces la imagen completa, piensa que solamente la descargas una vez, el resto se obtienen de cache, en memoria del cliente solamente la tienes una vez y el navegador renderiza solamente una parte de la imagen. El cliente no tiene más carga de esta manera, probablemente al contrario.

    Gracias por tu comentario.

  3. shakaran dice:

    Hola Edu,
    Quizás no me haya explicado bien. Mi problema o quizás reticencia a usar este método no es que se cargue muchas veces la imagen completa.

    Mi problema reside en el área que interpreta por ejemplo Firebug cuando inspeccionas una etiqueta usando este método.

    En tu ejemplo si seleccionas la página (en firefox 3.5) las áreas de las imágenes corresponden bien, pero al inspeccionar con firebug, muestran el área de toda la imagen completa y no solo de la zona donde se hace el recorte (clip).

    Realmente si es buena técnica ya que haces buen uso de alt y title, que como comentas no es posible con background-image, pero incluso puedes hacer un pequeño truco para tener background-image, y es asignar una imagen a (por ejemplo un gif de loading) y luego poner un class con el background-image, de esta manera podrás poner el title y alt, pero confundirás a los buscadores, puesto que indexarán la imagen de loading.

    Te aconsejo también si estas interesado en que tus imágenes se cacheen y aceleres el tiempo de carga, es que envíes encabezados de expiración mediante Apache para las imágenes (si no te suena busca por ExpiresType).

    Saludos

Deja un comentario

CAPTCHA Image Audio Version
Reload Image