Foros del Web » Creando para Internet » Diseño Gráfico »

Dudas .jpg .gif y .png

Estas en el tema de Dudas .jpg .gif y .png en el foro de Diseño Gráfico en Foros del Web. Hola buenas a todos tengo unas cuantas dudas con los archivos ya mencionados. El tema esque he estado intentado mejorar la velocidad de carga de ...
  #1 (permalink)  
Antiguo 08/06/2010, 09:13
Avatar de Mizunga  
Fecha de Ingreso: septiembre-2009
Mensajes: 125
Antigüedad: 14 años, 7 meses
Puntos: 2
Dudas .jpg .gif y .png

Hola buenas a todos tengo unas cuantas dudas con los archivos ya mencionados.

El tema esque he estado intentado mejorar la velocidad de carga de mi web y buscando info y modificando algunas imagenes de mi web (que realmente ocupan). Estas imagenes estaban en .PNG y las he pasado a .JPG ocupando 130KB menos algunas (Cosa que imagino que está bien).

El tema esque en muchos sitios recomiendan más .png por tamaño y compresion y en otros no...

¿que puedo sacar en claro de todo esto?

PD: espero acertar en el foro...
__________________
Diseño Web y Photoshop.
  #2 (permalink)  
Antiguo 08/06/2010, 09:34
Avatar de Wasper  
Fecha de Ingreso: julio-2006
Ubicación: de cai, picha!!!
Mensajes: 1.030
Antigüedad: 17 años, 9 meses
Puntos: 41
Respuesta: Dudas .jpg .gif y .png

Hola, te comento

GIF: El que menos pesa de todos, ideal para botones y graficos sencillos, soporta transparencia y animacion, acepta un maximo de 256 colores.

JPG: Excelente para rebajar el peso de imagenes y no arriesga la calidad (dependera de la compresion que le demos, a mas compresion menos calidad de imagen), por sus opciones de compresion puede sacarnos de un apuro mas de una vez, su paleta de colores no se ve afectada, acepta todos los colores, no permite transparencia en dichos archivos.

PNG: y aqui la soluicion a ambos problemas, quiero poco peso y transparencia, y tenemos los PNG, acepta transparencia, todos los colores, compresion (pero no a niveles de JPG, se comprime pero no tanto).

Estos 3 formatos estan aceptados para todos o casi todos los programas de ediction grafica y aceptados por todos los navegadores y especiales para su uso en internet.

¿Cual es mejor?
Si necesito transparencia, PNG y si no JPG, el GIF lo uso para graficos muy pequeños, un Gif grande de tamaño se pueden observar facilmente los desperfectos...

Asi es como veo yo a estos 3 individuos....

Espero haberte aclarado las cosa...
__________________
Saludos, Jose

Paginas web y SEO
Anuncios por palabras
  #3 (permalink)  
Antiguo 08/06/2010, 09:39
Avatar de Mizunga  
Fecha de Ingreso: septiembre-2009
Mensajes: 125
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: Dudas .jpg .gif y .png

Cita:
Iniciado por Wasper Ver Mensaje
Espero haberte aclarado las cosa...
Sencillamente SI, muchas gracias.

Otra pregunta he continuado leyendo (porque ahora mismo estoy buscando info) y mencionan mucho la compresión Gzip con el jpg y el png, ¿me imagino que cuando se habla de compresión se refieren a la gzip no?
__________________
Diseño Web y Photoshop.
  #4 (permalink)  
Antiguo 08/06/2010, 10:05
Avatar de Wasper  
Fecha de Ingreso: julio-2006
Ubicación: de cai, picha!!!
Mensajes: 1.030
Antigüedad: 17 años, 9 meses
Puntos: 41
Respuesta: Dudas .jpg .gif y .png

Hasta donde se, Gzip no tiene nada que ver con JPG o PNG... Gzip es un compresor de Linux si no recuerdo mal... cuando te hablo de JPG, en si el JPG es una compresion de las imagenes BMP... pero no te confuncdas con Gzip... ¿donde estas leyendo eso?
__________________
Saludos, Jose

