Foros del Web » Creando para Internet » CSS »

Sprites css

Estas en el tema de Sprites css en el foro de CSS en Foros del Web. Hola Amigos, resulta que desde hace algún tiempo me he dado a la tarea de diseñar mis websites con 100% CSS, cero tablas. Resulta que ...
  #1 (permalink)  
Antiguo 14/07/2008, 00:35
 
Fecha de Ingreso: febrero-2005
Mensajes: 30
Antigüedad: 12 años, 10 meses
Puntos: 0
Sprites css

Hola Amigos, resulta que desde hace algún tiempo me he dado a la tarea de diseñar mis websites con 100% CSS, cero tablas.
Resulta que he estado viendo que existe una técnica de diseño en CSS llamada "SPRITES", la cual supuestamente ayuda al performance del server y sitio y consiste en utilizar 1 imagen que contenga casi todas las imagenes necesarias y no cortadas en varios gifs o jpgs.

Tengo la impresión que esta técnica es algo nueva y por lo tanto me ha costado mucho encontrar información detallada para aprender al diseñar con sprites. Alguno de ustedes ha tenido experiencia con este tipo de css?? Tienen alguna información que quieran compartir conmigo sobre este tema? Si pudieran agregar a este post algunas buenas URLS con esta información se los agredeceré mucho...

Saludos,
  #2 (permalink)  
Antiguo 14/07/2008, 01:45
Avatar de manumaf  
Fecha de Ingreso: mayo-2007
Ubicación: Argentina
Mensajes: 853
Antigüedad: 10 años, 7 meses
Puntos: 6
Respuesta: Sprites css

Hola este tema ya se a tratado:

http://www.forosdelweb.com/f53/manej...s-sola-596065/


Entra y podras resolver tus dudas.


Suerte!
  #3 (permalink)  
Antiguo 14/07/2008, 11:45
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Sprites css

No tenía idea que esta tecnica recibiera este nombre. Averiguaré más acerca del tema, y si aun necesitar más ayuda con esto, avisanos para echarte una mano. Suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #4 (permalink)  
Antiguo 14/07/2008, 12:20
 
Fecha de Ingreso: febrero-2005
Mensajes: 30
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Sprites css

Cita:
Iniciado por daPhyre Ver Mensaje
No tenía idea que esta tecnica recibiera este nombre. Averiguaré más acerca del tema, y si aun necesitar más ayuda con esto, avisanos para echarte una mano. Suerte
Gracias amigos... fijate que realmente la informacion disponible en castellano esta realmente escasa... yo he estado probando y realmente esta muy util y sencilla... quiza al inicio, por la falta de practica nos lleve un poco mas de tiempo el estar probando con el posicionamiento y que las imagenes coincidan exactamente donde las queremos ubicar...

Este link me ha sido util... alistapart.com/articles/sprites
  #5 (permalink)  
Antiguo 14/07/2008, 12:46
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Sprites css

Supongo que no mucha gente de habla hispana habla de esta técnica, o al menos no le conoce con ese nombre (Yo por ejemplo, no lo sabía).

El artículo que nos proporcionaste es muy bueno, tiene ya 4 años de antigüedad, por lo que el tema no es tan nuevo como verás. Aun así este ha sido muy interesante y aprendí un par de nuevos detalles de él. Gracias por compartirlo
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #6 (permalink)  
Antiguo 15/07/2008, 09:09
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Sprites css

Acá hay otro ejemplo, con algún otro uso práctico

Gif animado; con velocidad, secuencia y color aleatorios.

Hay más, para viñetas de lista y otros. Si los encuentro los agrego.
  #7 (permalink)  
Antiguo 16/07/2008, 01:28
 
Fecha de Ingreso: febrero-2007
Mensajes: 8
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Sprites css

Yo lo descubrí con los framework de javascript, con apenas dos o tres imágenes te manejan todo el estilo del framework.
  #8 (permalink)  
Antiguo 16/07/2008, 03:01
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Respuesta: Sprites css

Muy util el tema de sprites, yo suelo utilizarlos muy a menudo sustituyendo al habitual rollover.
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #9 (permalink)  
Antiguo 28/07/2008, 08:11
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Sprites css

Cita:
Iniciado por kazafun
...yo suelo utilizarlos muy a menudo sustituyendo al habitual rollover...
A eso me refería con lo de "algún otro uso práctico"

