Mejor formato de imagen para una Web

sniffersv · #1 (**permalink**) 27/01/2011, 08:48

Hello

Quisiera saber cual es el mejor formato (jpeg,gif,png,etc,) para una pagina web, es que soy novato en esto de la programacion Web y no se cual es el mejor
de antemano muchas gracias

Artificium · #2 (**permalink**) 27/01/2011, 09:14

Supuestamente el mejor formato es el PNG ya que fue creado especialmente para la Web, pero las diferencias entre un JPEG y un PNG visualmente es nula, los GIFs son más ligeros pero tienen menos calidad, son buenos para íconos, pero no sirven para fotos o imágenes que deben tener buena resolución. Al final yo uso los tres formatos, la costumbre me hace usar JPEG, especialmente porque los usuarios de mis páginas suelen usar eso. Por ejemplo si necesitan un cargador de imágenes, no voy a restringir para que sólo se puedan cargar PNGs porque considero que es el mejor formato. Haz visto tú alguna vez una cámara digital que aunque sea transforme las imágenes a PNG?

Conclusión? no sé porque los novatos se hacen este tipo de preguntas que en realidad no son problemas, yo cuando era novato no me hacía esa clase de preguntas, en fin. Trabaja con los tres tipos, solo te la restricción de sólo usar GIF para íconos. Suerte!

stingofung · #3 (**permalink**) 27/01/2011, 09:27

Saludos "sniffersv",

Te oriento un poco sobre los formatos para que veas la diferencias y asi puedas distinguir cual seria el formato adecuado a usar dependiendo de tus necesidades:

* GIF es el formato ideal para animaciones.
* JPEG es el formato ideal para las fotos.
* PNG es el formato ideal para todo lo demás iconos, imágenes de fondo, etc.

JavierB · #4 (**permalink**) 27/01/2011, 09:33

Hola sniffersv

Muevo tu tema al foro de Diseño Gráfico desde Web general.

Saludos,

Rafael · #5 (**permalink**) 27/01/2011, 10:17

A ver, hay varias cosas que aclarar.

Artificium, no es que se haya hecho png para web y ya por eso es para web cosas así.

La orientación de Stingofung, en términos generales es más acertada, pero hay que aclarar mejor las cosas.

El formato que vas a notar más es el jpg... tapices, la foto de la cantante favorita, la foto del coche... en general fotos, como ya se ha dicho.

Dependiendo de lo que haga cada quién, puede usar jpg para iconos, pero, como el jpg le agrega ciertos "defectos" que son más notorios en plastas grandes de color (como una gráfica de pie, pay o redondita) en ese caso se usa mejor png.

El png además puede tener transparencias con una cosa que se llama canal alpha, o sea transparencias muy bonitas y útiles. Es el único de los 3 que te sirve para eso.

El gif, en general, gif animado, para animaciones sencillas, como ya se comentó también, pero dependiendo del tipo de animación, en realidad se usa flash o quizá una librería como Jquery (JavaScript a final de cuentas), o directamente un video.

Una nota más. Dentro del flash acabas usando también ya sea jpg o png, aparte de un dibujo nativo en vectores. (Nadie usaría un gif dentro de flash)

igualacero · #6 (**permalink**) 27/01/2011, 11:41

Hola sniffersv como verás hay bastantes opiniones sobre el tema yo pienso que en realidad no hay mucha diferencia entre los formatos, usalos todos y veras que png te deja el fondo en transparaten lo puedes necesitar en un momento determinado. Pero sobre todo ten encuenta dos cosas las imágenes en la web cuanto menos pesen mejor pero también está la calidad que quieras que tengan esas imágenas, supongo que dependiendo del proyecto te puede interesar una u otra calidad y también uno un otro tamaño de carga.
Un saludo.

muchillin · #7 (**permalink**) 27/01/2011, 17:44

resumiendo lo explicado por rafael

jpg - para fotos, resoluciones 72 o 96
gif - para pequeñas animaciones
png - para transparencias

salu2

Orantx · #8 (**permalink**) 28/01/2011, 03:57

Cuidao que png con transparencia no lo lee el ie6 jjejje yo me estube rayando mucho con esto

valentina4you · #9 (**permalink**) 28/01/2011, 09:17

Cita:

Iniciado por stingofung

Saludos "sniffersv",

Te oriento un poco sobre los formatos para que veas la diferencias y asi puedas distinguir cual seria el formato adecuado a usar dependiendo de tus necesidades:

* GIF es el formato ideal para animaciones.
* JPEG es el formato ideal para las fotos.
* PNG es el formato ideal para todo lo demás iconos, imágenes de fondo, etc.

