Foros del Web » Creando para Internet » CSS »

Manejo de imágenes (todas en una sola)

Estas en el tema de Manejo de imágenes (todas en una sola) en el foro de CSS en Foros del Web. No supe como explicarme mejor en el título. He visto algunas webs que tienen una sola gran imagen que contiene todos los íconos. Supongo que ...
  #1 (permalink)  
Antiguo 12/06/2008, 12:49
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 10 años, 6 meses
Puntos: 59
Manejo de imágenes (todas en una sola)

No supe como explicarme mejor en el título.

He visto algunas webs que tienen una sola gran imagen que contiene todos los íconos. Supongo que luego trabajan posicionándola como desean, pero ¿como se hace realmente?

Por ejemplo en Youtube,



Esta imagen tiene casi todos los íconos de la página, ¿cómo hacen para que se vean luego individuales?

Gracias por sus respuestas.
__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #2 (permalink)  
Antiguo 12/06/2008, 13:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Manejo de imágenes (todas en una sola)

Hola, lucasan.

Se hace una caja del tamaño que te interesa (la que va a mostrar el icono), y se coloca la imagen como fondo con el desplazamiento necesario para hacer visible sólo el trozo que te interesa.

Mira este ejemplo.

Es una sola imagen como fondo, a la que cambias de posición con los valores del final de la declaración de background (center y top en este caso).

background: url(img/color_BN.jpg) no-repeat center top;
background: url(img/color_BN.jpg) no-repeat center bottom;

donde a center y top le puedes dar valores exactos x-y, porcentajes, valores negativos, etc.

Mikel.
  #3 (permalink)  
Antiguo 12/06/2008, 14:49
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 10 años, 6 meses
Puntos: 59
Respuesta: Manejo de imágenes (todas en una sola)

Gracias Mikel, entiendido el concepto y tu ejemplo es muy claro.

Ahora, en el caso de youtube... debe tomar tiempo posicionar esas imágenes ¿no?

Y una última pregunta, ¿es cross browser?

Gracias.
__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #4 (permalink)  
Antiguo 12/06/2008, 15:59
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Manejo de imágenes (todas en una sola)

Mikel, conviene hacer una sola imágen y que luego tome la parte que yo le indico por CSS ??... o conviene hacer varias imágenes individuales ?

pregunto porque esa imágen grande donde están todos los graficos debe pesar bastante para descargarla.
  #5 (permalink)  
Antiguo 12/06/2008, 16:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Manejo de imágenes (todas en una sola)

Cita:
Iniciado por lucasan Ver Mensaje
Gracias Mikel, entiendido el concepto y tu ejemplo es muy claro.

Ahora, en el caso de youtube... debe tomar tiempo posicionar esas imágenes ¿no?

Y una última pregunta, ¿es cross browser?

Gracias.
Yo creo que es completamente cross browser, porque se trata de posicionar el fondo, que juraría que es una de las pocas cosas que hacen todos prácticamente igual. No estoy seguro al 100%.

Lo de posicionar supongo que con un poco de práctica y cierta experiencia no costará tanto. Una o dos horas tomando nota de posiciones y luego todas en un papelito, coser y cantar

Cita:
Iniciado por Jamati Ver Mensaje
Mikel, conviene hacer una sola imágen y que luego tome la parte que yo le indico por CSS ??... o conviene hacer varias imágenes individuales ?

pregunto porque esa imágen grande donde están todos los graficos debe pesar bastante para descargarla.
No soy un experto en rendimiento, pero diría que además de no tener que ser excesivamente grande, es una sola petición al servidor, y luego ya está en la caché. Igual alguien entendido en estos asuntos tenga más criterio que nosotros, pero a mi me parece una buena idea hacerlo en una sola imagen.
La única pega que le veo es al escalar la fuente de letra; habrá que procurar no dar tamaño a las cajas en em, porque en ese caso al escalar la letra la caja crecería y dejaría ver otros gráficos de la imagen.

Mikel.
  #6 (permalink)  
Antiguo 12/06/2008, 17:41
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 10 años, 6 meses
Puntos: 59
Respuesta: Manejo de imágenes (todas en una sola)

Cierto, creo que es muy útil si se va a trabajar con medidas absolutas.

Y supongo que tener qu edecsragar una sola imagen debe ser beneficioso para reducir tiempos de carga.

Gracias Mikel, saludos.
__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #7 (permalink)  
Antiguo 12/06/2008, 18:50
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: Manejo de imágenes (todas en una sola)

Como programador, comprendiendo un poco más esto, puedo decirles que si es mejor hacer solo una petición de imagen en lugar de varias individuales. Ahora, podría estar mal por que no tengo una mega especialización en como funciona la Internet, pero esta es una técnica muy usada en otros desplegadores de imagenes desde hace mucho cuando las computadoras no tenían el rendimiento de hoy (E igual sigue usandose a veces). Por supuesto, la desventaja es que hay que esperar a que se cargue esta única imagen, por lo que no debe ser muy grande. Por otro lado, no se que tan veloz y en que orden se haga el desplazamiento, así que ahí no estoy seguro de como funcionaría.

Tomando esta técnica en cuenta, ya estoy pensando en varias funciones que podría darle... Pero una técnica así no podría usarse para un fondo repetido, ¿verdad?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #8 (permalink)  
Antiguo 12/06/2008, 19:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Manejo de imágenes (todas en una sola)

Cita:
Iniciado por daPhyre Ver Mensaje
Por otro lado, no se que tan veloz y en que orden se haga el desplazamiento, así que ahí no estoy seguro de como funcionaría.

Tomando esta técnica en cuenta, ya estoy pensando en varias funciones que podría darle... Pero una técnica así no podría usarse para un fondo repetido, ¿verdad?
Mira mi ejemplo y verás lo rápido que es el desplazamiento. De hecho, no creo que notes nada.