Para ser sincero, no ví la URL que nos dejó Roland, ni tampoco los enlaces que hay en el tema de manumaf.
Y quizá este mensaje debí ponerlo allí; pero como aquí ya participé, y es más nuevo, y el que lo encuentre va a encontrar también el otro (digo, por el link), me parece que voy a hacer honor al presente tema y posteo acá.

Seguramente en los sitios donde promueven el uso de sprites (¿por qué le habrán puesto así?) deben explicar las ventajas que tiene su uso. A mi se me ocurre que ayuda en la velocidad de bajada al cargar una sola paleta para "todas" las imágenes, y —como dice daPhyre que es programador y entiende un poco más de esto — reduce las peticiones de descarga al servidor.

Ahora, como ventajas, me parecen un poco pobres.
Hay algunas 'desventajas' que son muy evidentes, e insalvables.

A la ya mencionada imposibilidad de usarlas como fondo mosaico, y a la también mencionada dificultad para "acomodar" cada parte como un puzzle si son de distintos tamaños, para que no sobre "fondo"; podemos agregar que no todas las imágenes de nuestras páginas tienen la misma extensión. Quiero decir : para las fotos medianas o grandes usamos un *.jpeg, para íconos o botones un *.gif, para un borde de capa que termine fundido con el background un *.png ... y si tenemos que hacer una macroimagen para cada una de las extensiones ya deja de ser negocio. Ni hablar si usamos gif animados; son incombinables.

Otro problema es la actualización. Es muy fácil subir un nuevo formato de botón al sitio : simplemente reemplazamos su archivo de imagen original por el nuevo, con el mismo nombre. En cambio con este método, hay que editar la imagen sí o sí. Peor si los nuevos botones no tienen exactamente el mismo tamaño. O si queremos renombrar el viejo botón para no eliminarlo.

Un inconveniente adicional se da cuando nustro sitio tiene varias páginas con el mismo diseño, porque tenemos que decidir si hacemos una imagen con el logo, la botonera y los íconos que son comunes por un lado, y además cada una de las que son específicas para cada página por el otro; o metemos todas juntas en un mismo archivo.
En el primer caso, seguimos usando más de un archivo de imagen, en el segundo, estamos cargándole a cada página un peso que no vamos a usar.

Por otro lado, si la imagen única se arruina, se arruinan todas. Y nadie ve nada.

Todas estas objeciones son elementales, puro sentido común. Pero hay otras que quizá no sean tan evidentes.

Dependiendo de la configuración del usuario, las páginas pueden aparecer a medida que se cargan sus elementos, o mostrarse solamente cuando estén completas.
En este último modo (casi) podríamos decir que no hay diferencia con usar sprite. Pero si alguien quiere ir viendo el contenido aún antes de estar totalmente bajado, le estamos retrasando los íconos y botones (generalmente livianos) que en principio se cargarían en "orden de petición" (del comienzo al final del documento); que es justamente como lo vamos leyendo.

Más arriba dije "casi", porque tenemos un problema con el Internet Explorer y algunos antivirus o antispyware. Resulta que 'revisan' las imágenes una por una antes de bajarlas; pero según la petición del HTML o CSS. Quiero decir, que si ponemos una capa con la imagen 'recortada' adentro, la va a revisar una vez, y si ponemos una segunda capa con otra etiqueta de imagen o fondo adentro, la va a revisar de nuevo ... aunque tenga la misma ruta de archivo.
El tiempo que supuestamente ganamos por un lado, lo seguimos perdiendo por el otro, porque aunque muestre sólo una pequeña porción del dibujo, el peso es del total para todas.

Un caso aparte es el tema del diseño, la semántica y la compatibilidad.
Este truco es puramente visual; ¿y qué hacemos con la recomendación de usar alt?. No se le debe poner a la imagen completa y tampoco se le puede poner a cada div o lo que fuere que usemos de caja. Bueno, en realidad, sí. Podemos usar un 'comodin.gif' transparente, en cada caso le damos el tamaño de la porción que vamos a mostrar y de fondo le ponemos nuestra macroimagen (acomodada para que se vea sólo lo que queremos). Entonces sí podemos poner un alt a cada gif transparente, que mencione lo que en realidad se ve de fondo.
Más de un purista se va a quejar de semejante chanchada, pero es lo que hay. Y aún así, no sirve.
Si alguien navega con imágenes dehabilitadas o usa un navegador aural, seguramente no va a notar la diferencia; pero si el problema es que alguna de las 2 imágenes no se carga : o no aparece el texto alternativo, o aparece encima de la imagen de fondo

