Cuando hablamos de formatos de imagen en la web, tenemos que limitarnos a 3, ya que son los únicos soportados por los navegadores de Internet.

Transcripción

1 Imágenes en la web Uno de las principales decisiones a la hora de incluir gráficos en la Web será elegir el formato correcto para cada tipo de imagen de manera que se logre una correcta relación entre la calidad visual de la misma y su peso en Kb. Cuando hablamos de formatos de imagen en la web, tenemos que limitarnos a 3, ya que son los únicos soportados por los navegadores de Internet. Imágenes JPG Formato ideal para las fotos y las ilustraciones complicadas. Contiene millones de colores. La Compresión de la imagen se hace con una pérdida de calidad que va desde 0% a 99%. Recomendable para fotografías e imágenes con degradados de color. Imágenes GIF Muy práctico para los dibujos e imágenes simples, con pocos matices, así como para los logos. Puede tener 256 colores ó menos. Gestiona la transparencia y las animaciones. Recomendable para logotipos, plastas de color y animaciones simples (usar solo animaciones en caso necesario)

2 Imágenes PNG El formato PNG es el gran desconocido de internet, pese a su magnífico comportamiento. Permite transparencias como los GIF y transparencia graduada (colores cuya opacidad van desde el 0% hasta el 100%). Por contra no admiten animaciones. Recomendable para imágenes con transparencia complejas. A continuación se muestra la misma imagen en diferentes formatos para ver como afecta tanto en calidad de la imagen como en peso: GIF con 256 colores. 10 Kb JPG con 20% de compresión. 4 Kb PNG 24 bits. 27 Kb

3 Optimización de imágenes en FIREWOKS Con Macromedia Fireworks podemos configurar la calidad y el formato de nuestras imágenes, esto es optimizarlas para su uso en la web. Abrimos Fireworks, nos saldrá su presentación característica, en seguida le damos a Archivo + Abrir. Buscamos y seleccionamos la imagen a optimizar. Ahora, tenemos nuestra imagen en el panel de FireWorks, necesitamos ver sus características. Arriba de la imagen hay unas pequeñas que son: Original Vista previa 2 copias 4 copias. Le damos click a vista previa.

4 En esta pantalla podemos ver el peso de la imagen que en este caso es de k lo que es demasiado y 32seg. a 56kbps quiere decir que nuestra imagen se visualizara en 12segundos con un modem de 56kb/s. también nos dice que la imagen es de extensión JPG. Vemos el menú de la pestaña optimizar, hay un primer recuadro que esta en blanco, dándole click se despliegan valores predeterminados para tu imagen. Abajo hay otro recuadro, en este caso está en JPEG, ya que es la extensión de la imagen. Mate esta en Blanco lo dejamos así por ahora y enseguida viene Calidad que en la imagen esta en 99, la calidad se refiere a cuan mejor se ve nuestra imagen, el intervalo es de 0 a 100, lo aconsejable es que se le de un valor medio, es decir entre 45 a 55, esto reducirá considerablemente el peso de la imagen, que es lo que buscamos, a mayor calidad, mayor peso.

5 El suavizado viene a ser la nitidez, el 0 es que la imagen se ve lo más nítida posible, y mientras más se suba el suavizado la imagen se pondrá más y más borrosa cada vez, a mayor suavizado, menos peso. Ahora si miramos nuevamente en vista previa el peso de la imagen, veremos que el peso se ha reducido de una manera considerable. Ahora vamos a ver el tamaño de la imagen, para eso volvemos a la pestaña de Original, al costado de vista previa y luego le damos click a la imagen. En la parte inferior, abajo de nuestra imagen, esta una pestaña llamada propiedades donde podemos ver el tamaño actual de nuestra imagen el ancho y el alto.

6 Esto lo podemos cambiar de acuerdo al requerimiento de nuestra imagen. Cambiar de tamaño una imagen En las pestañas de arriba le damos a MODIFICAR + LIENZO + TAMAÑO DE LA IMAGEN, tal como vemos abajo: Saldrá una ventana en la que vemos nuevamente el tamaño de nuestra imagen ancho y alto, lo único que hay que hacer para retocar el tamaño es cambiar el número del ancho ya que el alto se transforma inmediatamente a la medida adecuado para no perder su calidad. Para usar nuestra imagen, debemos exportarla no guardarla ya que si no es así, no se verán los cambios.

7 Ir a ARCHIVO + PRESENTACION PRELIMINAR DE LA IMAGEN, sale esta ventana Nos dice todos los datos finales de nuestra imagen, lo único que hay que hacer es darle click a Exportar y así tendremos nuestra imagen lista para usarla en la Web.