Tutorial: Crear archivos de imagen en formato PNG

Hola! Voy a hacer un tutorial segun la propuesta de InDeed, que traducida a un provervio chino seria: "Dale hoy pescado a un hombre, y volverá a tener hambre mañana. Enseñale a pescar, y no pasará hambre nunca más", o algo asi, que no se chino...

Bueno, pues voy a hacer el tutorial, que realmente estaba preparando para una web de tutoriales sobre programación e informática en general (esta lista estas navidades, con su forito y tal, en la que por cierto mi nick es RJ3), será sobre como hacer PNG optimizados para ser descargados de la Web a gran velocidad, y no comer ancho de Banda a EOL (ni a ninguna web), y poder navegar más rápido por los foros. Destaco el hecho de que usaré 3 programas: 1 Libre (Gimp) y 2 de Autor (Fireworks, y Photoshop). Por qué estos? pues más que nada porque son los más extendidos y mas utilizados... ojalá hubiera sido 3 Libres, o 2 libres y 1 de autor... pero bueno, c'est la vie, y cuando salga alguno mas (de cualquiera de los dos tipos) intentaré ayudar en lo que pueda.

Antes de empezar:

Por qué PNG y no GIF? Pues la historia es muuuu larga, pero en resumen es porque GIF tiene patente, y la emrpesa que la posee tiene en reserva el hecho de cobrar a las personas que pongan GIF en sus páginas web, de la misma manera como a las personas que hagan programas que compriman con el algortimo de GIF (que es lo que esta patentado). Esto va en contra del Soft Libre, y más en contra de los "Formatos Libres" que tratan sobre estos etemas. El formato PNG es un formato LIBRE, es decir que puedes usarlo como quieras y modificarlo como te de la gana, ya que despues de todo los "formatos" de archivo de PC no son más que un algoritmo. Eso si, si quieres modificar el formato en sí, has de seguir unos "standards" ya que si no se podria generar el caos y habria problemas entre programas.

Que gano usando PNG en lugar de GIF? Muy sencillo: a parte de fomentar el Software Libre, y evitar ser obligado a pagar una licencia de uso de un formato que empieza a ser obsoleto, PNG a 8 bits (que lo de los bits quede claro) comprime bastante más que GIF, aunque en algunas imagenes ocupen lo mismo, y en imagenes muy pequeñas (de unos 16x16 a 24x24) y con muy pocos colores GIF gane terreno a PNG, pero... realmente 0,2 o 0,5 KB no importan tanto si hay una causa detrás (en este caso, defender un standard). Con este tutorial, espero que te ahorres unas cuantas KB en tus imagenes. Sino bajan de "peso", quizas sea el programa que no optimice bien. Por supuesto, estas tencinas pueden ser utilizadas en GIF, pero la gracia del tutorial es el formato final: PNG.

Y para empezar, una comparativa y unas aclaraciones, entre los distintos PNG: 32 bits, 24 bits y 8 bits (este ultimo a 256, 128, 64, 32 y 16 colores). Para ello utilizaré mi propio "Avatar Navideño" en EOL de tamaño 70x70. Por supuesto, daremos por hecho el que ya teneis un avatar, y simplemente quereis convertirlo a formato PNG optimizado.

Diferencias entre PNGs

Hay diferentes tipos y variantes, por supuesto solo tocaremos los estricatamente necesarios (nada de JNG, mezcla entre JPEG y PNG, ni el MNG, un PNG aniamado), si todo un caso ya los veremos más adelante.

PNG de 32 y 24 bits: Básicamente son archivos de alta calidad en colorido/imagen... no hay perdida de calidad como en los JPEG, por lo que ocupan bastante más... 16 millones de colores en ambos, y la unica diferencia es que en 32 bits hay la posibilidad de guardar transparencias ALPHA (degradados a transparente, p.e), de ahi los 8 bits de más.

32 bits :: 11,7 KB
24 bits :: 10,6 KB

PNG de 8 bits: Nuestro formato estrella de estos momentos. Compatible con todos los browsers del momento (desde I. Explorer 3.1 y Netscape 2). El formato web Standard es de 256 colores (o mejor dicho 255). Hay variantes de 512, pero no es seguro que se vea en todos los navegadores, por lo que no lo explicaré. Tiene posiblidad de usar transparencias ALPHA y Indexada. Se pueden generar archivos con menos colores, quitando los considerados innecesarios o simplemente imprescindibles, para asi conseguir archivos más pequeños y rápidamente descargables. Muestra:

8 bits, 256 colores :: 4,32 KB
8 bits, 128 colores :: 3,43KB
8 bits, 64 colores :: 2,77 KB
8 bits, 32 colores :: 2,26 KB
8 bits, 16 colores :: 1,81 KB

Como podeis observar, no hay muchas diferencias... aunque fijaros bien y las vereis. Mirad la Primera y la última, las apreciareis mejor. Pero... a que casi no se nota???


Pasemos a la práctica... Empezaremos con Photoshop, para seguir con The Gimp y acabar (por ahora, hasta que encuentre alguno otro que sea BUENO) Fireworks. Porqué este orden? pues... por no hacer primero uno libre y luego dos de autor, primero dos de autor luego uno libre... y al azar a salido asi.

Aclarar que cuando se hable de transaparencias hablaremos de transparencias de color INDEXADO ya que las ALPHA no las interpretan (por el momento) los navegadores de internet. Lo digo por si lo veis en alguna opción, que seleccioneis Indexado en lugar de ALPHA o no se os verá nada!

