Optimizar imágenes para web con Fireworks
Descargar como PPTX, PDF0 recomendaciones6,550 vistas
Este documento explica cómo trabajar con imágenes para sitios web, incluyendo formatos como GIF y JPG. Recomienda procesar las imágenes antes de subirlas al sitio para reducir su tamaño y peso. Explica cómo insertar imágenes en HTML usando la etiqueta <img> y sus parámetros como src, alt, width y height.
Optimizar imágenes para web con Fireworks
- 1. Imágenes
- 2. IntroducciónPara 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.
- 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.
- 5. 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.Formatos de imagen: GifGif:- 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.
- 6. Abrimos esta imagen con FireworksLuego vamos a Archivo / Presentación preliminar de la exportaciónSe 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 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
- 9. En DreamweaverEn Dreamweaver, en la ventana Files, donde tenemos configurado nuestro sitio se verá así:
- 10. Formatos de imagen: JpgLas 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. 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.
- 11. Insertar una imagenPara 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 imgUna 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ó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.