Las imágenes de los sitios web deben ser livianas para que las páginas se abran con mayor rapidez.

Transcripción

1 PARA QUÉ NECESITAMOS OPTIMIZAR LAS IMÁGENES? Las imágenes de los sitios web deben ser livianas para que las páginas se abran con mayor rapidez. Dos cosas sacan usualmente de las casillas a un usuario de Internet y de correo electrónico: esperar demasiado tiempo a que se despliegue una página web y no poder recibir un mensaje de correo con archivos gráficos anexos. En la mayoría de los casos, eso se debe a que las imágenes del sitio web o los archivos adjuntos a un mensaje de correo son demasiado voluminosos. Para reducir el peso de las imágenes en Internet se emplean varios métodos: se convierten a formatos gráficos como GIF o JPEG (que comprimen las imágenes), se reducen sus dimensiones o se disminuye su resolución. Eso genera archivos más pequeños. Una imagen para Internet debe estar en un archivo pequeño (entre 2 y 20 kilobytes es una buena medida) para que lleve menos tiempo cargarla. Para convertirlas en estos formatos se puede emplear programas para editar imágenes como Corel PhotoPraint, Paint Shop Pro, Fireworks y Xara. QUÉ FORMATO DEBEMOS UTILIZAR? JPEG y GIF son los dos formatos gráficos más usados en Internet. Su ventaja es que comprimen las imágenes y por ello generan archivos de menor tamaño. Pero ambos usan métodos distintos, y por ello el formato ideal depende del tipo de imagen que vaya a publicar en Internet. Si va a publicar fotos o imágenes con muchos colores, utilice JPEG. Este formato es más útil en esos casos debido a que comprime las imágenes eliminando información que no es visible para el ojo. Soporta un gran número de colores (16 millones de colores). GIF, en cambio, comprime las imágenes reduciendo el número de colores a un máximo 256. Por ello es útil para gráficos sencillos, logos, botones y otros elementos que tenga pocos colores. Si usa GIF en una imagen rica en color, esta quedará de mala calidad. OPTIMIZAR UNA IMAGEN CON PHOTOSHOP Para guardar la imagen original, abrimos el cuadro Guardar para Web desde el menú Archivo. Se nos ofrecen cuatro vistas dependiendo de la pestaña en la que estemos. 1

2 Desde estas vistas nos decidiremos por la mejor imagen con una mejor relación entre calidad de visualización y tamaño de archivo. La información sobre el tamaño del archivo se nos muestra en la parte baja de cada imagen, tanto en la original como en las optimizadas. Es muy útil la vista de cuatro copias porque podemos comparar, una al lado de otra, las distintas imágenes optimizadas con respecto a la original. Para moverse por cada una de las imágenes solamente tenemos que seleccionar con el ratón y se resaltará con un borde negro. Con la Herramienta Mano para compararlas mejor. Con la Herramienta Zoom también con el menú emergente del botón derecho. podemos mover todas las imágenes a la vez podemos acercarnos y Para ver la imagen completa elegimos la opción de Encajar en pantalla. Optimizar con JPEG Para comprimir la imagen como un archivo JPEG, seleccionamos la imagen y elegimos este formato en la zona de los ajustes Para especificar la calidad de la imagen, realice una de las acciones siguientes: 2

3 Seleccione una opción del menú Calidad (alta, media o baja) Arrastre el regulador emergente Calidad. Introduzca un valor en el cuadro de texto Calidad Cuanto más alto defina el ajuste de Calidad, más detalle preservará el algoritmo de compresión. Sin embargo, el uso de un ajuste de Calidad alto produce un tamaño de archivo mayor que el uso de un ajuste de Calidad bajo. Optimizar con GIF Para comprimir la imagen como un archivo GIF, seleccionamos la imagen y elegimos este formato en la zona de los ajustes Mientras que con el formato JPEG, la clave está en la calidad, en el formato GIF está en los colores. Reduciendo en número de colores podremos bajar el tamaño a los archivos. Con el regulador de Pérdida podemos ajustar los datos que se descartan a la hora de comprimir. Con un valor entre 5 y 10, la imagen no llega a degradarse. Optimizar a tamaño de archivo Es posible optimizar una imagen en un tamaño de archivo aproximado. Esta función permite alcanzar rápidamente un tamaño de archivo deseado sin tener que probar diferentes ajustes de optimización. En el cuadro de dialogo indicamos el tamaño de archivo que queramos y elegimos el sector en caso de tener sectorizada la imagen. 3