Seguramente podríanos seguir, pero recordando un par de comentarios

Cita:
Iniciado por Roland
...la informacion disponible en castellano esta realmente escasa...
Cita:
Iniciado por daPhyre
...Supongo que no mucha gente de habla hispana habla de esta técnica...
se me ocurre citar a un xenófobo lingüista que dijo
"Los Hispanoparlantes No Hablamos De Güevadas"

Porque a estas alturas ya imaginamos el motivo para que casi no haya sitios hechos con esta técnica. La banda ancha y los caños de internet cada vez más grandes, además de las máquinas cada vez más veloces, la hicieron obsoleta.

Recuerdo —para terminar— que Mozilla tenía un código propietario que intentó funcionar como un sprite; era -moz-image-region. Lo llegué a probar en un Firefox 0.x, pero me parece que en la versión 1.x ya no existía. No resolvió el asunto de poner el punto de origen de la "región" como si fuera el origen de la imagen. Y así se parecía mucho al clip(), por lo que fue eliminado.

Y un comentario al margen de CSS : en PHP se pueden generar recortes de una imagen más grande, y mandarlos al código fuente como si cada uno fuera una foto individual. Por supuesto que para la máquina cliente van a ser todas imágenes distintas y sería lo mismo que así lo fueran también en el servidor, pero como posible ventaja del método está la de subir un sólo archivo a proveedores que nos pongan algún tipo de límite para guardar nuestras imágenes.


Les dejo algunos enlaces más, como para probar que el método es muy útil, pero para hacer efectos y aprovecharlo con imaginación. El primero es una animación interactiva y lo hizo DIL (es claramente mucho mejor que mi ejemplo), el segundo refuerza la idea de kazafun, el tercero es un "visor 360°" de Carlitos, los otros 2 tienen que ver con un generador de recortes que creó caricatos

Celuloide virtual

cargar una imagen del menu en css

Visor de panorámicas

Dibujar rectangulos #20

mapas y rollover #4

Saludos

furoya
  #10 (permalink)  
Antiguo 20/11/2008, 16:24
 
Fecha de Ingreso: noviembre-2008
Mensajes: 3
Antigüedad: 9 años
Puntos: 0
Respuesta: Sprites css

hola, soy relativamente nuevo en el foro y digo relativamente por que simpre leo y casi nunca escrivo, pero bueno, el sprite efectivamente es una tecnica en la que se utiliza una sola imagen la cual a su vez engloba mas imagenes, y la cual es controlada con css mediante la propiedades de posicion horizontal y vertical (del background), asi como alto y ancho (box), es algo complicado al principio pero te acostumbras, ademas de que nospermite no realizar tantas peticiones al servidor.
espero te sea de utilidad esto.
  #11 (permalink)  
Antiguo 25/10/2009, 11:06
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Sprites css

Iba a agregar un par de enlaces más a la lista que está arriba. Pero ya que estoy aprovecho para hacer algún comentario, y después los agrego acá.

No sé si le habrá servido, scamper. Al menos no más que las otras respuestas que dicen lo mismo, pero más completo.
Por otro lado, también hay una explicación de por qué todo eso en la práctica no funcionó, y de cómo se terminó usando la técnica de sprite para hacer otros efectos.

Quiero decir, que en tu mensaje no sólo ignoraste todo lo escrito anteriormente, sino que terminaste dando un salto para atrás sobre el tema.

Por supuesto, no es algo que ayude a quienes vengan a buscar algún dato a este sitio; más bien sería todo lo contrario.


Por otro lado, no me parece mal resucitar este post. No sé si será idea mía, pero me parece que han comenzado a aparecer varios temas promocionando el 'sprite' y no tantos que expliquen sus limitaciones. Y algunos desarrolladores "compran" sin mucha idea de lo que están haciendo. Bueno, especialmente los novatos.
Pero después pasa como con las tablas, que 'entienden' que la etiqueta table ya no se usa y vienen a preguntar al Foro cómo se hacen tablas con div o con listas de definición.

Lo cierto —y repito algún concepto anterior— es que este método ya no sirve para lo que fue pensado en épocas del dial-up y con modems lentos. Aún si recibe ayuda de CSS para salvar la diferencia en las coordenadas de inicio del clip, o para repetir sólo una parte como fondo; el resto de las complicaciones sigue siendo enorme, y se justifica su uso nada más que para hacer efectos que de otra forma serían, entonces, más difíciles de lograr.

