Share
El uso de sprites CSS, en lugar de una colección de imágenes individuales más pequeñas, mejorará el rendimiento de sus páginas web y mantendrá las cosas más organizadas. Veamos algunas de las mejores prácticas y algunas herramientas útiles para el flujo de trabajo de creación de sprites..
El nombre duende puede que te recuerde a los sprites de juego Juegos de consola retro e incluso juegos basados en navegador en estos días:
y en términos de CSS, el papel que juegan los sprites es más o menos el mismo. Un sprite es un archivo grande que contiene varias imágenes para su sitio web, ahorrando tiempo de carga y espacio web.
El punto esencial de usar CSS Sprite Sheets es que el servidor solo tiene que enviar un archivo de imagen que contenga todas sus imágenes, no una gran cantidad de imágenes individuales, y a través de CSS puede mostrar cualquier pequeño segmento de ese archivo como fondo para un elemento..
Algunos dirían que el uso de imágenes individuales puede "engañar" al ojo para que piense que la página se está cargando más rápido; Las imágenes que aparecen a medida que se cargan pueden parecer un buen progreso. Este es un beneficio falso, sin embargo, siempre es preferible una página de carga realmente más rápida.
La otra desventaja con este método es que cada imagen individual es, como hemos mencionado, un archivo de imagen separado. Por lo tanto, cada imagen que el servidor tiene para obtener cuenta como una solicitud HTTP separada. Es importante mantener el número de solicitudes HTTP en su sitio lo más bajo posible, ya que los navegadores solo pueden realizar un número limitado de solicitudes a cualquier servidor simultáneamente..
La combinación de sus imágenes en un solo archivo no solo reducirá significativamente el número de solicitudes HTTP, sino que también reducirá el tamaño total del archivo de las imágenes..
Hay dos enfoques comunes al crear sus hojas de sprites: hacerlas antes o después de construir su sitio..
Puede crear todas sus imágenes en una hoja de sprites desde el suelo hacia arriba mientras crea su sitio. Usted actualizará su CSS para adaptarse, a medida que avanza. Esto es lo que llamaremos antes de método.
Alternativamente, puede crear todas sus imágenes como archivos separados, lo que hace que su edición sea mucho más sencilla. Una vez que se construye su sitio y se preparan todas las imágenes, puede compilar de forma rápida y fácil, ya sea manualmente, o usar una de varias herramientas para hacer todo el trabajo por usted (acerca de lo cual veré con más detalles más adelante). Esto, nos referiremos como el después enfoque.
Si eres completamente nuevo en sprites o nuevo en diseño web, el método "después" es definitivamente la opción recomendada.
Si eres completamente nuevo en sprites o nuevo en diseño web, el método after es definitivamente la opción recomendada. Puede mantener por separado cualquier PSD o archivo para cada imagen individual, realizar cambios y luego ejecutar la aplicación de su elección. Además, si no está seguro de cómo escribir todo el CSS para sus imágenes, la mayoría de las aplicaciones de generación de sprites también producirán el CSS que lo acompaña..
La mayoría de estas aplicaciones son completamente gratis, otra bonificación.!
Echemos un vistazo a algunos consejos y herramientas para ayudarle con las hojas de sprites. Entonces dependerá de usted elegir el enfoque que más le convenga..
Nota: la mayoría de los siguientes consejos asumen que harás tus sprites de antemano.
Cuando coloque sus imágenes en Photoshop (o lo que sea que use para diseñar su hoja de sprites) es una buena idea tratar de organizar las cosas de la manera más clara y sencilla posible. Trate de redondear siempre a los 10 píxeles más cercanos, o trabaje con una cierta cantidad de espacio para cada imagen si todas tienen un tamaño similar. Cuando se trata de escribir todo el CSS que lo acompaña, no tendrá que seguir midiendo las coordenadas, y será menos probable que olvide los números involucrados..
El uso de figuras 'más simples' también significa que en Photoshop será mucho más fácil usar las cuadrículas 'snap-to', o dibujar líneas de cuadrícula para mantener las cosas organizadas y fáciles de entender..
Si pones todas tus imágenes en la hoja de sprites, pasa años escribiendo todo el CSS y luego decides que una de las imágenes necesita ser editada, podría causar serios problemas. Si se debe cambiar el tamaño de la imagen, entonces es posible que el diseño de la hoja de sprites deba modificarse y volver a alinearse, lo que significa que tendrá que pasar absolutamente años alterando todo el CSS que lo acompaña.
Esta es otra razón por la que podría estar más interesado en comenzar con imágenes individuales y luego usar una aplicación para hacer todo el trabajo por usted. Después de eso, si necesita realizar alguna edición, simplemente vuelva a ejecutar la aplicación y todo estará listo. Qué más podrías querer?
Si utiliza Photoshop u otros editores de imágenes similares, es una buena idea mantener las capas de cada sprite bien etiquetadas y agrupadas, para que todo quede perfectamente claro si usted (o cualquier otra persona) necesita entenderlo más adelante..
Sus etiquetas deben ser claras y concisas, fáciles de entender para todos..
Esta debería ser una práctica bastante común para la mayoría de los diseñadores, pero no posponga el etiquetado; hágalo tan pronto como cree el sprite. Solo imagina cuánto tiempo podrías ahorrar con el etiquetado si tuvieras una gran hoja de sprites y no pudieras encontrar las capas adecuadas; podría terminar siendo extremadamente frustrante.
Del mismo modo, el etiquetado es vital para el CSS de tu sprite. Definitivamente, se necesitan etiquetas para confirmar qué sprite está siendo seleccionado por el código, y todos los principios anteriores aún se aplican. Si está diseñando una plantilla para vender en sitios como Themeforest, entonces cualquier CSS (y mucho menos Sprite Sheet CSS) se debe etiquetar claramente, ya que los usuarios potenciales pueden no tener una comprensión tan grande de CSS como usted..
Existe una amplia gama de herramientas para hacer que la generación de hojas de sprites sea lo más fácil posible. Al crear y diseñar con un rango de imágenes individuales, compílelas todas en una hoja de sprites al final: el método 'después'.
Éstos son algunos de los mejores generadores de Sprite Sheet:
SpriteMe es un bookmarklet gratuito disponible en www.spriteme.org. Es sorprendentemente fácil de usar y tiene poca relación con el método de diseño al que estás acostumbrado. Se abrirá una superposición en el lado de la pantalla donde puede descargar imágenes o hojas de sprites del sitio web en el que lo está utilizando, o, lo que es más importante, generar hojas de sprites y CSS que lo acompañen..
Las imágenes de fondo hacen que las páginas se vean bien, pero también las hacen más lentas. Cada imagen de fondo es una solicitud HTTP adicional. Hay una solución: combinar imágenes de fondo en un sprite CSS. Pero crear sprites es difícil, requiere un conocimiento arcano y mucha prueba y error. SpriteMe elimina las molestias con el clic de un botón. - www.spriteme.org
Como he dicho antes, si estás acostumbrado a trabajar con métodos de imagen individuales, prefieres ese método o no te molesta el arduo trabajo asociado con las hojas de sprites, entonces SpriteMe es la respuesta..
Aunque el sitio Webdesigntuts + ya tiene hojas de sprites, ¡SpriteMe aún podría mejorar las cosas combinándolas! Puede ver cómo se exporta el CSS, con la alineación ya hecha. Todo lo que tienes que hacer es copiar, pegar y cambiar las URL!
Es tan simple como crear su diseño con imágenes individuales y luego ejecutar SpriteMe. Agarra todas las imágenes de fondo de sus sitios, las agrupa en sprites y genera la hoja de sprites para que los descargue. A continuación, "inyecta el sprite en la página actual" y "vuelve a calcular la posición de fondo de CSS" para usted. Si desea una mejor guía para usar SpriteMe, encuéntrela en www.spriteme.org.
Echa un vistazo a la tabla de ahorros de SpriteMe para ver claramente cómo las hojas de Sprite han ahorrado a muchos sitios web una gran cantidad de espacio y tiempos de carga de páginas (en la mayoría de los casos ...)
Espero haberlo convencido de que las Hojas de Sprite son el camino a seguir: ahorrar espacio, reducir las solicitudes HTTP y llevar a un sitio web más rápido y organizado..
En cuanto a los métodos para generarlos, definitivamente recomendaría el método 'después' y me apoyaría en una de las herramientas que analizamos para hacer todo el trabajo duro..
Accentsconagua