CSS Sprites para reducir el tiempo de carga web

El problema de las imágenes en una web es su gasto de memoria en el servidor y las llamadas al mismo. Todos queremos máxima rapidez de respuesta para los usuarios y buscadores, pero es difícil que entonces nuestra web sea visual y atractiva. Es decir, muchas imágenes implican ralentizar una página por el tiempo de carga en una web. Para minimizar este problema que se nos presenta, podemos utilizar los CSS sprites. Los sprites consisten en la agrupación de varias imágenes en una sola. Así cuando deseamos visualizar una “imagen individual” llamamos a la parte correspondiente dentro de la global llamada sprite. Por ejemplo, si tenemos 25 imágenes en una página, haríamos una sola llamada al servidor. Por cada llamada al servidor se ralentiza un poco, si sumamos muchos pocos da como resultado un desfase considerable.

Como vemos en el ejemplo, Juntamos todos los pngs y lo llamamos sprite, De esta forma en vez de tener siete imágenes a cargar, tan solo tendremos una.
En muchas ocasiones al pasar el ratón por encima la imagen del botón tiene un un efecto visual y cuando hacemos clic tiene otro distinto. Por tanto, en vez de hacer siete llamadas al servidor lo reducimos a una sola.
El problema que tienen los css sprites es que su función sólo es posible con imágenes estáticas que ya conozcamos con antelación su sitio y lugar. Para imágenes dinámicas, para posts populares o usuarios muy activos no sirven porque cambian con el paso del tiempo y no podemos saber cómo evolucionará. De todas formas sólo quitando el peso de las imágenes estáticas ahorraremos mucho tiempo y espacio.
Es muy recomendable para la página de inicio, podremos combinar el mayo número posible de imágenes para reducir el tiempo de carga y no hacer esperar a usuarios ni a bots. Iconos, redes sociales, botones, todo tiene sitio en la optimización de nuestra web.
Crear sprites Si no sabes programar, diseñar o no tienes conocimientos para crear manualmente los sprites, no te preocupes existen aplicaciones que automatizan el proceso. Sólo debemos insertar las imágenes y automáticamente nos crearan la imagen sprite y el código para su implantación en la web. Herramientas recomendables:

  • CSS Sprites generator: sencillo y fácil de usar. El más recomendado para novatos.
  • Instant Sprite: Muy visual y bonito. También es muy intuitivo.
  • Generador de Sprite CSS: En español, es un poco más complicado pero mucho más completo si tenemos conocimientos de HTML y CSS.
  • Stiches: Aplicación dinámica que vamos visualizando cómo va quedando el sprite.
facebook CSS Sprites para reducir el tiempo de carga webtwitter CSS Sprites para reducir el tiempo de carga webgoogle CSS Sprites para reducir el tiempo de carga webdiggit CSS Sprites para reducir el tiempo de carga webpinterest CSS Sprites para reducir el tiempo de carga weblinkedin CSS Sprites para reducir el tiempo de carga webprint CSS Sprites para reducir el tiempo de carga webemail CSS Sprites para reducir el tiempo de carga webSi te gusto, comparte el articulo.

Artículos Relacionados

Agregar comentario


*

Recibe nuestro newsletter

Suscribete a nuestro newsletter y mantente informado con nuestros últimos artículos, noticias y más. Todo completamente gratis.