Acá dejo un link a otro tema donde se puede ver algo de lo que comento.

Necesito ayuda con un sprite css.

Y agrego : no es que no haya que usar sprite, sino —como con cualquier otra cosa— que hay que saber cuándo conviene usarlo. O lo que es lo mismo, que hay que estudiarlo primero.


Existen varias aplicaciones que crean la macro-imagen a 'recortar'; igual acá hay una herramienta on-line que no probé, pero supongo que funciona. Y si no, le reclaman a kseso?.

Generador de sprites en línea y su css asociado
  #12 (permalink)  
Antiguo 18/07/2010, 01:01
Avatar de Perr0  
Fecha de Ingreso: mayo-2005
Ubicación: Santiago de Chile, Chile
Mensajes: 672
Antigüedad: 12 años, 6 meses
Puntos: 78
Respuesta: Sprites css

Primero disculpas si revivo un tema de 9 meses...
furoya, gracias por aclararme algo que necesitaba saber (que no se pueden utilizar en mosaicos) asi no me quebraba el mate.
Lei tus puntos de vistas en contras y tienes razón, salvo que la persona que use los sprites tenga claro en saber que trabajar como sprite y expongo el caso siguiente:

los tan usados rollover de imágenes o onmouseover y onmouseout, si ocupo dos imagenes distintas, parte siempre en un punto en que la segunda imagen demora en cargar al cache y por ende desaparece, caso contrario tengo las dos imagenes en un sprite, funcionaria a la perfección y no denotaria ese error.

como ejemplo lo hice con dos imágenes y pesaban 10KB la suma de las dos, con el sprite sólo 6KB, ahorro 60%, pero no es el caso, ataco mas a la presentación, y si tengo pensado agrandar los botones, les puedo dejar un espacio suficiente para adaptarlos.

Mi humilde opinion, salu2
  #13 (permalink)  
Antiguo 16/08/2010, 08:47
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Sprites css

Sí, claro. O no tanto. Vamos un paso por vez. Muy amable de tu parte agradecerme el dato, pero no hice mucho mérito. Comenté lo que ya era sabido, al menos en el momento de postear. Aunque estuve esperando que alguien me lo discutiera, porque —aquí entre nosotros— no es algo tecnicamente imposible. Navegadores como Opera o Internet Explorer tienen la capacidad de cortar un clip de una imagen mayor y después repetirlo como fondo con CSS o HTML. Firefox también, pero le falta alguna vuelta más.

La pregunta es : ¿qué sentido tendría al fin implementarlo? ¿hacerle el capricho a los que quieren usar el sprite como fondo mosaico? Ni se justifica.

Con respecto al uso en rollovers o animaciones más complejas, es cierto, todavía sirve; lo detallé hasta con ejemplos más arriba. Cuando todos los navegadores mejoren la performance de sus precargas o de reemplazo de SRC en imágenes, ni siquiera servirá para eso.

Lo del ahorro en el peso también se comentó. Y es tal cual, un 40% no justifica el engendro en el código fuente ni el riesgo de que alguien decida ver la página si CSS y que pierda hasta los botones. Seguramente en fotografías de alta resolución que pesan varios megas serviría, salvo por el detalle del tamaño (en ancho y en alto). Juntar cuatro en una crearía un mamotreto inmanejable en cualquier editor.

Algo que no termino de entender es lo de "si tengo pensado agrandar los botones, les puedo dejar un espacio suficiente para adaptarlos
" , porque la idea es acomodar las imágenes sin dejar espacio entre medio. Hacerlo a propósito no tiene sentido, y menos dejarlo 'por las dudas mañana agrando los botones' ¿y 'por las dudas' cuánto sería? ¿Hay que adivinar antes de hacer el archivo?. Por otro lado, no te olvides de que también habría que reescribir las coordenadas. Al final no me parece muy coherente, pero también puede ser que no te haya entendido.

A veces uno escribe muy rápido y el mensaje no queda lo suficientemente claro; algunas cuestiones las podemos intuir (aunque no deberíamos), pero otras generan confusiones y hasta peleas inútiles.
Cuando escribiste "60%" en vez de "40%" fue evidentemente un error de tipeo, pero a veces no es tan obvio y entonces puede arruinar un código o un ejemplo. Te sugiero que releas el mensaje antes de enviarlo, para asegurarte de que nos sea legible y no tengamos que especular sobre el contenido.

Saludos

furoya.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:00.