Computación Gráfica. Optimización de Imágenes para su uso en Internet

Transcripción

1 Computación Gráfica Optimización de Imágenes para su uso en Internet Material de Lectura y análisis para debate Consigna: Los alumnos deben leer este material par ir analizándolo y opinando a medida que se desarrollan las clases en el laboratorio. Las imágenes de los sitios web deben ser 'livianas' para que las páginas se abran con mayor rapidez. Les mostramos cómo optimizarlas con el programa Corel PhotoPaint para publicarlas en la Red o para enviarlas por correo electrónico. Dos cosas usualmente sacan de 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 tamaño de las imágenes en Internet se emplean varios métodos: se convierten a formatos gráficos como GIF y JPEG (que comprimen las imágenes), se reducen sus dimensiones y 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 tome menos tiempo cargarla. El inconveniente con los archivos anexos a un mensaje es que las cuentas gratuitas o los servidores de correo electrónico de las empresas ponen límites al tamaño de los archivos. Es por eso que a veces los mensajes no llegan a su destino o jamás abandonan el servidor de correo del remitente. Si le da un vistazo a los sitios web más conocidos, verá que estos casi siempre incluyen imágenes que ofrecen buena calidad pero que tienen un tamaño pequeño. Por ejemplo, la foto de apertura del sitio web de The New York Times ( normalmente tiene unas dimensiones de 280 por 170 píxeles y 'pesa' tan solo 10 kilobytes (el tamaño del archivo). Dichas especificaciones deberían ser suficientes para que una imagen sea clara y ofrezca buena calidad. JPEG o GIF? 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.

2 Si va a publicar fotos o imágenes con muchos colores, utilice JPEG. Este formato es el más útil en esos casos debido a que comprime las imágenes eliminando información que no es visible para el ojo, pero 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 máximo 256. Por ello, es útil para gráficos sencillos, logos, botones y otros elementos que tengan pocos colores. Si se usa GIF en una imagen rica en color, esta quedará de mala calidad. Para optimizar las imágenes y convertirlas a estos formatos puede emplear programas como Corel PhotoPaint, Adobe Photoshop, Paint Shop Pro, etc. Nosotros escogimos Corel PhotoPaint versión 9, que viene incluido en CorelDraw. Sin embargo, los pasos son similares en otras aplicaciones gráficas. A continuación mostraremos cómo reducir el tamaño de un archivo gráfico sin que se note mucho el deterioro en la calidad de la imagen resultante (el artículo central de la edición 55 de ENTER, de marzo del 2003, contiene bastante información sobre resolución, dimensiones de una imagen y otros aspectos teóricos importantes sobre las imágenes digitales). Cómo optimizar una imagen con JPEG Para nuestro ejemplo utilizaremos una foto que ya está en formato JPEG y tiene unas dimensiones de por píxeles, un tamaño de 17,4 megabytes (MB) y 16,7 millones de colores. La idea es convertirla en una de 250 píxeles de ancho (más pequeña) cuyo tamaño de archivo no exceda los 20 kilobytes (KB). 1. Para abrir una imagen en PhotoPaint, dé clic en el botón Abrir de la barra de herramientas (el que muestra una carpeta) o dé clic en la opción Abrir del menú Archivo. 2. Dé clic en el menú Imagen y seleccione Nuevo muestreo. El cuadro que se abre le permitirá reducir el tamaño de la foto. 3. Escoja la opción Píxeles en el menú desplegable de la derecha. Es posible seleccionar otras alternativas (como centímetros, picas o milímetros), pero los píxeles son la medida que se utiliza para trabajar con imágenes en las páginas web. Además, verifique que esté marcada la opción Mantener proporción (para que los cambios que realice mantengan siempre la proporción horizontal y vertical de la imagen). 4. Sin cambiar de ventana, vaya a la opción Resolución y reduzca el valor a 72 píxeles por pulgada; esa es la resolución que se necesita para ver imágenes en la pantalla del computador, y por ello es la que se usa para las imágenes en Internet (para medios impresos, en cambio, la resolución necesaria es 300 píxeles por pulgada). Note que con solo variar la resolución, los valores Anchura y Altura cambiaron a 888 y 635 píxeles respectivamente y el tamaño del archivo bajó de 17, megabytes (MB) a aproximadamente 2,2 MB. Si ese tamaño le sirve para publicar la imagen en su página web, dé clic en Aceptar (un tamaño de 2,2 MB es impensable para una imagen incrustada en un sitio web por ser demasiado grande). 5. Si necesita que la imagen quede más grande o más pequeña, aumente o disminuya las dimensiones en píxeles en los cuadros Anchura o Altura. Por ejemplo, nosotros

3 disminuimos la Altura a 179 píxeles. Eso redujo el tamaño del archivo a 179 kilobytes (KB), que es la quinta parte de 1 MB. Cuando termine, dé clic en Aceptar. 6. Para guardar la imagen vaya a Archivo y dé clic en Exportar (el atajo de teclado es Ctrl+E). Escriba un nombre para el nuevo archivo en la ventana recién desplegada y dé clic en el botón Guardar. Tenga en cuenta el formato en que va a guardar la imagen, que en este caso será JPEG. 7. Ahora se desplegará una ventana con dos imágenes, la de la izquierda corresponde a la original y la de la derecha a cómo va a quedar después de efectuar los cambios. Desmarque la casilla Optimizar y escoja la opción Estándar (4:2:2) del cuadro Subformato para ayudar a comprimir el tamaño del archivo (el Dr. Enter de la edición 55 explica para qué sirven todas las opciones de esta ventana). 8. En la opción Compresión, desplace el selector hacia la derecha para comprimir la imagen. Compare las imágenes y verá que si la comprime demasiado, la pérdida de calidad será muy notoria. Escoja un valor que no afecte demasiado la calidad. La opción Tamaño le indicará la dimensión del archivo, si primero da clic en el botón Previsualización. Note que la imagen pasó de bytes (34 KB, aproximadamente) a bytes (7 KB), con una compresión del 55 por ciento. Finalmente, dé clic en Aceptar. ADVERTENCIA: Cada vez que se edita y se guarda un archivo JPEG se reduce la calidad de la imagen. Por ello, la idea es que trabaje con una copia del archivo y guarde el original en caso de que necesite usarlo en el futuro. Cómo optimizar una imagen con GIF Recordemos que cuando un archivo de imagen se convierte a formato GIF este se comprime y pierde color. Por eso, este formato no es aconsejable para trabajar fotos e imágenes con muchos colores, ya que máximo soporta 256. Para el ejemplo, trabajaremos con una imagen en mapa de bits o bitmap (.bmp) de 1,37 MB y 800 por 600 píxeles. Aunque es una foto de millones de colores, los más representativos son los grises, el negro y el blanco, así que la calidad de la imagen final en formato GIF tendrá una apariencia aceptable. El objetivo es que la imagen quede lista para publicar en Internet, con un tamaño no mayor a 20 KB y un ancho de 300 píxeles (por ejemplo, el ancho de la columna central de la página de inicio de Eltiempo.com es de 450 píxeles). 1. Para empezar, abra la imagen y siga los pasos para realizar un nuevo muestreo, tal y como se explica en el tutorial Cómo optimizar una imagen con JPEG. En el proceso Nuevo muestreo le dimos a nuestra imagen un ancho de 300 píxeles a 72 dpi. Eso de por sí reduce el tamaño del archivo resultante. 2. Exporte la imagen (Ctrl.+E). En la ventana Exportar una imagen en el disco, ponga un nombre al nuevo archivo y asegúrese de marcar la opción GIF Mapa de bits CompuServe, en el menú desplegable Tipo de archivo. Dé clic en Guardar.

4 3. La ventana que se abre a continuación permite imprimir efectos diferentes a la imagen. Como no todas las imágenes tienen el mismo número de colores, la idea es que pruebe las diferentes opciones de los cuadros de diálogo (por ejemplo, hay imágenes que se ven mejor con 16 colores y no con 256) como Suavizado, Paleta, Tramado e Intensidad de tramado. Las combinaciones de esas opciones darán resultados diferentes. Cuando esté satisfecho con el resultado que se muestra en la ventana de la derecha dé clic en Aceptar. 4. La ventana Exportar GIF que se abre a continuación le mostrará el cuadro Transparencia con dos opciones: Ninguna, que es la opción predeterminada y Color de imagen, que sirve para definir qué colores desea que se transparenten una vez la imagen sea publicada en Internet. Dé clic en Aceptar cuando se haya decidido por una opción. Funciones de la ventana Convertir imagen con paleta La ventana Convertir imagen con paleta del programa Corel PhotoPaint se despliega cuando se exporta (o se quiere guardar) una imagen en formato GIF. Estas son las funciones básicas de cada opción, aunque este es un proceso de prueba y error, que se verifica de inmediato mediante las ventanas que muestran la imagen original a la izquierda y la resultante a la derecha. Si desea más información sobre las funciones no mencionadas aquí, vaya a la Ayuda del programa. Paleta: Uniforme: da un rango de 256 colores con partes iguales de rojo, verde y azul. Estándar VGA: proporciona la paleta VGA estándar de 16 colores. Adaptativa: proporciona colores nuevos a la imagen y conserva los colores originales (el espectro de color completo) Optimizada: crea una paleta basada en el mayor porcentaje de colores de la imagen. También puede seleccionar un color con sensibilidad del rango para la paleta, que consiste en el elegir un color para que predomine en la imagen. Cuerpo negro: contiene colores basados en la temperatura, por ejemplo, negro (frío), rojo, naranja, amarillo y blanco (cálido). Escala de grises: proporciona 256 tonos de gris, entre el negro (valor 0) y el blanco (valor 255). Sistema: brinda la paleta de colores predefinida de Windows. Microsoft Internet Explorer: ofrece los colores predefinidos de Microsoft Internet Explorer. Netscape Navigator: presenta los colores predefinidos de Netscape Navigator. Personalizada: permite añadir colores para crear una paleta personalizada. Tramado. Ninguno: es la opción predeterminada y desactiva el tramado.

5 Ordenado: aproxima las mezclas de color con patrones de puntos fijos. Las imágenes tienden a presentar parches de color. Jarvis, Stucki y Floyd-Steinberg: son formas distintas de mezclar los colores, que funcionan de manera similar a la opción Ordenado. Suavizado: sirve para evitar que se vean cambios de color demasiado bruscos en la imagen. Si el selector se desplaza hacia la derecha se minimiza la transición entre colores. Colores: es posible aumentar o disminuir el número de colores, con un límite de 256. A veces una imagen se ve mejor con pocos colores que con muchos. Cómo agregar sombra a una imagen Si desea poner sombra a la imagen que va a publicar, con el fin de resaltarla sobre el blanco del fondo, necesita una foto o un dibujo cuadrado o rectangular. Para el ejemplo utilizaremos la imagen de 246 por 184 píxeles empleada en el tutorial y el programa Corel PhotoPaint Abra la imagen ya procesada. 2. Seleccione la herramienta Recortar, ubique el puntero en una de las esquinas de la imagen y arrastre hasta la esquina diagonalmente opuesta. 3. Recorte la imagen dando clic en la opción Cortar del menú Edición (atajo de teclado: Ctrl+X). 4. Abra un archivo nuevo en blanco (Archivo+Nuevo o Ctrl.+N) y pegue la imagen Como nuevo objeto (Ctrl.+V). 5. En la barra de la izquierda, seleccione la herramienta Sombra de Objeto. Ubique el puntero en el centro de la imagen y dé clic sin soltar (la imagen debe permanecer seleccionada, o tal y como la pegó). Arrastre levemente hacia una de las esquinas y suelte. Verá que se creó una sombra en dos de los cuatro lados del polígono. 6. Seleccione la imagen con la Herramienta selector de objetos y vaya a Objeto, Combinar, y dé clic en la opción Combinar todos los objetos con el fondo. 7. En la barra de herramientas de la izquierda, dé clic en la herramienta Máscara varita mágica y dé clic sobre el documento pero fuera de la imagen para señalarla, con todo y sombra. 8. Dé clic en la opción Invertir, del menú Máscara, y luego recorte la imagen (Ctrl.+X). 9. Vaya al menú Archivo y dé clic en la opción Nuevo desde el portapapeles para que la imagen recién recortada quede sola. Finalmente, expórtela como se explica en el proceso anterior.