Paginas web y SEO
Anuncios por palabras
  #5 (permalink)  
Antiguo 08/06/2010, 10:17
Avatar de Mizunga  
Fecha de Ingreso: septiembre-2009
Mensajes: 125
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: Dudas .jpg .gif y .png

En un articulo que ahora mismo no ecuentro pero también elzaban a una web online que permitia hacer un check de como iba la web sin y con Gzip activado... bueno muchas gracias por tu ayuda, ahora ya lo tengo todo claro y voy a ver q tal...
__________________
Diseño Web y Photoshop.
  #6 (permalink)  
Antiguo 08/06/2010, 10:35
Avatar de jumpeer  
Fecha de Ingreso: mayo-2010
Mensajes: 39
Antigüedad: 13 años, 10 meses
Puntos: 1
Respuesta: Dudas .jpg .gif y .png

La compresión a la que se hace referencia en formatos de imágenes como jpeg o png es una compresión con pérdida, en la que se reduce calidad en favor de un menor tamaño. La compresión gzip está enfocada a compresión de datos y aquí no hay pérdida. Así que en este caso la ventaja de la compresión está destinada a reducir el peso teniendo como punto negativo la necesaria descompresión que se tendrá que hacer en el cliente.
  #7 (permalink)  
Antiguo 08/06/2010, 18:12
Avatar de Mizunga  
Fecha de Ingreso: septiembre-2009
Mensajes: 125
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: Dudas .jpg .gif y .png

Gracias por la aclaración Jumpeer. Mientras he comenzado a cambiar de formato algunas imagenes para asi poder mantener su rendimiento, pero, de nuevo me han surgido dudas....

¿como paso de .png a .gif sin perder las transparencias?

actualmente utilizo Adobe Fireworks CS5 y no tengo ni idea si necesito otro programa, o como hacerlo con este.

Bueno gracias de antemano y por lo anterior, hastapronto.
__________________
Diseño Web y Photoshop.
  #8 (permalink)  
Antiguo 08/06/2010, 20:10
 
Fecha de Ingreso: noviembre-2009
Mensajes: 108
Antigüedad: 14 años, 4 meses
Puntos: 4
Respuesta: Dudas .jpg .gif y .png

con el fireworks puedes, solo guardar como-seleccionas guardar como Gif-ahi abajo hay un boton de opciones, le das click- ahi por default dice no transparency (lo cambias) y listo guardar
__________________
Diseño web URWEB
Blog Crea tu web
  #9 (permalink)  
Antiguo 09/06/2010, 00:56
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 1 mes
Puntos: 1826
Respuesta: Dudas .jpg .gif y .png

Está bien lo de la explicación de la pérdida de datos y eso, pero la cosa va más allá.

El parámentro para escojer un formato depende del tipo de imagen que se trate.

-El PNG están recomendado para imágenes con grándes áreas de colores uniformes o degradados uniformes. Logotipos, gráficos estadísticoos, tapices...

-El JPG para una fotografía como tal, un paisaje, un retrato, una textura de madera para un fondo.

Esta recomendación la explico utilizando el caso contrario al mencionado.

Si comprimimos logotipo con fondo blanco con JPG, se producirá ruido notorio en los bordes, y en las zonas que debían ser claramente lisas.

Si no comprimimos un paisaje, usando un png el tamaño será considerablemente mayor.

-El GIF es un formato de patente, que está siendo sustituido por el PNG debido a sus mejores prestaciones. El único caso en que es todavía viable usar es para un gif animado. Para otros casos usa el PNG.

El GIF a veces es de menor tamaño que un PNG parecido, pero puede ser debido a la falta de control en la elaboración del PNG, como quiera este tiene más y más exacta información.

