RSS : Articles / Comments


optimizar archivos con fireworks

miércoles, marzo 31, 2010, Posted by Xabier Pérez, No Comment

Al optimizar imágenes reducimos el tamaño de los archivos disminuyendo el tiempo necesario para su descarga desde cualquier ordenador. Entre en este post y descubre las posibilidades de optimización web que nos ofrece Adobe Fireworks.


El objetivo final del diseño de gráficos Web es la creación de bellas imágenes que se descarguen lo más rápidamente posible. Para ello, es necesario seleccionar un formato de archivo con la mejor compresión para la imagen y mantener la mayor calidad posible. Este equilibrio es la optimización, es decir, buscar la proporción correcta de color, compresión y calidad. A la hora de elegir el formato adecuado obedeceremos siempre a unas directrices generales (para más información sobre este tema visitar el post formatos de archivo para la web).
  • JPEG: para imágenes fotográficas, el formato JPEG ofrece un color realista (24 bits) y nos permite controlar la calidad y compresión necesaria del archivo. Cabe recordar que a mayor calidad menor compresión y viceversa. El formato JPEG suele utilizarse cuando las composiciones incluyen degradados y sombras.
  • GIF: para imágenes con colores sólidos como logotipos o imágenes basadas en textos. Unas de sus principales ventajas es que este formato admite transparencias y animaciones sencillas. Los GIF están limitados a 256 colores (8 bits).
  • PNG: el formato PNG intenta ser un compendio de los dos formatos anteriores, ya que por un lado nos ofrece el colore de las fotografías realistas de 24 bits y además nos ofrece la posibilidad de utilizar canales alfa de transparencia.
A la hora de optimizar archivos con Adobe Fireworks abriremos el panel Optimizar por medio de Ventana>Optimizar. Desde ahí podremos elegir el formato de archivo que mejor nos convenga para nuestra imagen web. Pero ¿y si tenemos nuestras dudas sobre cual será nuestra mejor opción de optimización?. Pues para ello Adobe Fireworks incluye los menús de Vistas previas que se incluyen en la parte superior de la ventana del documento. Tendremos ahí cuatro opciones de vista: Original, Vista previa, 2 copias y 4 copias.

Una buena opción a la hora de elegir las opciones de optimización entre los diferentes formatos de archivo será elegir la opción de 4 copias para obtener 4 visualizaciones de nuestra imagen diferente y a cada una otorgarle un formato de archivo diferente. Veamos como hacerlo:

Con nuestra imagen ya abierta en Adobe Fireworks hacemos clic en 4 copias. Después dejaremos el primer recuadro (superior izquierda) como la Versión original (para tener siempre una referencia de nustro archivo sin nigún tipo de compresión) y haremos clic en el recuadro 2 y en el panel Optimizar seleccionaremos el formato de archivo GIF.

Seleccionaremos después el recuadro 3 haciendo clic en él con la herramienta Selección y en el panel Optimizar seleccionaremos JPEG. Por último seleccionaremos el recuadro 4 y en el panel optimizar buscaremos el formato de archivo PNG. 


Con esto tendremos una previsualización de la Versión original del archivo y como quedará el mismo si lo guardamos en formato GIF, JPEG y PNG. Asimismo Adobe Fireworks nos ofrecerá información detallada en la parte inferior de cada recuadro del formato elegido (por ejemplo GIF), el peso del archivo en ese formato (35,2 K) y el tiempo necesario para su descarga según la conexión (5 segundos a 56 kbps).


De esta forma podremos calcular de manera fácil la relación entre la calidad del archivo, el peso y el tiempo de descarga. Una vez seleccionado el formato de archivo (JPEG, GIF o PNG) podremos volver a realizar la visualización de 4 copias ajustando los controles con diferentes ajustes de compresión en el mismo format. Para realizar los ajustes pertinentes utilizaremos siempre el panel optimizar "jugando" con sus controles hasta conseguir la optimización que más se ajuste a nuestras intenciones.



No Comment