CAPITULO 4. Optimización de imágenes:

"Optimizar" una imagen para web es tratar de lograr la mejor calidad visual en la imagen, junto con el menor peso posible en Bytes, además, obviamente, de la optimización estética, que estará marcada por el tipo de diseño, el producto, la formación del diseñador, etc.
Esto requiere, no sólo pautas técnicas claras, sino el desarrollo de cierta "intuición" que se va adquiriendo solamente con la práctica constante.
Aquí te daremos los pasos básicos para lograr la mejor resolución posible.

Para comenzar hemos tomado una imagen y la hemos abierto con Fireworks:

La ventana comienza por decirte varias cosas:

1. El formato en que está guardada la imagen original, que en este caso es un JEPG.
2. El tamaño real en pixels (1258x882), y el zoom que está usando el programa para verla entera (26%).

Como te imaginarás, 1258 x 882 es un tamaño un poco grande como para verla cómodamente en una resolución de 800 x 600 (que suele ser el estandard), así que, una de las primeras cosas que debemos hacer es reducir su tamaño.
Para eso vamos a Modify>Canvas>Image size:

Y aquí debemos aclarar algunas pautas:

1. Si bien Fireworks es un programa que también nos puede dar la opción de trabajar en proyectos para imprenta, su fuerte es la web, por eso obviaremos la parte de "Print size", que está referida a la parte de impresión y trabaja en pulgadas (inches), y no en pixels, como trabajamos en la web.
   A excepción del ítem "Resolution". Aquí tratemos de no utilizar más de 100, pues para la web es suficiente resolución con esto. Aún se puede llegar a utilizar 75, pero eso variará según los resultados que vayamos viendo una vez que tengamos más formado el ojo para este tipo de cosas.
2. Salvo que nuestra intención sea crear algún tipo de composición artística, las imágenes NUNCA se deforman. O sea que, ya se achiquen o se agranden, es importante mantener la proporción de ancho y alto, por eso el casillero de "Constrain proportions" debe mantenerse activado.

Así que, establecidos estos supuestos, vamos a suponer que, por cuestiones de espacio, la imagen no puede tener más de 400 pixels de ancho. Con que pongas "400" en el lugar en donde dice "1258" bastará, pues al tener activada la opción "Constrain proportions", el 882 cambiará "proporcionalmente" para mantener la imagen igual, pero más pequeña.

Una vez que hemos arreglado el tamaño final de la imagen, nos toca optimizar el "peso" de la misma, para que los usuarios de nuestra página no deben esperar demasiado para verla.
Para comenzar iremos a la solapa de "Preview", en donde veremos, no sólo el peso exacto de la imagen, sino también su aspecto real, el que verán los usuarios. Esto último lo decimos porque muchas veces, lo que vemos en la solapa "original" es de mejor calidad visual que la realidad que se ve en el Preview.

La imagen que tenemos aquí pesa 14,24 Kb, y tardaría (más o menos) 2 segundos en un módem de 56 Kb, según nos dice el programa. Pero lo cierto es que este cálculo sólo es real en condiciones ideales, o sea: un buen equipo, una buen módem, un buen proveedor de Internet (ISP), una buena hora (en que no esté medio país conectado), que la página esté alojada en un buen Hosting, etc, etc, etc. Y todos sabemos sabemos por experiencia que estas condiciones ideales no se dan TODAS juntas como para que una imagen de 14,24 Kb baje en 2 segundos. Por eso, nuestra optimización debe apuntar a las condiciones de conexión medias o medio-bajas, y no a las mejores. Y para esas condiciones, esta imagen es realmente pesada.
Habrán notado ya que hay otras dos solapas: 2-Up y 4-Up. Estas opciones nos ofrecen otras previsualizaciones de la imagen que estamos trabajando:

Y aquí sí, ya entra en juego nuestro "ojo" clínico para ver cual de las 4 imágenes (o 2, en el caso de ir a la solapa 2-Up) se ve mejor. Una vez seleccionada, trabajamos sobre la que hayamos elegido.

Ahora debemos optimizar el peso, y para eso vamos al panel de "Optimize":

En este panel vemos:

1. Menú desplegable en donde podremos seleccionar el más adecuado para nuestro trabajo, siempre atentos a que el peso de nuestra imagen no se incremente. Los más comúnmente usados para web son GIF y JEPG (JPG).
2. La calidad de imagen será un influencia directa sobre el aspecto de la misma, pero también sobre su peso. Por eso, debemos tener mucho cuidado: bajar la calidad de una imagen implica que pese menos, pero hay cierto límite que no debemos sobrepasar, y corresponde al momento en que la imagen empieza a verse realmente mal.
3. Nosotros hemos bajado la calidad de 66 a 60, y el peso bajó de 14,24 Kb a 12,47 Kb, tomando en cuenta que la imagen quedó de un tamaño de 400 x 280 pixels.
   Así y todo queremos que la imagen baje rápido, o por lo menos, que el tiempo que ocupe en bajar no incomode al usuario. Para eso vamos a "partir" la imagen:
4. Nos posicionamos en la solapa de Original. necesitamos que se vean las reglas, así que, si no se ven, vamos a View>Rulers.
5. Haciendo clic en alguna de las reglas, y sin soltar el mouse, nos ubicamos sobre la imagen. Al movernos veremos que salen unas líneas verdes de la regla. Esas líneas verdes son las "guías". Si no las podemos ver, vamos a View>Guides>Show Guides.
6. Trabajando con un Zoom del 100% sacaremos tres guias de la regla lateral y las pondremos respectivamente a la altura de los 100, 200, y 300 pixels. Igualmente de la regla superior sacaremos una guía y la pondremos a la altura de los 140 pixels.
   

Tenemos entonces una imagen dividida en 8 partes, y si el peso total de la imagen es de 12,47 Kb, tenemos que cada una de las partes de esta imagen pesa 1,55875 Kb ... casi nada aún para una mala conexión.
A este respecto cabe aclarar algo: esta reducción del peso de la imagen es más psicológica que real, y está más orientada al usuario.
Llega un momento en que la imagen no puede ser reducida de peso, porque afectaría seriamente su calidad. Lo mismo y con mayor razón, ocurre cuando debemos exponer imágenes con MUY buena calidad en la web: la mayoría de las veces, para conservar esa calidad, debemos conformarnos con bajarles muy poco el peso, y el resultado es una imagen pesada, inevitablemente pesada.
En el caso de nuestra imagen, es obvio que sigue pesando 12,47 Kb, pero para el usuario no es lo mismo quedarse mirando un espacio en blanco hasta que bajen los 12 Kb, que ir viendo de a poco que la imagen va bajando a su monitor.
Es una cuestión psicológica: si el usuario espera demasiado, se termina cansando; si ve los frutos de su espera (aunque sea de a poco), aguardará un poco más hasta ver la imagen entera.

5. Exportación de imágenes:

Ahora debemos tocar lo referente a la exportación de las imágenes, o sea, hacerlas legibles para que puedan ser usadas por los programas de integración con la web.
El formato original de los archivos de Fireworks es ".png", pero para web, suele exportarse como JPG o GIF.

Hay varios mecanismos para exportar las imágenes. Veremos algunos de ellos.

1- Tenemos nuestra imagen dividida en partes, pero para que este "efecto psicológico" y práctico del que hablábamos, sea eficiente, no podemos exportar imagen por imagen.
Así que vamos a ir a la herramienta Export , o bien a File>Export.

2- Nos aparece esta ventana:

Y así es como debemos tener configurado correctamente para exportar esta imagen "partida":

1. El Nombre del archivo (no hace falta que le pongamos la extensión).
2. Tipo: HTML and slices. O sea que luego no la buscaremos como un archivo de imagen (jpg o gif), sino como html o htm.
3. En HTML seleccionamos la operación a realizar. No tenemos que preocuparnos, porque hay sólo dos opciones: la que ves y la que sirve para para copiar al Clipboard. Además, esta opción suele configurarse automáticamente.
4. Slices: Los "slices" son áreas interactivas que podemos armar manualmente (lo veremos más adelante". Cuando exportamos una imagen del modo en que lo hacemos ahora, hay que armar tantos slices como partes en que nos queda dividida la imagen por medio de las guias.
   ¿Se imaginan si la imagen hubiese quedado dividida en 54 partes? ¡¡Tendríamos que hacer a mano 54 Slices!! Pues para que eso no ocurra, Fireworks no da la posibilidad de indicarle que tome las guias como martcadores de división para los slices (Slice along guides).

El resultado de esta exportación lo tomaremos luego desde programas de integración web tales como Dreamweaver, programa del que te recomendamos hacer el correspondiente curso.

Las otras opciones de exportación están referidas a realizarlo como imagen, pero las diferencias son mínimas:

Ya sea GIF o JPG, bastará con que en el ítem "Tipo", le pongamos "Images only".
Nos bastará ahora aprender cómo integrar estas cosas con Dreamweaver, pero esto formará parte de los temas de la próxima entrega.

Les recuerdo que pueden compartir sus dudas, inquietudes y conocimientos en nuestro foro. Allí encontrarán gente que, como Uds. está interesada en estos temas.