Hay diferentes métodos de compresión tanto PNG como JPG. Para PNG me parece que hay como 256 métodos distintos, pero la variación de resultados es tan mínima que no es viable desplegarlos, el programa usará uno o dos que le convengan.

Para el Jpg se puede dividir básicamente en 2, una compresión genérica 4:2:2 o una de alta calidad 4:4:4. Normalmente la de alta calidad es mejor para eso, poca compresión y alta calidad, y para tamaños pequeños la genérica funciona bastante bien.

*Debo decir que "calidad" es un término relativo.
  #10 (permalink)  
Antiguo 09/06/2010, 04:26
Avatar de Wasper  
Fecha de Ingreso: julio-2006
Ubicación: de cai, picha!!!
Mensajes: 1.030
Antigüedad: 17 años, 9 meses
Puntos: 41
Respuesta: Dudas .jpg .gif y .png

Nunca mejor dicho, para gustos, colores
__________________
Saludos, Jose

Paginas web y SEO
Anuncios por palabras
  #11 (permalink)  
Antiguo 09/06/2010, 09:01
Avatar de Mizunga  
Fecha de Ingreso: septiembre-2009
Mensajes: 125
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: Dudas .jpg .gif y .png

Muchas gracias por vuestras aclaraciones. He estado modificando bastantes imagenes.

Alguns quitandolas y utilizando solo el CSS basandome en la premisa de que mejor CSS que imagenes y aora me surge una duda, ¿es esto cierto?..


otra cosa que no he conseguido hacer, y es una imagen pequeñita que se repite mucho en mi plantilla la cual no consigo reducirle el peso, pero por la deveces que se repita hace que aumente el tamaño en KB de las imagenes.

es esta: http://www.megaupload.com/?d=GQ4HQH4C (la he subido a megaupload para ver si alguien puede ayudarme)

ocupa muy poco y esta en formato PNG, como es muy pequeña y el fondo de mi plantilla blanco, pense en pasarla a .jpg o .gif pero en estos ultimos formatos me ocupa entre 13 y 14 KB y en png 4,7 KB.

¿alguna idea o sugerencia para modificarla?
__________________
Diseño Web y Photoshop.
  #12 (permalink)  
Antiguo 09/06/2010, 11:08
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 1 mes
Puntos: 1826
Respuesta: Dudas .jpg .gif y .png

Una imagen de 4,7 Kb... ¿no es un poco de paranoia reducirle más el peso?
Y ¿subirla a Megaupload ?
No pude descargarla, excedí el límite de descarga

La imagen repítela con atributos css. Si sientes lento algo, debe de ser por otra cosa... probablemente.

Última edición por Rafael; 09/06/2010 a las 12:04
  #13 (permalink)  
Antiguo 09/06/2010, 11:51
Avatar de Mizunga  
Fecha de Ingreso: septiembre-2009
Mensajes: 125
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: Dudas .jpg .gif y .png

Esque se repite mucho y no la puedo cargar mediante CSS.

Todo esto viene porque mi pagina según google tarda 4,7 segundos un 73% más que el resto de webs... por eso me he puesto a optimizarla.
__________________
Diseño Web y Photoshop.
  #14 (permalink)  
Antiguo 09/06/2010, 12:09
Avatar de Wasper  
Fecha de Ingreso: julio-2006
Ubicación: de cai, picha!!!
Mensajes: 1.030
Antigüedad: 17 años, 9 meses
Puntos: 41
Respuesta: Dudas .jpg .gif y .png

¿De que pagina estamos hablando? Seria interesante ver al paciente...
A lo mejor estas mirando en la direccion equivocada...
__________________
Saludos, Jose

Paginas web y SEO
Anuncios por palabras
  #15 (permalink)  
Antiguo 09/06/2010, 13:02
Avatar de Mizunga  
Fecha de Ingreso: septiembre-2009
Mensajes: 125
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: Dudas .jpg .gif y .png

