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

1. Imágenes

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

4. 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.

6. Abrimos esta imagen con Fireworks Luego vamos a Archivo / Presentación preliminar de la exportación Se abre la siguiente ventana:

7. 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.

8. En la opción Archivo podemos cambiar el tamaño de nuestra imagen según nuestra necesidad Para 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

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

11. 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.

12. 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.

13. Etiqueta img Una vez insertada la imagen podemos ver que el código es el siguiente: <imgsrc="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.

14. Conclusión Dreamweaver, 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.