Opciones de optimización para Imágenes y archivos GIF animados

Los formatos de gráficos Web pueden ser de mapa de bits (raster) o de vectores. Los formatos de mapa de bits (GIF, JPEG y PNG) dependen de la resolución, lo que significa que las dimensiones de las imágenes de mapa de bits, y posiblemente la calidad de la imagen, variarán en diferentes resoluciones de pantalla. Los formatos de vectores (SVG y SWF) no dependen de la resolución y pueden someterse a escalado sin pérdida de calidad en las imágenes. Los formatos de vectores también pueden incluir datos raster. 

Opciones de optimización de JPEG

JPEG es el formato estándar para comprimir imágenes de tono continuo como las fotografías. La optimización de una imagen con formato JPEG depende de la compresión con menos calidad, que desecha datos de forma selectiva.

Determina el nivel de compresión. Cuanto mayor sea el valor Calidad, más detalles conservará el algoritmo de compresión. Sin embargo, el uso de un valor de calidad alta produce un tamaño de archivo mayor que el uso de un valor de calidad baja. Vea la imagen optimizada con varios ajustes de calidad para determinar el mejor equilibrio entre calidad y tamaño de archivo.

Crea un JPEG mejorado con un tamaño de archivo ligeramente más pequeño. Se recomienda el formato de JPEG optimizado para conseguir la máxima compresión de archivos; sin embargo, algunos navegadores más antiguos no admiten esta función.

Muestra la imagen progresivamente en un navegador web. La imagen aparece como una serie de superposiciones, lo que permite a los usuarios ver una versión de baja resolución de la imagen antes de que se descargue por completo. La opción Progresivo requiere el uso del formato JPEG optimizado.

 Los archivos JPEG progresivos requieren más RAM para poder verlos y no son compatibles con todos los navegadores.

Especifica la cantidad de desenfoque que se va a aplicar a la imagen. Esta opción aplica un efecto idéntico al de un filtro de desenfoque gaussiano y permite una mayor compresión del archivo, con lo que se obtiene un tamaño de archivo menor. Se recomienda un ajuste del 0,1 al 0,5.

Conserva los perfiles de color en el archivo optimizado. Algunos navegadores utilizan perfiles de color para la corrección de color.

Especifique un color de relleno para los píxeles que eran transparentes en la imagen original. Haga clic en la muestra de color Mate para seleccionar un color en el selector de color o seleccione una opción en el menú Mate: Color de cuentagotas (para utilizar el color del cuadro de muestra del cuentagotas), Color frontal, Color de fondo, Blanco, Negro u Otro (para utilizar el selector de color).

Los píxeles que eran completamente transparentes en la imagen original se rellenan con el color seleccionado, mientras que los píxeles que eran parcialmente transparentes en la imagen original se fusionan con el color seleccionado.

Opciones de optimización GIF y PNG-8

GIF es el formato estándar para comprimir imágenes con color plano y detalles nítidos, como ilustraciones lineales, logotipos o ilustraciones con texto. Al igual que el formato GIF, el formato PNG-8 comprime eficazmente áreas sólidas de color a la vez que conserva detalles nítidos.

Los archivos PNG-8 y GIF admiten color de 8 bits, por lo que pueden mostrar hasta 256 colores. El proceso de determinar qué colores se usan se llama indexación, por lo que las imágenes en formato GIF y PNG-8 a veces se llaman imágenes de color indexado. Para convertir una imagen a color indexado, se crea una tabla de consulta de colores para almacenar e indexar los colores de la imagen. Si un color de la imagen original no aparece en la tabla de consulta de colores, la aplicación selecciona el color más cercano de la tabla o simula el color utilizando una combinación de colores disponibles.

Además de las siguientes opciones, también puede ajustar el número de colores en la tabla de colores de la imagen.

Reduce el tamaño del archivo descartando los datos de forma selectiva. Si aumenta el valor de Pérdida, se descartarán más datos. A menudo, puede aplicar un valor con pérdida de 5-10 y, a veces, hasta 50, sin degradar la imagen. La opción con pérdida puede reducir el tamaño del archivo entre un 5 % y un 40 %.

 No es posible utilizar la opción Menos calidad con la opción Entrelazado ni con algoritmos de ruido o tramado de motivo.