Podrías usarse para un caso de fondo repetido, pero sólo en algunos casos concretos.

Mikel.
  #9 (permalink)  
Antiguo 12/06/2008, 19:56
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 10 años, 6 meses
Puntos: 59
Respuesta: Manejo de imágenes (todas en una sola)

Pensándolo bien, me atrevería a devir que no hay desplazamiento, ya que no se trata de una transición sino de diferentes posiciones.

Mi teoría
__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #10 (permalink)  
Antiguo 12/06/2008, 21:10
Avatar de gepd  
Fecha de Ingreso: diciembre-2007
Mensajes: 142
Antigüedad: 10 años
Puntos: 6
De acuerdo Respuesta: Manejo de imágenes (todas en una sola)

Justamente hace unos días encontré una rticulo sobre optimizacion de web's y se habla de éste tema efectivamente al ser una sola imagen hace una sola peticion lo que mejora el tiempo de carga de la web

les dejo éste articulo muy interezante

http://www.slideshare.net/maguilar/phpbarcelona-conference-optimizacin-aplicaciones-php-client-side

Desde la página o imagen 59 comienza hablar sobre éste tema


Saludos
  #11 (permalink)  
Antiguo 13/06/2008, 10:03
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: Manejo de imágenes (todas en una sola)

Mikel: Ya sabía que era el desplazamiento, lo que quería decir, es que no sabía si primero lo dibujaba y luego lo desplazaba, o primero lo desplazaba y luego lo dibujaba. En el primero de los casos, primero se vería la imagen del principio, y luego se posicionaría a la correcta, pero al parecer es lo opuesto, por lo que no le veo ningún pero (Todo lo contrario =P)

Olvida lo del fondo repetido, me di cuenta que andaba pensando mal. Quería modificar la imagen con esta técnica y luego usarlo de background, pero me di cuenta que no es lógico

lucasan: Desplazamiento, es mover de posición un objeto de un lugar a otro. Aunque no sea progresivo, sigue siendo un desplazamiento =P

gepd: El link que nos has proporcionado es muy interesante y funcional, muy buen aporte =P
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #12 (permalink)  
Antiguo 13/06/2008, 10:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Manejo de imágenes (todas en una sola)

Cita:
Iniciado por daPhyre Ver Mensaje
Mikel: Ya sabía que era el desplazamiento
No lo había dudado. Preguntabas qué tan rápido sería el desplazamiento y te decía que miraras el ejemplo, no que no supieras lo que es.

Mikel.
  #13 (permalink)  
Antiguo 13/06/2008, 11:19
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: Manejo de imágenes (todas en una sola)

Cita:
Iniciado por Mikmoro Ver Mensaje
No lo había dudado. Preguntabas qué tan rápido sería el desplazamiento y te decía que miraras el ejemplo, no que no supieras lo que es.
Disculpa, error mio de lectura rápida.

El problema es que como la imagen ya está precargada, no se notaría si hubiera medio segundo de retraso, detalle que pasaría si al cargarse la imagen, primero se dibujara y luego se moviera, pero ya lo prové y no creo que eso ocurra (Aunque necesitaría provarlo con una página con demasiada información para poder verlo en el peor de los casos). Gracias =P
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #14 (permalink)  
Antiguo 13/06/2008, 11:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Manejo de imágenes (todas en una sola)

La información de cómo se carga es buena.

Yo lo que imaginaba que pasa es que como ya está cargada, quizá en la primera se note, pero en las siguientes, el desplazamiento está ya también cargado en la css, con lo que no necesita redibujar. No soy un experto en esto ni mucho menos, pero lo cierto es que el resultado es rapidísimo. Nunca me ha ocurrido ver un retardo en una cosa como esa. Al contrario que en un rollover de imágenes con javascript, que a veces, y sobre todo IE6, es tan lento que produce un efecto penoso.

Mikel.
  #15 (permalink)  
Antiguo 13/06/2008, 12:09
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: Manejo de imágenes (todas en una sola)

Muy cierto.

Por si a alguien que pase por aquí le interesa, dejo un ejemplo práctico y sencillo, al que le he dado aplicación de link para una imagen de 40x (imagen original de 120x40 con 3 imagenes distintas en el orden). Ojalá le sirva a alguien para cualquier aplicación en sus páginas!
Código:
a.logo:link,a.logo:visited{background:url(rgb.png) no-repeat -80px 0px;width:40px;height:40px;}
a.logo:hover{background:url(rgb.png) no-repeat -40px 0px;width:40px;height:40px;}
a.logo:active,a.logo:focus{background:url(rgb.png) no-repeat 0px 0px;width:40px;height:40px;}
O más sencillo, el puro logo, para el que aun no quiera complicarse, usando la misma imagen:
Código:
.logo{background:url(rgb.png) no-repeat -80px 0px;width:40px;height:40px;}
Suerte!!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #16 (permalink)  
Antiguo 13/06/2008, 12:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Manejo de imágenes (todas en una sola)

Seguro que será últil.

Mikel.
  #17 (permalink)  
Antiguo 13/06/2008, 22:13
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Respuesta: Manejo de imágenes (todas en una sola)

Sin lugar a dudas, esta técnica reduce el tiempo de carga de la página; por tener menos request al server.
Para quienes el inglés no resulte una barrera, recomiendo la lectura de BorkWeb: Faster page loads with image concatenation.
La técnica es productiva cuando la utilización de imágenes es de tamaño similar.
Si la disparidad de tamaños concluye en un solo archivo, la cantidad de espacios "en blanco" representa una cantidad de tamaño de archivo inútil que termina produciendo en forma contraria el beneficio esperado.
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
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

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 19:57.