4 CAMBIAR DE TAMAÑO LAS IMÁGENES Podemos redimensionar el tamaño durante la optimización, especificando la anchura y altura en píxeles que va a tener la imagen en nuestra página. También es posible redimensionar una imagen seleccionando Imagen > Tamaño de imagen. Para mantener las proporciones marcar Restringir proporciones. La Calidad aconsejada es la Redondeada (bicúbica). LOS SECTORES PARA OPTIMIZAR Las imágenes muy grandes se pueden dividir en sectores y darle una optimización diferente o simplemente trocear la imagen para que se cargue más rápido. Crear sectores Primero tenemos que establecer los sectores con la Herramienta Sector, pero es muy difícil hacerlos iguales. 4

5 Con ayuda de la Regla, Vista > Mostrar reglas, podemos hacer guías. Una vez que veamos la regla sobre nuestra imagen. Arrastramos el ratón y lo soltamos donde queramos la guía. Así vamos parcelando a nuestro gusto. Se borran en Vista > Borrar guías. Ahora podemos hacer dos cosas. En Vista > Ajustar a > Guías y con la Herramienta Sector, podemos ir estableciendo los sectores. Para borrarlos Vista > Borrar sectores. Pero lo más fácil es, una vez creadas las guías abrir el menú Sectores > Crear sectores a partir de guías. ImageReady y en Guardar una imagen sectorizada Cuando guardemos la imagen optimizada se nos dará la posibilidad de guardarla como HTML e imágenes. Esto significa que vamos a tener una carpeta llamada Imágenes, con todos los sectores, y una página web donde está la imagen completa. Si vamos al código fuente veremos la tabla que contiene todos estos trozos de imagen. Para 5

6 utilizarla en la Web solamente tenemos que copiar la parte de código correspondiente a la tabla y pegarlo en la vista código de nuestro Dreamweaver. Comentar que PhotoShop nombra a la carpeta como Imágenes con tilde y esto puede crear problemas. La solución es quitarle la tilde. Optimizar solamente un sector Para el caso de que nos interese optimizar exclusivamente un sector de nuestra imagen, primero, tenemos que especificar esa parte de la imagen con la Herramienta sector nada más abrirla. Al Archivo > Guardar para Web seleccionamos ese sector con la Herramienta Seleccionar sector y especificamos las características de optimización solamente de esa zona. 6

7 UTILIDADES CON PHOTOSHOP Vamos a comentar a continuación algunas cosas que podemos hacer con PhotoShop. Son operaciones de edición de imágenes que nos pueden ser de interés antes de incorporar la imagen a nuestro sitio de Dreamweaver en la carpeta Imágenes. Las posibilidades de edición que nos ofrece este programa son múltiples. Estas hojas recogen una mínima parte de lo que se puede hacer. Recortar la imagen En el caso de que quieras recortar para componer de nuevo la imagen, lo puedes hacer con la Herramienta recortar. Haciendo clic en la imagen y arrastrando el ratón, dibujamos el contorno en forma de rectángulo de la parte que queremos conservar. Para guardarla volvemos a hacer clic en el botón recortar cuadro de dialogo y nos aparece el Definir un calado Un efecto interesante es el de difuminar los bordes. Para ello debe seleccionar la zona que quiere que no sea borde con la Herramienta de selección. Luego vamos a Selección > Invertir A continuación Selección > Calar y especificamos el número de píxeles, cuanto mayor sea el número más difuminados aparecerán los bordes. Finalmente le damos a la tecla Suprimir o Delete. 7

8 El resultado sería algo parecido al efecto romántico logrado con esta foto antigua. Dibujar un botón Trabajar con capas es algo bastante complejo pero vamos a explicar la forma de hacer una imagen de un Botón para los menús de navegación de nuestras páginas. Si luego le cambiamos el color del fondo o del texto y los insertamos como imagen rollover, podemos conseguir unos efectos muy interesantes. En este caso no tenemos que Abrir una imagen sino que la vamos a crear nosotros un Archivo > Nuevo. Le damos un Nombre, especificamos el tamaño y elegimos entre el Fondo blanco, transparente o el color de fondo. Es importante que estemos en Color RGB. 8

9 Con la Herramienta de rectángulo cuadrado que va a ser nuestro Botón. dibujamos, arrastrando el ratón, el También podemos elegir entre otras formas. Antes de dibujar seleccionamos en el Selector de color de qué color queremos el fondo. Al especificar ahora la forma del Botón, nos aparece en el color que hemos elegido. Nos vamos al Panel de Capas y hacemos clic en Añadir estilo de capa y elegimos Bisel y relieve del menú emergente. Este estilo en concreto da aspecto de pulsador pero hay otros estilos interesantes. Es cuestión de probar. Para añadir texto con la Herramienta texto, seleccionamos la zona donde irán las letras. Es importante que antes especifiquemos el color del texto y las características de la fuente. Cuando lo guardemos para la web, está claro, que el formato a elegir sería GIF ya que no tendremos mucha variedad de colores. 9