Especifica un método para generar la tabla de consulta de color y el número de colores que desea en la tabla de consulta de color. Puede seleccionar uno de los siguientes métodos de reducción de color:

Perceptual: crea una tabla de colores personalizada dando prioridad a los colores más sensibles para el ojo humano.

Selectiva: crea una tabla de colores parecida a la tabla de colores Perceptual, pero favorece amplias áreas de color y la conservación de los colores Web. Esta tabla de colores normalmente produce imágenes con la mayor integridad de color. Selectiva es la opción predeterminada.

Adaptable: crea una tabla de colores personalizada realizando muestras del espectro predominante en la imagen. Por ejemplo, una imagen con solo los colores verde y azul produce una tabla de colores formada principalmente por verdes y azules. La mayoría de las imágenes concentran los colores en áreas concretas del espectro.

Restrictiva (Web): utiliza la tabla de colores estándar de 216 colores común para las paletas de 8 bits (256 colores) de Windows y Mac OS. Esta opción garantiza que no se aplique ningún tramado del navegador a los colores cuando la imagen se muestra con color de 8 bits. (Esta paleta también se denomina paleta Web-safe.) El uso de la paleta web puede crear archivos más grandes y se recomienda solo cuando evitar el tramado del navegador es una prioridad alta.

Personalizada: utiliza una paleta de colores creada o modificada por el usuario. Si abre un archivo GIF o PNG-8 existente, tendrá una paleta de colores personalizada.

 Utilice la paleta Tabla de colores del cuadro de diálogo Guardar para Web y dispositivos para personalizar la tabla de colores de consulta.

Blanco y negro, Escala de grises, Mac OS, Windows Utilice una paleta definida de colores.

Determina el método y la cantidad de tramado de la aplicación. El tramado se refiere al método de simular colores que no están disponibles en el sistema de visualización de color de su equipo. Un porcentaje de tramado más alto crea la apariencia de más colores y más detalles en una imagen, pero también puede aumentar el tamaño del archivo. Para una compresión óptima, utilice el porcentaje más bajo de tramado que proporcione los detalles de color que necesite. Las imágenes con colores principalmente sólidos pueden funcionar bien sin tramado. Las imágenes con color de tono continuo (especialmente los degradados de color) pueden requerir un tramado para evitar las bandas de color.

Puede seleccionar uno de los siguientes métodos de tramado:

Difusión: aplica un motivo al azar que normalmente se ve menos que el tramado de Motivo. Los efectos del tramado se difuminan entre los píxeles adyacentes.

Motivo: aplica un motivo cuadrado similar a los semitonos para simular cualquier color que no está en la tabla de colores.

Ruido: aplica un motivo al azar parecido al método de tramado de Difusión, pero sin difuminar el motivo entre los píxeles adyacentes. Con este método de tramado de Ruido no aparece ninguna grieta.

Determina la optimización de los píxeles transparentes de una imagen.

• Para hacer transparentes los píxeles totalmente transparentes y fusionar los píxeles parcialmente transparentes con un color, seleccione Transparencia y elija un color mate.

• Para rellenar píxeles totalmente transparentes con un color y fusionar píxeles parcialmente transparentes con el mismo color, seleccione un color mate y anule la selección de Transparencia.

• Para seleccionar un color mate, haga clic en la muestra de color mate y seleccione un color en el selector de color. De forma alternativa, seleccione una opción en el menú Mate: Color de cuentagotas (para utilizar el color del cuadro de muestra del cuentagotas), Color frontal, Color de fondo, Blanco, Negro u Otro (para utilizar el selector de color).

 Las opciones Color frontal y Color de fondo solo se encuentran disponibles en Photoshop.

A. Imagen original B. Transparencia seleccionada con un color mate C. Transparencia seleccionada sin halos D. Transparencia deseleccionada con un color mate

Cuando la opción Transparencia está seleccionada, puede elegir un método para tramar los píxeles parcialmente transparentes:

• Sin tramado de transparencia no aplica tramado a los píxeles parcialmente transparentes de la imagen.

• Tramado de transparencia de difusión aplica un motivo al azar que normalmente se ve menos que el tramado de Motivo. Los efectos del tramado se difuminan entre los píxeles adyacentes. Si selecciona este algoritmo, especifique un porcentaje de tramado para controlar la cantidad de tramado aplicado a la imagen.