también podria ser, la pagina es www.euroviajar.com (la construi hace 2 meses y esta parada porque estoy haciendo modificaciones para dejarla lista para continuar publicando)
__________________
Diseño Web y Photoshop.
  #16 (permalink)  
Antiguo 09/06/2010, 13:29
Avatar de Wasper  
Fecha de Ingreso: julio-2006
Ubicación: de cai, picha!!!
Mensajes: 1.030
Antigüedad: 17 años, 9 meses
Puntos: 41
Respuesta: Dudas .jpg .gif y .png

¿Cuanto ping te da? A mi me da casi 200 de ping pero supongo que tu alojamiento esta por tu zona y no en españa, de todas formas 200 de ping es mucho, facilmente justificado que tarde eso...
__________________
Saludos, Jose

Paginas web y SEO
Anuncios por palabras
  #17 (permalink)  
Antiguo 09/06/2010, 13:49
Avatar de Mizunga  
Fecha de Ingreso: septiembre-2009
Mensajes: 125
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: Dudas .jpg .gif y .png

Realmente me imagino que el mismo yo estoy en españa y el alojamiento en USA

¿como has realizado la prueba del ping?
__________________
Diseño Web y Photoshop.

Última edición por Mizunga; 09/06/2010 a las 13:50 Razón: como hacer la prueba del ping
  #18 (permalink)  
Antiguo 09/06/2010, 14:18
Avatar de Wasper  
Fecha de Ingreso: julio-2006
Ubicación: de cai, picha!!!
Mensajes: 1.030
Antigüedad: 17 años, 9 meses
Puntos: 41
Respuesta: Dudas .jpg .gif y .png

En tu equipo, te vas a inicio/ejecutar/ y escribes cmd, le das a intro... o en vez de hacer todo esto, ve a inicio/todos los programas/accesorios/Smbolo del sistema...

Cuando tengas la ventana de comandos (la negra de MSDOS) escribes ping www.euroviajar.com y le das a intro, asi veras que te hace una respuesta y el tiempo ronda los 198ms...
__________________
Saludos, Jose

Paginas web y SEO
Anuncios por palabras
  #19 (permalink)  
Antiguo 09/06/2010, 18:35
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años, 1 mes
Puntos: 1329
Respuesta: Dudas .jpg .gif y .png

Bueno pues tu sitio si está pesado, más de 600 kb´s, y estás tratando de optimizar las imágenes ligeras, no las que en verdad necesitas, también habrá que revisar tu sitio en general:

Primero que nada, tu CSS pesa 86.3 Kb, es excesivo, podrás pasarle algunos optimizadores pero no va a servir de mucho, tendrás que hacerlo manualmente por ejemplo cosas como estas:

Código CSS:
Ver original
  1. .icon-user {
  2. background: transparent url(../images/icons/icons-16x16.gif) no-repeat 0 2px;
  3. }
  4. .icon-calendar {
  5. background: transparent url(../images/icons/icons-16x16.gif) no-repeat 0 -20px;
  6. }
  7. .icon-remove {
  8. background: transparent url(../images/icons/icons-16x16.gif) no-repeat 0 -37px;
  9. }
Aquí puedes usar varias cosas, primero, poner dos clases (o una clase y un id). La clase será para todos los que usen la misma imagen del sprite y el id o la segunda clase para modificarlo individualmente:
Código CSS:
Ver original
  1. .icon {background: transparent url(../images/icons/icons-16x16.gif) no-repeat;}
  2. .user {background: 0 2px;}
  3. .calendar {background:0 -20px;}
  4. .remove {background: 0 -37px; }
También usa un reset, así te ahorras tener que estar poniendo muchas veces: "margin: 0; padding: 0;". Ese CSS es mounstroso tienes que hacer algo.

El siguiente archivo más pesado es el script de mootools (61.3 kb), lo más probable es que no uses todas las funciones así que puedes hacer tu propio core para que no cargue todo lo innecesario: http://mootools.net/core

