Todos los que gestionamos uno o varios sitios web nos preocupamos de analizar si está o están optimizados, utilizando conocidas herramientas para ello. Cuando se efectúan estos análisis se muestran en los resultados advertencias de que se deben utilizar CSS Sprites, indicando las imágenes que se deben incluir. Este método se ocupa de agrupar o empaquetar varias imágenes en una sola. Con ello se consigue que el peso resultante sea inferior al original, así como reducir el número de llamadas al servidor. La imagen va acompañada de un archivo CSS encargado de gestionar la distribución de las imágenes individuales, guardando las coordenadas de las mismas.
Lo que ofrece Cyotek Spriter
Cyotek Spriter es una aplicación que se ocupa de empaquetar las imágenes y crear el archivo CSS en consonancia. Permite también crear efectos de texto dinámicos para HTML. Al utilizarla se conseguirán reducir las llamadas al servidor, al no efectuarse solicitudes individuales. De esta forma todas las imágenes se cargan a la vez y se recuperan de la caché del navegador. Es ideal para pequeñas imágenes, iconos y botones que se van cargando en las distintas páginas web.
¿Cómo utilizarlo?
Para utilizar Cyotek Spriter sólo tienes que indicar las imágenes que quieres incluir en el sprite, ocupándose el programa de calcular las coordenadas y fijarlas en la hoja de estilos CSS. Podrás modificar el diseño del sprite o cambiar el nombre de la clase CSS, entre otras opciones. Permite también crear varios efectos a las imágenes, así como optimizar el PNG resultante.
Conclusión
Aunque se utilice un gestor de contenidos como WordPress, en ocasiones el tema no está totalmente optimizado, por lo que es conveniente crear CSS sprites y hacer los cambios pertinentes en el diseño del mismo. El sitio de soporte de Cyotek Spriter incluye una serie de tutoriales que sirven ayuda a la hora de elaborar los diferentes elementos.
Acceso
Cyotek Spriter es una aplicación gratuita que funciona en las últimas versiones de Windows. Para conseguirla accede a Cyotek Spriter.
