Autor Tema: pixeles al desnudo - formatos de imagen para la web  (Leído 11380 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado salvadoresc

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 11652
  • Adobe Certified Expert en ACISEAPRENDE
    • Foro de Diseno - Pixeles al Desnudo
pixeles al desnudo - formatos de imagen para la web
« : diciembre 08, 2009, 07:35:07 pm »
Compresión vs calidad

cuando tratamos con imágenes que serán publicadas en la web, uno de los principales aspectos a tomar en cuenta es el formato de la imagen. debido a que como diseñadores no podemos controlar la velocidad de conexión que nuestros visitantes usaran se vuelve de una gran importancia el optimizar las imágenes al máximo, pero también existen otros factores a tomar en cuenta y es de imagen en imagen que vamos evaluando cual de los formatos disponibles nos conviene utilizar.

los formatos disponibles son: JPG, PNG, GIF y contrario a lo que microsoft dice .BMP no es un formato estándar y para nada recomiendo su uso en paginas web, por su deficiente capacidad de compresión.

JPEG: viene de la abreviatura de Joint Photographic Experts Group quienes han creado el estándar desde hace mucho tiempo atrás, el grupo fue organizado alrededor de 1986, desarrollando los primeros estándares en 1992, el cual fue aprobado en septiembre del mismo año, es un método usado comúnmente para comprimir imágenes fotográficas, que tienen suaves transiciones de color, es fuertemente utilizado por camaras digitales, el nivel de compresión puede ser configurado permitiendo reducir dramáticamente los tamaños de archivos a costas de perder la calidad, hay que tomar en cuenta que aumentar demasiado la compresión conlleva a la aparición de los artefactos jpg

imagen propiedad wikipedia


Estos artefactos son generados por el tipo de compresión que utiliza el jpg conocida como compresión Lossy donde lo que obtenemos es perdida de información, la información de color de la imagen se ve reducida, por lo tanto este formato de imagen es estrictamente recomendado para uso exclusivo de la WEB y no de impresión ya que esa perdida de información afectaría la calidad de impresión.

GIF:
el nombre viene por sus siglas, Graphics Interchange Format, formato introducido en 1987 por Compuserve el cual ha sido fuertemente adoptado en la web debido a su flexibilidad de soporte y tamaño.

Con una capacidad de desplegar desde 2 colores hasta 256 colores, no se vuelve muy adecuado para fotografías o imágenes de tonos continuos, sin embargo toma mucha importancia en imágenes, simples de pocos colores como logos, o gráficas con colores sólidos.

las imagenes GIF usan compresion Lossles LZW, y es su profundidad de color la que permite, tamaños de archivo tan reducidos y no hay sacrificio alguno de información dentro de esta compresión.

Ejemplo de GIF animado, propiedad de Wikipedia

una característica, que hizo sumamente popular las imágenes gif ademas de la posibilidad de animación, ha sido la capacidad de tener transparencia, pero su punto fuerte, ha sido el amplio soporte por parte de los navegadores Web lo que lo ha convertido en la elección mas acertada para gráficos simples en la WEB, no es que sea superior a PNG, pero en los inicios de la WEB el poco soporte de parte de PNG no lo hacían una opción competitiva.

Uno de los problemas a los que el formato se enfrento es a que el algoritmo de compresión LZW fue protegido por una patente hecha por la compañía Unisys

PNG:

el nacimiento de PNG, por sus siglas (Portable Network Graphics) fue luego de que surgiera el problema de patentes alrededor del algoritmo de compresión LZW, y su principal propósito ha sido reemplazar las imágenes GIF, es un formato extensible para almacenamiento portátil con compresión Lossles sin perdida de calidad, se convirtió en una alternativa libre de patentes.

Su soporte va desde colores con 1 bit de profundidad hasta 16 bits, y una de las características mas sobresalientes ha sido la capacidad de tener transparencia alfa, las que permiten presentar transparencias variables, ademas de haber mejorado y superado la calidad de las transparencias que presentaban los GIFs.

PNG y la animación: aunque el formato GIF se caracterizaba por ser capaz de presentar animaciones, se deicidio que PNG seria un formato de imagen estática, para animaciones se desarrollo un formato derivado, conocido como MNG(Multi-image Network Graphic) sin embargo este formato aun no es amplia mente soportado.

la version 1.0 de PNG se convirtió en un formato recomendado por la W3C el 1 de octubre de 1996 y actualmente es soportado por la mayoría de navegadores recientes, el principal navegador que tiene un porcentaje de usuarios considerable y que no soporta PNG es IE6, para el cual se acostumbra sustituir las imágenes PNG por GIF usando IECC(Internet Explorer Conditional Comments)

Imagen de muestra de transparecias alfa. Propiedad de wikipedia

Lecturas Recomendadas:

Compresión de imagen (en ingles).
Estos estan en ingles y español:
Compresión Lossy
Compresión Lossles.
SVG, Scalable Vector Graphics.
W3C SVG.
Awaken my child, and embrace the glory that is your birthright. Know that I am the Overmind; the eternal will of the Swarm.

haycoctelesamor.com

Desconectado Reptile

  • The Communiter-
  • *
  • Mensajes: 1159
  • Fight!
Re:pixeles al desnudo - formatos de imagen para la web
« Respuesta #1 : diciembre 09, 2009, 08:46:20 am »
NUevamente interesante el mundo de la imagen digital....

Siempre me he preguntado en las imágenes JPEG

Se puede ajustar la forma en que los navegadores descarguen estas imágenes?.

Porque por ejemp. he visto que unas imágenes las va cargando como franjas de arriba hacia abajo, y la parte de abajo que no ha cargado se queda como en gris.

Y  otro tipo de JPEG como que se carga en pasadas, es decir se carga del todo una imagen borrosa, luego con otra pasada se va haciendo más nítida y así hasta que llega a su formato ideal.
Será que se pueden configurar el archivo JPEG cómo se desea que se cargue?

A la hora que tratás una imagen JPEG para web, podés hacer que esta se descargue de forma progresiva, haciendola ver así como en frajas como decís. De lo contrario se muestra al estar cargada por completo. Esto lo podés lograr con Photoshop o Fireworks.

El SVG es lo mas interesante, en wikipedia ya suben páginas con imagenes en este formato, el formato aún no es standard pero es muy bueno... (de hecho ya lo están recomendando detro de las normtivas para discapacidad) acá te cargan los vectores uno a uno hasta formar toda la imagen.

Hay un formato mas que no veo por acá:

DjVu
http://es.wikipedia.org/wiki/DjVu

Desconectado salvadoresc

  • Global Moderator
  • The Communiter-
  • *
  • Mensajes: 11652
  • Adobe Certified Expert en ACISEAPRENDE
    • Foro de Diseno - Pixeles al Desnudo
Re:pixeles al desnudo - formatos de imagen para la web
« Respuesta #2 : diciembre 09, 2009, 09:03:07 am »
excelente dato reptile.

y en efecto es una configuracion de compresion, se le encuentra como Interlaced Progressive JPEG y lo que realmente hace es practicamente tener multiples versiones de calidad de la imagen, con el que hace varios escaneos, es muy util para conexiones lentas donde de inmediato veras una imagen, aunque sea de baja calidad, pero progresivamente continua la descarga hasta que obtenes la totalidad de los datos de la imagen, y pareciera que mientras lo hace va ganando calidad  :D
Awaken my child, and embrace the glory that is your birthright. Know that I am the Overmind; the eternal will of the Swarm.

haycoctelesamor.com

Desconectado ENIGMAXG2

  • The Communiter-
  • *
  • Mensajes: 5766
Re:pixeles al desnudo - formatos de imagen para la web
« Respuesta #3 : diciembre 09, 2009, 10:07:13 am »

Hay un formato mas que no veo por acá:

DjVu
http://es.wikipedia.org/wiki/DjVu

El DJVU es un formato parecido al PDF...

_____________________________________________________

Yo para imágenes uso el PNG ya que para hacer skins, iconos, botones y otros es el mejor, debido a su soporte para transparencias alpha.

Stardock tiene implementado un sistema propietario de imágenes animadas, el NWA: son imágenes TGA animadas.

TGA guarda cierto parecido con el PNG, pero es poco común (se le puede encontrar en ciertos juegos "baratos" y skins para Windowblinds).

El GIF tiene la ventaja de ser animado, pero 256 colores dejan mucho que desear.

El SVG es una alternativa bastante buena, pero es extremadamente difícil para trabajar, los editores se hacen muy pesados (Inkscape e Illustrator), SVG es recomendado para imágenes sencillas y no para iconos o botones con muchos detalles.

Volviendo al PNG, actualmente se está trabajando en dos variantes del PNG que incluyen animación:

El aPNG (Animated Portable Network Graphics)

http://es.wikipedia.org/wiki/APNG

y el MNG (Multiple-image Network Graphics) actualmente el soporte ha sido abandonado.

http://es.wikipedia.org/wiki/Multiple-image_Network_Graphics
#SaveMarvelHeroes
ZOTAC GTX1060 MINI 3GB | HDD 2 TB | CM 550W | Core i5-2400 3.1GHZ | Intel H61 MOBO | CORSAIR 8GB DDR3 1600 | AOC 2269W 1080p + Acer X163WL 768p | W8.1 PRO x64| Logitech Z506/TurtleBeach EarForce P11[/center

Desconectado Reptile

  • The Communiter-
  • *
  • Mensajes: 1159
  • Fight!
Re:pixeles al desnudo - formatos de imagen para la web
« Respuesta #4 : diciembre 09, 2009, 11:08:04 am »
El DJVU es un formato parecido al PDF...

_____________________________________________________

Yo para imágenes uso el PNG ya que para hacer skins, iconos, botones y otros es el mejor, debido a su soporte para transparencias alpha.

Stardock tiene implementado un sistema propietario de imágenes animadas, el NWA: son imágenes TGA animadas.

TGA guarda cierto parecido con el PNG, pero es poco común (se le puede encontrar en ciertos juegos "baratos" y skins para Windowblinds).

El GIF tiene la ventaja de ser animado, pero 256 colores dejan mucho que desear.

El SVG es una alternativa bastante buena, pero es extremadamente difícil para trabajar, los editores se hacen muy pesados (Inkscape e Illustrator), SVG es recomendado para imágenes sencillas y no para iconos o botones con muchos detalles.

Volviendo al PNG, actualmente se está trabajando en dos variantes del PNG que incluyen animación:

El aPNG (Animated Portable Network Graphics)

http://es.wikipedia.org/wiki/APNG

y el MNG (Multiple-image Network Graphics) actualmente el soporte ha sido abandonado.

http://es.wikipedia.org/wiki/Multiple-image_Network_Graphics

El PNG es la opción mas útil para diseños estéticos y transparencias como ustedes dicen PERO el gran PERO .....

Muchos usuarios (de hecho mas del 40% según el monitor de mi sitio) usan la basurita de IE6 y un 10% + aprox. usan las demás varientes de IE.

Y como todos sabemos es un dolor de eggs manejar transparencias en PNG para IE6... tenés que usar una serie de artilugios (a.k.a. scripts  :D) para que se vean.

Yo prefiero evitar en la medida de lo posible usar transparencias, por lo menos (si se me cumple) algún día se deje de usar ese navegador tan problemático.

Desconectado ENIGMAXG2

  • The Communiter-
  • *
  • Mensajes: 5766
Re:pixeles al desnudo - formatos de imagen para la web
« Respuesta #5 : diciembre 09, 2009, 06:49:51 pm »
Y tenía que ser el mentado IE 6, por cierto ya hay varias campañas para hacer que los usuarios se cambien a Firefox, IE8, Opera u otras alternativas.

http://www.noalie6.com/

http://www.tomshardware.com/news/internet-explorer-ie6-windows-7,9181.html

Así que como dicen en esas páginas, dejemos de dar soporte a esta basura de navegador.
#SaveMarvelHeroes
ZOTAC GTX1060 MINI 3GB | HDD 2 TB | CM 550W | Core i5-2400 3.1GHZ | Intel H61 MOBO | CORSAIR 8GB DDR3 1600 | AOC 2269W 1080p + Acer X163WL 768p | W8.1 PRO x64| Logitech Z506/TurtleBeach EarForce P11[/center

lampard

  • Visitante
Rigtones
« Respuesta #6 : enero 10, 2010, 05:44:26 pm »
Hola amigos Salvadorenos mi nombre es Rigoberto tengo 18 a.0s, soy de Usulutan pero ahora estoy viviendo en New York y quiero aserles una pregunta tengo muxo tiempo de andar queriendo encontrar el nombre del rigtone que esta echo de partes de cansiones la verdad no se como se llama peroa hi les dejo algo de como dise porfavor si saven como se llama si me disen porfavor s elos pido de todo corazon.....


dise... que tiene  un telefono con senal salelital tipo parlante santiago bernabeu un lamborginhi y que la chica le pide mas gasolina que la va a yevar a un otel donde esten solos y que el no tiene dinero ni nada quedar... algo asi dise si saben de que ablo porfavor diganme como se llama les dejo mi correo para que me mande el nombre del rigtone a mi correo grasias amigo....
:thumbsup:
dikey8@yahoo.com