Esta tarea consiste en lograr que las imágenes que se usarán en las páginas sean lo mas livianas y con la mejor calidad posible. A  medida que hacemos más livianas las imágenes, éstas bajan de calidad. Optimizar es entonces un equilibrio entre peso y calidad.
Los dos formatos más comunes para Web son Gif y Jpg. La primera decisión que tenemos que tomar es saber cual de estos formatos es el mas conveniente para nustra imagen:

Características de los formatos:

JPG:

• Formato de compresión que soporta millones de colores (24 bits por píxel).

• Reproduce con fidelidad las imágenes que tienen texturas.

• Es el más indicado para fotografías.

• Representa mal los colores planos.

GIF:

• Formato de hasta 8 bits por píxel. Soporta la paleta de colores Web que tiene 216 colores. Define gráficos con menos colores (4, 8, 16, 32, 64 y 128 colores) logrando así menor peso.

• Es el más indicado para colores planos.

• Representa mal las imágenes fotográficas.

La ventana con la que se realiza esta tarea de optimización es la que se despliega cuando seleccionamos la opción File / Save for Web (Archivo / Guardar para Web).
Las solapas que tiene la ventana nos permite elegir entre varias opciones de visualización.

Podemos elegir entre ver el original (original) o la copia optimizada (Optimized). En 2 Up (2 copias) vemos la imagen original y la optimizada, con el fin de comparar ambas para ver cuanta calidad se pierde en la tarea de optimización.
En 4 Up (cuatro copias) se ven el original y tres versiones diferentes de visualización. Esta es la mejor opción, ya que nos permite comparar entre diferentes formatos y parámetros de optimización.

Parámetros del archivo Gif:

• Colors (colores): Sin duda es la decisión mas importante a tomar cuando exportamos en formato Gif es la cantidad de colores que tendrá el documento. Obviamente cuanto mas colores definamos mejor se va a ver el archivo, pero mas pesado va a ser.

• Lossy (menos calidad): Este control deslizante disminuye la calidad del dibujo, con una consecuente baja en el peso del documento. En este apartado se elige la paleta que se usará en el documento. La que mas conviene usar cuando necesitamos gráficos para Web es por supuesto la paleta Web.

• Dither (dispersión): Estas opciones definen la forma en la que se van a fundir los colores. La dispersión (Dither) de los píxeles permite dar mas naturalidad a las imágenes Gif.

• Color Table: Esta paleta presenta en su parte inferior el número de colores con los que está compuesta. Y cuatro íconos: El primer icono, que tiene forma de cubo, tiene la función de buscar el color de la paleta web más cercano al color seleccionado. Los colores de la paleta web están señalados en la Tabla de color con un punto blanco en el centro. El segundo icono, en forma de candado, permite “fijar” los colores seleccionados. Para optimizar una imagen como Gif, primero se elige una cantidad de colores alta, la cual iremos progresivamente reduciendo. Cuando bajamos la cantidad de colores, el programa decide eliminar los colores que están menos usados y reemplazarlos por otros. Esta función nos permite conservar determinados colores. Los dos iconos siguientes nos permiten crear y eliminar los colores seleccionados.

• Transparencia en los archivos Gif: Una de as mas atractivas características de los archivos Gif es la posibilidad de asignarle partes transparentes a la imagen. Las imágenes formadas por píxeles tienen una forma rectangular de la cual no es fácil salir. En la ventana de optimización encontramos la opción Transparency. Es necesario tenerla seleccionada para conseguir que el gif que exportemos tenga zonas transparentes

Parámetros del archivo JPG:

Si el formato que elegimos para exportar las imágenes es Jpg, las opciones que nos presenta la ventana son:

• El casillero de Optimized (Optimizado) permite archivos mas livianos y de un poco mas de calidad. Ya hemos visto que el formato JPG  reduce mucho el tamaño de las imágenes, pero lo hace a expensas de la calidad, eso quiere decir que cuanto mas bajo es el peso del archivo, menor calidad tendrá el mismo.

• En la ventana de optimización Jpg tenemos para elegir entre 4 calidades de compresión: Low (Baja), Médium (Media), High (Alta) y Maximum (Máxima) correspondiendo a las calidades (Quality) de 10, 30, 60 y 80% respectivamente. En el casillero lateral (Calidad) podemos ingresar valores intermedios.

• Seleccionando Progressive (Progresivo) se crea una versión de muy baja resolución que se muestra rápidamente al empezar a cargar la página web. Ésta versión de baja calidad se va reemplazando progresivamente por la imagen definitiva.

• El formato Jpg degrada la calidad de las imágenes creando una serie de aberraciones en los bordes de las figuras. Aplicando la opción Blur (Desenfoque) a la imagen, estas “marcas” serán menos visibles.

Clic aquí para descargar tu Certificado!