Detalles: Sprite CSS
El martes comenté en Twitter que estaba trabajando en un sprite CSS para un sitio web y quería mostrarlo, porque aunque parece simple es una tarea muy minuciosa. Es entretenido.
Un sprite CSS es una técnica en la que se unen varias imágenes en una sola, se hace para optimizar espacio y tiempo de carga de un sitio web. Es posible ahorrar hasta el 60% del peso de los archivos y pueden reducirse decenas de imágenes a una sola.
En la imagen puede verse el sprite en desarrollo arriba y el resultado final abajo. Se ve igual se desarrolla diferente y rinde mejor.
Tip: Los sprites son muy populares dentro del desarrollo de juegos RPG, supongo que de allí viene la idea.
5 comentarios
Comments are closed.
y no podemos ver el sitio completo?
Aún no, es un sitio web en desarrollo y no acostumbro a compartir el trabajo hasta que no se lanza oficialmente.
De cualquier forma la idea de la categoría de Detalles es mostrar precisamente eso, los detalles 😉
Más que ahorrar ancho de banda, es útil reducir el número de peticiones al servidor… cuando te mueres de tráfico es una técnica para aliviar la carga en tus servers.
Si, y unir sprites CSS con CSS3 va mejorar increíblemente el rendimientos de los sitios web. Conforme pasa el tiempo los diseños van siendo más vistosos y ocupan menos, hasta es viable considerar fuentes «especiales».
Aunque por otro lado me preocupa Javascript, cada día hay más webs que de alguna forma extraña estan sobrecargando el navegador. Twitter por ejemplo.
Me gusta tu blog, la mayor parte de su post es precisamente lo que estaba necesitando, ¿me interrogo si podria ofrecer a blogeros invitados a escribir contenido para usted?. Seria interesante publicar un artículo sobre la mayoria de los temas que escriben aquí. Una vez más, un articulo genial!