Luego esta esta imagen: http://www.euroviajar.com/components...es/toolbar.png (61.3 Kb) también está hecha como un sprite pero no es útil es sprite si pesa tanto y lo usas poco. En mi página puedes ver que el menú principal también esta hecho con sprites para usar esquinas redondeadas, pero la imagen es mucho más sencilla: http://www.psdtown.com/wp-content/th...mg/menu_bg.png nopesa ni 1kb, lo mismo para esta imagen: http://www.euroviajar.com/components...box-header.png (54.4 kb).

Esta imagen: http://www.euroviajar.com/components...-menu-icon.png (43.7 kb) la puedes optimizar (aunque no la veo donde está).

También esta imagen: http://www.euroviajar.com/components.../icon_10px.gif tardo en cargarme algunos segundo aún cuando el tamaño es minimo, parece como si se hubiera colgado el servidor, pero probé varias veces.

También te podrías ahorrar algunos kb si mejoras las rutas.

Salidos
__________________
Grupo Telegram Docker en Español
  #20 (permalink)  
Antiguo 10/06/2010, 17:09
Avatar de Mizunga  
Fecha de Ingreso: septiembre-2009
Mensajes: 125
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: Dudas .jpg .gif y .png

por partes:

Wasper a mi el ping me sale de 136ms (me imagino q igual depende de la conexión...)

Carlangueitor muchisimas gracias por tus consejos, aunque he de decirte que utilizo Joomla! y el componente Jomsocial (el css monstruoso del que hablas proviene e ai y se carga por defecto en toda la pagina haciendo que toda ella se ralentice) y todavia no le he metido mano.
Primero he tratado de optimizar el del Foro, quitando imagenes y sustituyendolas por CSS, aora estoy con el de la plantilla y me metere al de Jomsocial en breves... aunque modificando imagenes ya que dentro de poco sacaran nueva versión, en la cual espero que mejoren su desastroso CSS, sobretodo para que no cargue en el resto de la WEB.

He visto tu web (la que has señalado las imagenes) y son un claro ejemplo de como me gustaria que fuera la mia de rapido .

Por ultimo te voy a pedir 2 favores (relativamente sencillos):

Si sabes de algún tutorial basico de mootols en castellano (para novatos).
Si puedes realizar otra vez las pruebas que hayas realizado para comprobar el peso y velocidad, ya que he realizado unos ajustes que "creo" que la han aligerado...

Bueno voy a ello, un Saludo!
__________________
Diseño Web y Photoshop.
  #21 (permalink)  
Antiguo 11/06/2010, 04:48
 
Fecha de Ingreso: febrero-2005
Mensajes: 396
Antigüedad: 19 años, 2 meses
Puntos: 1
Respuesta: Dudas .jpg .gif y .png

Aunque el hilo ha cambiado desde su inicio, voy a intentar aclarar algunas cosas que se han mezclado y otras que son directamente incorrectas:

- GIF es un formato antiguo que estaba protegido por una patente. Como características principales, solo permitía utilizar una paleta de hasta 256 colores distintos, de los cuales uno de ellos podía ser definido como transparente. Además, permite hacer animaciones sencillas. Comprime relativamente bien precisamente por lo limitado de su paleta de colores. Al tener tan pocos colores disponibles es fácil que haya regiones continuas del mismo tono, lo cual es fácil de comprimir. El algoritmo de compresión estaba patentado y era un algoritmo de compresión SIN pérdidas (las posible pérdida de calidad de la imagen se podía deber al transformar la imagen a 256 colores).

- JPEG es un formato de imagen en donde se aplica una compresión con pérdidas, esto es, la imagen se comprime a costa de su calidad. Sin embargo, la perdida de calidad puede ser imperceptible si no se abusa de la compresión y si no se aplican transformaciones agresivas a la imagen una vez comprimida. Está especialmente indicada para imágenes fotorealistas, donde las transiciones de color no son excesivamente bruscas ni donde hay "bordes" demasiado pronunciados. Por otro lado este formato no soporta transparencia.