• Tramado de transparencia de motivo aplica un motivo cuadrado similar al de los semitonos a los píxeles parcialmente transparentes.

• Tramado de transparencia de ruido aplica un patrón aleatorio similar al algoritmo de difusión, pero sin difundir el patrón entre los píxeles adyacentes. No aparecen juntas con el algoritmo de ruido.

Muestra una versión de baja resolución de la imagen en un navegador mientras se descarga el archivo de imagen completo. El entrelazado puede hacer que el tiempo de descarga parezca más corto y puede garantizar a los usuarios que la descarga está en curso. Sin embargo, el entrelazado también aumenta el tamaño del archivo.

Especifica un nivel de tolerancia para desplazar los colores a los equivalentes más próximos de la paleta Web (y evitar que los colores se tramen en un navegador). Un valor más alto desplaza más colores.

Optimización para la transparencia en imágenes GIF y PNG

La transparencia permite crear imágenes no rectangulares para la Web. La transparencia del fondo conserva los píxeles transparentes en la imagen.

De esta forma, es posible ver el fondo de la página web a través de las áreas transparentes de la imagen. La opacidad del fondo simula la transparencia rellenando o fundiendo los píxeles transparentes con un color opaco que puede coincidir con el fondo de la página web. La opacidad del fondo funciona mejor si el fondo de la página Web es de un color uniforme y se sabe cuál es.

Con las opciones Transparencia y Mate del cuadro de diálogo Guardar para Web y dispositivos podrá especificar cómo se han de optimizar los píxeles transparentes de las imágenes GIF y PNG.

• (GIF y PNG-8) Para hacer transparentes los píxeles totalmente transparentes y fusionar píxeles parcialmente transparentes con un color, seleccione Transparencia y elija un color mate.
• Para rellenar píxeles totalmente transparentes con un color y fusionar píxeles parcialmente transparentes con el mismo color, seleccione un color mate y anule la selección de Transparencia.
• (GIF y PNG-8) Para hacer que todos los píxeles con una transparencia superior al 50% sean totalmente transparentes y todos los píxeles con una transparencia igual o inferior al 50% sean totalmente opacos, seleccione Transparencia y seleccione Ninguno en el menú Mate.
• (PNG-24) Para guardar una imagen con transparencia multinivel (hasta 256 niveles), seleccione Transparencia. La opción Mate está desactivada, ya que la transparencia multinivel permite que una imagen se fusione con cualquier color de fondo.

 en los navegadores que no admiten transparencia PNG‑24, los píxeles transparentes pueden mostrarse sobre un color de fondo predeterminado, como el gris.

Para seleccionar un color mate, haga clic en la muestra de color mate y seleccione un color en el selector de color. De forma alternativa, seleccione una opción en el menú Mate: Color de cuentagotas (para utilizar el color del cuadro de muestra del cuentagotas), Color frontal, Color de fondo, Blanco, Negro u Otro (para utilizar el selector de color).

 Las opciones Color frontal y Color de fondo solo se encuentran disponibles en Photoshop.

Visualización de la tabla de colores para un sector optimizado

La tabla de colores de un sector aparece en el panel Tabla de colores del cuadro de diálogo Guardar para Web y dispositivos.

Seleccione un sector que esté optimizado en formato GIF o PNG-8. La tabla de colores del sector seleccionado aparece en la tabla de colores de Guardar para Web y dispositivos.

Si una imagen tiene varios sectores, los colores de la tabla de colores pueden variar de un sector a otro (puede vincular primero los sectores para evitar que esto ocurra). Si selecciona varios sectores que utilizan tablas de colores diferentes, la tabla de colores estará vacía y su barra de estado mostrará el mensaje "Mixta".

Personalización de la tabla de colores para imágenes de GIF y PNG-8

La tabla de colores del cuadro de diálogo Guardar para Web y dispositivos permite personalizar los colores de las imágenes GIF y PNG-8 optimizadas. Al reducir el número de colores, a menudo se conserva la calidad de la imagen y se reduce el tamaño de archivo de la imagen.

Puede añadir y eliminar colores en la tabla de colores, cambiar los colores seleccionados a colores compatibles con Web y bloquear los colores seleccionados para evitar que se eliminen de la paleta.

Ordenar una tabla de colores

Seleccione un orden de clasificación en el menú de la paleta Tabla de colores:

• Desordenados restablece el orden original.
• Ordenar por tono ordena por la ubicación del color en la rueda de color estándar (expresada como un grado de 0 a 360). A los colores neutros se les asigna un tono de 0 y se ubican con los rojos.
• Ordenar por luminancia ordena por la luminosidad o brillo de un color.
• Ordenar por popularidad ordena por la frecuencia de aparición de los colores en la imagen.

Añadir un nuevo color a la tabla de colores

Puede agregar colores que no se vieron al crear la tabla de colores. Al añadir un color a una tabla dinámica, el color de la paleta se desplaza más cerca del nuevo color. Al agregar un color a una tabla fija o personalizada, se agrega un color adicional a la paleta.

Selección de colores en la tabla de colores

Aparece un borde blanco alrededor de los colores seleccionados en la Tabla de colores.

• Para seleccionar un color, haga clic en el color en la Tabla de colores.
• Para seleccionar varios colores en la tabla de colores, pulse Mayús y haga clic en otro color. Se seleccionan todos los colores de las filas entre el primer y el segundo color seleccionado. Para seleccionar un grupo de colores no consecutivo, pulse la tecla Ctrl (Windows) o la tecla Comando (Mac OS) y haga clic en cada uno de los colores que desea seleccionar. El menú de la paleta Tabla de colores también ofrece comandos para la selección de colores.
• Para seleccionar un color en la imagen de previsualización, haga clic en la previsualización con la herramienta Cuentagotas del cuadro de diálogo Guardar para Web y dispositivos. Pulse Mayús y haga clic para seleccionar colores adicionales.
• Para anular todas las selecciones de colores, elija Deseleccionar todos en el menú de la paleta Tabla de colores.

Cambio de un color

Puede cambiar un color seleccionado en la tabla de colores a cualquier otro valor de color de RGB. Al regenerar la imagen optimizada, el color seleccionado cambia al nuevo color dondequiera que aparezca en la imagen.

Cambio de colores por sus equivalentes más cercanos en la paleta Web

Para proteger los colores del tramado en un navegador, puede cambiar los colores a sus equivalentes más cercanos en la paleta web. De este modo, se garantiza que los colores no fluyan cuando se muestren en navegadores con sistemas operativos Windows o Macintosh que solo puedan mostrar 256 colores.

Asignación de colores a transparencia

Puede añadir transparencia a una imagen optimizada asignando los colores existentes a la transparencia.

Bloqueo o desbloqueo de un color

Es posible bloquear colores seleccionados en la tabla de colores para impedir que se eliminen cuando se reduzca el número de colores y para evitar que sufran tramado en la aplicación.

 bloquear colores no evita el tramado en un navegador.

Eliminar colores seleccionados

Puede eliminar los colores seleccionados de la tabla de colores para reducir el tamaño del archivo de imagen. Al eliminar un color, las áreas de la imagen optimizada que anteriormente incluían ese color se vuelven a procesar utilizando el color más cercano que queda en la paleta.

Al eliminar un color, la tabla de colores cambia automáticamente a una paleta personalizada. Esto se debe a que las paletas Adaptable, Perceptual y Selectiva vuelven a añadir automáticamente el color eliminado a la paleta cuando se vuelve a optimizar la imagen; la paleta Personalizada no cambia cuando se vuelve a optimizar la imagen.

Guardar tabla de colores

Puede guardar tablas de colores de imágenes optimizadas para utilizarlas con otras imágenes y cargar tablas de colores creadas en otras aplicaciones. Una vez que se carga una nueva tabla de colores en una imagen, los colores de la imagen optimizada se cambian para reflejar los colores en la nueva tabla de colores.

Carga de una tabla de colores

Opciones de optimización de PNG-24

El formato PNG-24 es adecuado para comprimir imágenes de tono continuo; sin embargo, produce archivos mucho más grandes que el formato de JPEG. La ventaja de usar PNG-24 es que puede conservar hasta 256 niveles de transparencia en una imagen.

Determina la optimización de los píxeles transparentes de una imagen.

Muestra una versión de baja resolución de la imagen en un navegador mientras se descarga el archivo de imagen completo. El entrelazado puede hacer que el tiempo de descarga parezca más corto y puede garantizar a los usuarios que la descarga está en curso. Sin embargo, el entrelazado también aumenta el tamaño del archivo.