Optimizar imágenes para web con Fireworks

13
Imágenes

description

Utilizando el programa Fireworks, vamos a optimizar imágenes para bajar peso y calidad.

Transcript of Optimizar imágenes para web con Fireworks

Page 1: Optimizar imágenes para web con Fireworks

Imágenes

Page 2: Optimizar imágenes para web con Fireworks

Introducción Para trabajar con imágenes para Web debemos considerar el

peso y la definición. Es importante tomar en cuenta que las medidas a utilizar son píxeles, ya que es la unidad de los monitores. No podemos traspasar de centímetros a píxeles ya que dependerá de la resolución del monitor y esto varía dependiendo de la configuración de cada usuario.

Habitualmente se utilizan un ancho de 960 píxeles para el diseño de una página Web pero no es una regla.

Las imágenes deben usarse del tamaño que necesitamos en la página Web. No se recomienda usar imágenes grandes para luego ajustar el tamaño ya que estas quedan pesadas.

Siempre se recomienda procesar primero las imágenes antes de subirlas a nuestro sitio. Podemos utilizar un editor de imágenes como Photoshop, Fireworks o el que sea de su conveniencia.

Page 3: Optimizar imágenes para web con Fireworks

Formatos de imagen: Gif

Gif:- Este formato trabaja con una máximo de 256 colores. Es recomendable usar gif cuando tenemos una imagen con colores sólidos como textos y logotipos o ilustraciones sin degradados.

Page 4: Optimizar imágenes para web con Fireworks

Abrimos esta imagen con FireworksLuego vamos a Archivo / Presentación preliminar de la exportaciónSe abre la siguiente ventana:

Page 5: Optimizar imágenes para web con Fireworks

En formato seleccionamos gif como formato y vemos el peso que va a tener el documento con una resolución de 128 colores.Si nuestra imagen tiene solamente 3 colores, 128 es mucho, así que selecciono 8 colores y así mi imagen será mas liviana y mantendrá una buena calidad.

Como regla, si una imagen tiene 2 colores seleccionar 4 en la exportación. Si tiene 5 colocar 16. Siempre la opción superior que sea el doble o más del doble. Esto permite tener una imagen liviana y clara en los archivos gif.

Page 6: Optimizar imágenes para web con Fireworks

En la opción Archivo podemos cambiar el tamaño de nuestra imagen según nuestra necesidadPara mantener la proporción tanto en ancho como en alto debe estar seleccionado el cuadro de Restringir.

Una vez que estemos de acuerdo con el peso del documento, el tamaño y su resolución, podemos proceder a exportar. Dentro de nuestro sitio creamos una carpeta de nombre imágenes (no utilizar tildes) y guardamos el documento con un nombre corto, claro y sin tildes ni espacios. En nuestro ejemplo podemos llamarlo logo.gif

Page 7: Optimizar imágenes para web con Fireworks

En Dreamweaver, en la ventana Files, donde tenemos configurado nuestro sitio se verá así:

En Dreamweaver

Page 8: Optimizar imágenes para web con Fireworks

Formatos de imagen: Jpg Las imágenes jpg son muy útiles para trabajar con fotografías o imágenes

con degradados. Trabaja muy bien con sombras y cambios de tonalidad.

Page 9: Optimizar imágenes para web con Fireworks

Esta imagen debemos seleccionar jpg y la calidad podemos disminuirla hasta 60 y no notaremos que se písela, manteniendo un buen peso y calidad.En la pestaña archivo se ha seleccionado un tamaño de 250 pixeles de ancho.Posteriormente exportamos y guardamos en la carpeta imagenes de nuestro sitio.

Page 10: Optimizar imágenes para web con Fireworks

Insertar una imagen

Para insertar una imagen, abrimos nuestro documento index.html y arrastramos la imagen desde la ventana Files sobre el área de diseño de nuestro documento.

Page 11: Optimizar imágenes para web con Fireworks

Aparecerá la siguiente ventana:

Donde dice Alternate text debemos poner un texto que describa la foto, por ejemplo; Cielo. Este texto es importante al momento de validar nuestro html en la página w3.org.

Page 12: Optimizar imágenes para web con Fireworks

Etiqueta imgUna vez insertada la imagen podemos ver que el código es el siguiente:<img src="imagenes/cielo.jpg" alt="Cielo" width="250" height="188" /> La etiqueta <img /> es una etiqueta vacía ya que solamente tiene una

parte. Abre y sierra al mismo tiempo. Fíjense como mantiene el cerrado luego de sus parámetros.

 Los parámetros de una imagen principalmente son cuatro:src=”” es la instrucción que llama a la imagen. Si tenemos configurado el

sitio llamará desde el directorio raiz donde se encuentra el archivo HTML. Entre comillas se escribe la ruta. En nuestro ejemplo entra en la carpeta imágenes y encuentra nuestro documento: imágenes/cielo.jpg

 alt=”” es el texto alternativo. Si por alguna razón la ruta del llamado a la

imagen se encuentra roto y no se muetra la imagen correctamente, aparecerá el texto que describe a la imagen.

 width="" y height="" determina el ancho y la altura en pixeles.

Page 13: Optimizar imágenes para web con Fireworks

ConclusiónDreamweaver, así como otros editores HTML

coloca colores a las etiquetas y sus parámetros para una mejor lectura.

En nuestro ejemplo las etiquetas y los parámetros son violetas, las comillas y su contenido es azul

 El formato PNG es ahora muy común en el diseño

de sitios Web, pero al ser de un peso superior y sus usos son diversos, veremos este tema cuando trabajemos con CSS.