12/06/2008, 11:49
| ||||
| ||||
| 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" |
|
12/06/2008, 12:18
| ||||
| ||||
| 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. |
|
12/06/2008, 13:49
| ||||
| ||||
| 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" |
|
12/06/2008, 14:59
| |||
| |||
| 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. |
|
12/06/2008, 15:34
| ||||
| ||||
| Respuesta: Manejo de imágenes (todas en una sola) Cita: 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%.
Iniciado por lucasan  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. 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: 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.
Iniciado por Jamati 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. 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. |
|
12/06/2008, 16:41
| ||||
| ||||
| 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" |
|
12/06/2008, 17:50
| ||||
| ||||
| 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? |
|
12/06/2008, 18:06
| ||||
| ||||
| Respuesta: Manejo de imágenes (todas en una sola) Cita: Mira mi ejemplo y verás lo rápido que es el desplazamiento. De hecho, no creo que notes nada.
Iniciado por daPhyre 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? Podrías usarse para un caso de fondo repetido, pero sólo en algunos casos concretos. Mikel. |
|
12/06/2008, 18:56
| ||||
| ||||
| 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" |
|
12/06/2008, 20:10
| ||||
| ||||
 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 |
|
13/06/2008, 09:03
| ||||
| ||||
| 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 |
|
13/06/2008, 09:59
| ||||
| ||||
| Respuesta: Manejo de imágenes (todas en una sola) Cita: 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.
Iniciado por daPhyre Mikel: Ya sabía que era el desplazamiento Mikel. |
|
13/06/2008, 10:19
| ||||
| ||||
| Respuesta: Manejo de imágenes (todas en una sola) Cita: Disculpa, error mio de lectura rápida.
Iniciado por Mikmoro 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. 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 |
|
13/06/2008, 10:41
| ||||
| ||||
| 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. |
|
13/06/2008, 11:09
| ||||
| ||||
| 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:
O más sencillo, el puro logo, para el que aun no quiera complicarse, usando la misma imagen: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;}
Código:
Suerte!! .logo{background:url(rgb.png) no-repeat -80px 0px;width:40px;height:40px;}
|
|
13/06/2008, 21:13
| ||||
| ||||
| 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) |
Este tema le ha gustado a 2 personas 
