<p>Una de las formas de mejorar el rendimiento de tu sitio web es el uso de <strong>sprites</strong>, una técnica CSS que aprovecha una sola imagen para mostrar múltiples imágenes a partir de ella dentro del sitio.</p> <p>Mejoramos el rendimiento del sitio porque se hace sólo una petición HTTP en vez de que se pidan una por cada imagen. Si tenemos por ejemplo 50 imágenes pequeñas dentro del sitio, cuando un visitante abre la página se consultan en el servidor toda esta cantidad de imágenes. ¿No sería mejor que se pida solo una vez?. Pues es mejor, porque la imagen es cargada solo una vez por el navegador y el CSS (que actúa en el cliente y no en el servidor) se encarga de mapear la imagen. </p> <p>Un ejemplo de un mapa de imagen es el siguiente:</p> <p><img src="http://farm5.static.flickr.com/4018/4480456058_f77db7dc0f_o.png" alt="" /></p> <p>Iconos gratis obtenidos desde <a href="http://pictoico.com/download">pictoico</a>.</p> <p>Quienes usan más los sprites CSS son aquellas webs que tienen demasiadas consultas al minuto, y que buscan reducir en lo posible el tráfico generado paraque sus servidores no colapsen. Google usa sprite, y lo usa muy bien:</p> <p><img src="http://www.google.cl/images/nav_logo8.png" alt="http://www.google.cl/images/nav_logo8.png" /></p> <h2>Creando un Sprite CSS</h2> <p>Lo que haremos con el CSS será "recortar" esta imagen, como se ilustra en las siguientes figuras.</p> <p><img style="float: left;" src="http://farm3.static.flickr.com/2791/4480456070_27d3d3d26b_o.png" alt="" /></p> <p> <img src="http://farm3.static.flickr.com/2765/4480456096_2a32a84752_o.png" alt="" /></p> <p>Debemos saber la coordenada de la esquina superior izquierda del icono a utilizar más su anchura y altura correspondiente para utilizarla luego en el CSS. Se puede obtener con programas gráficos como Photoshop (F8 para abrir la información) o el mismísmo Paint (en la barra de estado).</p> <p><img src="http://farm3.static.flickr.com/2212/4480456114_7295990c6b_o.png" alt="" /></p> <p>Las propiedades del CSS que utilizaremos en conjunto de un documento XHTML semántico y accesible para el sprite son:</p> <ul> <li>background</li> <li>display</li> <li>width</li> <li>height</li> <li>overflow</li> <li>line-height</li> </ul> <p>Comenzemos con el Sprite CSS. Vamos a hacer un menú como el siguiente.</p> <pre class="codigo"><span class="c1"><span class="c2"><span class="c3"><span class="c4"><span class="c5"><ul id="menu"><br /><li><a href="/#enlace1" title="Portada, título del enlace 1">Portada</a></li><br /><li><a href="/#enlace2" title="Carrito de compra, título del enlace 2">Carrito</a></li><br /><li><a href="/#enlace3" title="Buscar, título del enlace 3">Buscar</a></li><br /><li><a href="/#enlace4" title="Guardar, título del enlace 4">Guardar</a></li><br /><li><a href="/#enlace5" title="Eliminar, título del enlace 5">Eliminar</a></li><br /></ul></span></span></span></span></span></pre> <p>En la hoja de estilo, cada enlace se convertirá en imagen teniendo como fondo el mapa de imagen, junto con su anchura y altura correspondiente. Se puede apreciar la propiedad float para hacer que cada enlace flote frente al anterior y así quede un menu horizontal. También las propiedades overflow y line-height para hacer desaparecer el texto. El menu tendrá la misma altura y color de fondo de los enlaces para hacerlo más interesante y largo.</p> <pre class="codigo"><span class="c1"><span class="c2"><span class="c3"><span class="c4"><span class="c5">ul#menu {<br /> height:63px;<br /> background-color:#212121;<br />}<br /><br />ul#menu li {<br /> display: inline;<br />}<br /><br />ul#menu li a {<br /> background: url('sprite.png') no-repeat;<br /> display: block;<br /> width: 63px;<br /> height: 63px;<br /> float: left;<br /> overflow: hidden;<br /> line-height: 10em;<br />}</span></span></span></span></span></pre> <p>Y a continuación, viene lo que se llama sprite, el mapa de las coordenadas para cada uno de los enlaces segun su clase asignada. Algunos enlaces cambiarán según el estado :hover (cuando el mouse esta por encima del enlace) o :active (cuando se presiona). Las coordenadas deben ir en negativo porque la imagen de fondo debe retroceder para posicionarse donde se quiere (para entenderlo y acostumbrarse es mejor experimentarlo).</p> <pre class="codigo"><span class="c1"><span class="c2"><span class="c3"><span class="c4"><span class="c5">ul#menu li a.portada {<br /> background-position: 0 0;<br />}<br /><br /><br />ul#menu li a.carrito {<br /> background-position: 0 -64px;<br />}<br />ul#menu li a.carrito:hover {<br /> background-position: -64px -64px;<br />}<br /><br /><br />ul#menu li a.buscar {<br /> background-position: -192px 0;<br />}<br /><br /><br />ul#menu li a.guardar {<br /> background-position: -128px -128px;<br />}<br />ul#menu li a.guardar:hover {<br /> background-position: -64px -128px;<br />}<br />ul#menu li a.guardar:active {<br /> background-position: 0 -128px;<br />}<br /><br /><br />ul#menu li a.eliminar {<br /> background-position: -256px 0;<br />}<br />ul#menu li a.eliminar:hover {<br /> background-position: -256px -64px;<br />}</span></span></span></span></span></pre> <p>Podemos hacer lo que se nos ocurra. Podemos por ejemplo tener todas las imagenes del sitio en una sola y se gastarán menos recursos. Además, cargará mucho más rápido.</p> <p>¿Olvidé decir que funciona para todos los navegadores?</p> <p><a href="../../archivos/css-sprites.zip">Descarga el ejemplo</a>.</p>
o salir
¡Amigo! te demorarás 10 segundos en crear tu cuenta.
Crear cuenta o acceder
Nick o e-mail Es el nombre visible de tu cuenta y te servirá para acceder a ella. Permitido espacios y cualquier caracter.
Contraseña Una clave única para acceder a tu cuenta.
Transcribe el código en la dirección indicada con el fin de evitar el SPAM.
Identificación Tu identificación es el nick o el e-mail de tu cuenta.
Contraseña La clave de tu cuenta. ¿No la recuerdas?
Recordar por diez días
Disfrutarás de todos los beneficios de DocumentoWeb.
Twitter Facebook Feed RSS
www.DocumentoWeb.com - Licencia Creative Commons