Adobe PHOTOSHOP


Para comenzar, abriremos el archivo ya guardado en PSD o cualquier otro formato (BMP, GIF, JPEG...) e iremos a "Archivo/Guardar para Web" (imagen 1)


Imagen 1

Aparecerá la siguiente ventana (la he reducido pq era muy grande):


Imagen 2

Yo siempre amplio la imagen que voy a optimizar (en la imagen 2 es mi avatar navideño de EOL) un 400% o más para ver las impurezas o los cambios bruscos... La zona que he remarcado con verde es en la que deberemos cambiar los valores de la imagen...


Imagen 3

Como podeis ver, remarco en rojo las dos zonas más importantes, ya que son las que que realmente nos interesan. La primera zona de rojo (arriba a la izquierda) es donde se ha de seleccionar el formato de salida (aunque ahora maque PNG-8 a vosotros os saldrá otra cosa... marcad esto mismo). Y en la de abajo a la derecha aparece el numero de colores... La idea es ir incrementando y aumentando este valor viendo en la zona de la imagen como va quedando. No seais racanos e intentad valores "bajos" como 32 colores o 64... Tened en cuenta que la imagen, si la estais viendo ampliada, puede engañar... ponerla al 100% y variar el numero de colores, vereis que no hay casi diferencia entre gran cantidad (255) y pocos colores (64-32). Muchos avatares pueden reducirse incluso a 16 colores. Tambien podeis hacer PNGs con fondos transparentes y 16 colores (solo que serian 17 ^__^x) o con los coleres que querais hasta 255.


Imagen 4

En esta ultima imagen de Photoshop, y para acabar con la parte de Photoshop os muestro la zona que enmarqué en amarillo de la Imagen 2. Hay tres zonas en rojo. En la primera (arriba a la izquierda) podreis ver los valores que tiene la imagen optimizada si la guardaramos en estos momentos... la segunda, debajo de la anterior, el ratio del zoom de la imagen, y en la tercera el explorador en el que quereis previsualizar. Como podeis ver, tengo puesto Phoenix, pero por defecto sale el Explorer.

The GiMP

Destacar que este Software es LIBRE y disponible gratuitamente, sin soporte GIF, o pagando para tener el soporte de este... por eso estamos haciendo este tutorial, para poder utilizar un formato sin necesidad de que venga la compañia que lo patentó y nos cobre por usarlo en nuestra web (a parte de para enseñar como usar el formato PNG, que es bastante desconocido para algunos). Creo que solo hay versión para Linux.

Una vez abierto el archivo (Fich./abrir... ya sabeis como siempre, aunque aquí en lugar de "Archivo" pone "Fich."), vereis un montón de menús flotantes por la pantalla... yo los he "alineado" a mano para poder capturarlos todos más o menos bien (y he reducido la imagen pq era muy grande):


Imagen 5

Ahora, y a diferencia de otros programas, pasaremos a reducir el numero de colores de la imagen, para ello, deberemos seleccionar "color indexado" del menú contextual que aparece si hacemos click encima de la imagen (Imagen 6)


Imagen 6

Os aparecerá esta ventana:


Imagen 7

Como veis en la zona de rojo, ahi definireis el numero de colores que quereis, como digo siempre: no seais demasiado racanos y poned para empezar 64 colores. Lo unico que encuentro es que no puedas previsualizar (o al menos en mi versión no puedes), con lo que tienes que probar un determinado número de colores y si no te gusta como queda deshacer (CONTRL+Z) e intentarlo con un numero mayor o menos.

Una vez optimizado a tu gusto, llega la hora de guardar. Fich./Guardar como... aparecerá la siguietne pantalla (Imagen 8)


Imagen 8

Aqui no hay nada destacable realmente, ya que la optimización ha venido de antes. Solo decir dos cosas: seria recomendable guardar la resolución, ya que algunos programas (editores/browsers...) necesitan saber la resolución (bits por centimetro cuadrado) ya que pueden hacer tonterias, y segundo, que lo de "Nivel de compresión" en 3 preubas que he hecho, a 1 a 5 y a 9 el resultado ha sido el mismo, asi que lo dejais en el que querais

Macromedia FIREWORKS

Como los anterior: Abrimos la imagen que queramos optimizar. Una vez hecho esto, pasaremos a la optimización seleccionando "Archivo/Presentación..." (Imagen 9)


Imagen 9

Una vez dentro vereis algo asi:


Imagen 10

En la zona enmarcada en rojo encontramos las opciones que usaremos para optimizar la imagen. En "Formato:" seleccionaremos "PNG 8". En "Paleta:" escogeremos "Adaptable", y una vez hecho esto, donde en la imagen (dentro del recuadro rojo) pone 32, a vosotros os saldrá otro numero entre 1 y 256. Ahora podeis hacer dos cosas: seleccionar las opciones que te dan (2, 4, 8, ..., 256) o poner un número a mano (que puede ser 13, 69 o 32 o lo que querais). Solo decir que esta ultima opción, permite optimizar mucho mejor la imagen que poniendo las de la lista. Recordad de ir mirando al 100% como queda, y recordad de ser generosos con la reducción, que aunque creais que "se nota que le he quitado un color" no es asi (a no ser que sea un color importante!). Una vez optimizado, le dais a "Exportar..." y listos!!!



Espero que sirva de algo, al menos para fomentar el PNG. Si teneis dudas ya sabeis Y si teneis una sugerencia tambien... este articulo irá creciando en medida que la gente sugiera.

Saludos!!!!