- PNG es un formato de imagen preparado tanto para imágenes con pocos colores (similar a las gifs) como para imagenes fotorealistas (con millones de tonalidades). Permite transparencia de los píxeles (especificando el grado de transparencia, no como en GIF, que un pixel transparente es totalmente transparente). El algoritmo de compresión de PNG es SIN pérdidas y está basado en el algoritmo de compresión de la biblioteca zlib (vamos, que es similar al ZIP de toda la vida). Por tanto, el algoritmo de compresión está especialmente optimizado para imágenes estilo "GIF", con pocos colores. Para imágenes fotorealistas el grado de compresión que se consigue suele ser bastante pobre comparado con JPG.

Un saludo

Zerjillo
  #22 (permalink)  
Antiguo 11/06/2010, 10:39
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años, 1 mes
Puntos: 1329
Respuesta: Dudas .jpg .gif y .png

Cita:
Iniciado por Mizunga Ver Mensaje
he de decirte que utilizo Joomla! y el componente Jomsocial (el css monstruoso del que hablas proviene e ai y se carga por defecto en toda la pagina haciendo que toda ella se ralentice)
Ahí esta el problema, pues tendrá que mirara como arreglas eso por que si no seguirá siendo lenta tu página.

Cita:
Iniciado por Mizunga Ver Mensaje
Por ultimo te voy a pedir 2 favores (relativamente sencillos):

Si sabes de algún tutorial basico de mootols en castellano (para novatos).
Si puedes realizar otra vez las pruebas que hayas realizado para comprobar el peso y velocidad, ya que he realizado unos ajustes que "creo" que la han aligerado...

Bueno voy a ello, un Saludo!
Aquí hay uno de Mootools: http://www.desarrolloweb.com/manuale...-mootools.html

Las pruebas las hice aquí: http://tools.pingdom.com/ Le acabo de pasar el test y ya mejoró (quitaste casi 200 KB) Ya está mejor pero aún puedes mejorarlo, ahora el CSS pesa 100kb.

Saludos
__________________
Grupo Telegram Docker en Español
  #23 (permalink)  
Antiguo 16/06/2010, 18:54
Avatar de Mizunga  
Fecha de Ingreso: septiembre-2009
Mensajes: 125
Antigüedad: 14 años, 7 meses
Puntos: 2
Sonrisa Respuesta: Dudas .jpg .gif y .png

Bueno, muchas gracias a todos, buscando y buscando he encontrado maneras de optimizar las imagenes manuales y automaticas, reduciendo el peso de las que mencionaba Carlangueitor desde 68 - 48 - 40 KB a 2KB en total, (una de ellas sustituida mediante CSS)

El CSS me meti en el lo toque y decidi dejarlo ya que van a sacar una nueva versión con nueva plantilla la cual según dicen ocuapara muchisimo menos, asi que, voy a esperar.

Gracias a tod@s por vuestra ayuda.
__________________
Diseño Web y Photoshop.
  #24 (permalink)  
Antiguo 20/06/2010, 19:09
Avatar de Mizunga  
Fecha de Ingreso: septiembre-2009
Mensajes: 125
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: Dudas .jpg .gif y .png

Bueno ya se ven los resultados, y como todo esto comenzo porque vi en Google Herramientas para Webmasters que el rendimiento de mi Web era de 4,7 segundos (muy lento, aunque aora 2,1).

Comence a investigar y demás, optimice imagenes, utilice herramientas para hacerlo automaticamente y encontre esto que probablemente sea mucho mejor que cualquier herramienta para comprimir imagenes que haya por ai:

http://www.forosdelweb.com/f6/optimi...agenes-818137/

lo he publicado en un nuevo tema para que asi puedan leerlo más personas, y con su propio titulo para que sea más accesible.

Bueno gracias y hastapronto.
__________________
Diseño Web y Photoshop.

Etiquetas: gif, jpg, png
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 18:09.