Voy agregar algo a esta info, los GIF se utiliza muchísimo también para fondos continuos, es decir, viste que algunas webs tienen un banner con un degradado de abajo hacia arriba, generalmente es un CSS y la imagen es sumamente pequeña, en vez de ser un banner de 1200 x 60 se hace una imagen de 60x2 por ejemplo y se repite infinitamente, de esta manera se reduce considerablemente el peso del archivo y proporciona mayor fluidez, rapidez y ocupará menor tamaño en el host. Para esto también se usa el GIF.

La resolución estándar de las imágenes para internet es de 75ppp (puntos por pulgada) más de eso no tiene sentido porque en una pantalla no se apreciará.

Si nos pusiéramos a hacer un análisis una web optimizada estaría repleta de imágenes GIF, con una buena cantidad de JPG y en menor medida formatos PNG. El PNG es un gran formato con la desventaja de que pesa considerablemente más que otros, pero de todas maneras se utiliza mucho al querer utilizar imágenes sin fondo.

muchillin · #10 (**permalink**) 31/01/2011, 20:13

amigos aprovecho el tema para consultar sobre el archivo eps, " EncapsuladoPostScript " una vez me llego uno pero nunca supe de que se trato...

salu2

Rafael · #11 (**permalink**) 01/02/2011, 00:46

Es el formato que se utilizaba antes para salida de archivos para impresión. Digamos que el antecesor del pdf.

Los puedes abrir con Ilustrator o rasterizar con Photoshop o Photopaint.

muchillin · #12 (**permalink**) 01/02/2011, 20:04

Cita:

Iniciado por Rafael

Es el formato que se utilizaba antes para salida de archivos para impresión. Digamos que el antecesor del pdf.

Los puedes abrir con Ilustrator o rasterizar con Photoshop o Photopaint.

osea podria ser como un archivo a lo tiff q llegan sin perdida de calidad para impresion

gracias rafael....
salu2

Rafael · #13 (**permalink**) 02/02/2011, 10:16

Sí y no.

Un eps, como el pdf, puede tener tanto vectores como mapas de bits.

En general siempre hace falta tener algún formato común para enviar y manejar archivos dentro de una cadena de producción, el diseño es eso, una cadena de producción. Y una característica es que en cierta medida sea un formato cerrado, esto es que aunque lo puedas probablemente editar si lo necesitas, el contenido esté protegido contra modificaciones e interpretaciones accidentales.

Es un formato de salida. Muchas opciones que tenías al generarlo, digamos en Ilustrator, ya no las tiene, en pro de la compatibilidad.

El caso del tif, ciertamente es un formato común, como dices y sin "pérdida de calidad", aunque habría que definir "pérdida de calidad". En el caso del tif esta 'no pérdida' de calidad originalmente estaba dada por el tipo de compresión sin pérdida de datos.

muchillin · #14 (**permalink**) 02/02/2011, 16:18

Cita:

Iniciado por Rafael

Sí y no.

Un eps, como el pdf, puede tener tanto vectores como mapas de bits.

En general siempre hace falta tener algún formato común para enviar y manejar archivos dentro de una cadena de producción, el diseño es eso, una cadena de producción. Y una característica es que en cierta medida sea un formato cerrado, esto es que aunque lo puedas probablemente editar si lo necesitas, el contenido esté protegido contra modificaciones e interpretaciones accidentales.

Es un formato de salida. Muchas opciones que tenías al generarlo, digamos en Ilustrator, ya no las tiene, en pro de la compatibilidad.

El caso del tif, ciertamente es un formato común, como dices y sin "pérdida de calidad", aunque habría que definir "pérdida de calidad". En el caso del tif esta 'no pérdida' de calidad originalmente estaba dada por el tipo de compresión sin pérdida de datos.

ya entendi osea un eps es como un formato estandar dentro de una cadena de produccion ya q puede ser q el arte vaya pasando de mano en mano.... bueno ahora en pdf, creo q estos formatos ya pasaron

gracias rafael por la iluminacion, salu2

Rafael · #15 (**permalink**) 02/02/2011, 20:12

Si, aunque el arte cerrado, o sea que ya es de salida, que puede ser el inicio de algo más. Por ejemplo. Un logo, lo preparas como pdf. Ya el logo acabado, ya lo editaste en tu Corel o Ilustrator, lo trabajaste con capas, etc. Final del camino un pdf.

Inicio del camino, toman el pdf para ponerlo en un anuncio, editan el anuincio, en ilustrator, lo revisan, y al enviar a la imprenta... zaz, otra vez pdf. En este caso para que ya no lo muevan, el anterior para que sea compatible con lo que gusten.