Optimización de imágenes para los formatos GIF o PNG-8

Última actualización el 17-05-2022

Acerca del formato GIF

El formato GIF usa color de 8 bits y comprime eficientemente las áreas de color uniforme mientras conserva los detalles nítidos como los de las ilustraciones lineales, logotipos o texto. También puedes usar el formato GIF para crear una imagen animada y conservar la transparencia en una imagen. GIF es compatible con la mayoría de exploradores.

El formato GIF usa compresión LZW, que es un método de compresión sin pérdidas. Sin embargo, debido a que los archivos GIF están limitados a 256 colores, optimizar una imagen original de 24 bits como un GIF de 8 bits puede restar colores de una imagen.

Imagen GIF con color selectivo (izquierda) e imagen GIF con color web (derecha)

Puedes elegir el número de colores en una imagen GIF y controlar cómo los colores se traman en un navegador.GIF admite transparencia de fondo o enmascaramiento de fondo, mediante el cual se fusionan los bordes de la imagen con un color de fondo de página web.

Acerca del formato PNG-8

El formato PNG‑8 usa color de 8 bits. Al igual que el formato GIF, PNG‑8 comprime eficientemente áreas de color uniforme mientras conserva los detalles nítidos como los de ilustraciones lineales, logotipos o texto.

Dado que PNG‑8 no es compatible con todos los exploradores, es posible que quieras evitar este formato cuando distribuyas la imagen a un público amplio.

El formato PNG‑8 usa esquemas de compresión más avanzados que GIF, y un archivo PNG‑8 puede ser de un 10 % a un 30 % más pequeño que un archivo GIF de la misma imagen, dependiendo de los patrones de color de la imagen. Aunque la compresión PNG-8 no tiene pérdidas, optimizar una imagen original de 24 bits como un archivo PNG de 8 bits puede restar colores de la imagen.

Nota

Con ciertas imágenes, especialmente aquellas con motivos simples y pocos colores, la compresión GIF puede crear un archivo más pequeño que la compresión PNG-8.Visualiza imágenes optimizadas en formato GIF y PNG-8 para comparar el tamaño del archivo.

Al igual que con el formato GIF, puedes elegir el número de colores de una imagen y controlar cómo se aplica el tramado de colores en un explorador.El formato PNG-8 admite transparencia de fondo y matizado de fondo, mediante los cuales se fusionan los bordes de la imagen con un color de fondo de página web.

PNG-8 con 256 colores y sin tramado (izquierda), y PNG-8 con 16 colores y tramado (derecha)

Optimización como formato GIF o PNG-8

GIF es el formato estándar para comprimir imágenes con grandes áreas de colores uniformes y detalles nítidos como los de arte lineal, logotipos o texto.Al igual que el formato GIF, PNG-8 admite transparencia y comprime de manera eficiente las áreas de color uniforme mientras conserva los detalles nítidos; sin embargo, no todos los exploradores web pueden mostrar archivos PNG-8.

Abre una imagen y elige Archivo > Guardar para web.
Elija GIF o PNG-8 en el menú de formatos de optimización.
Para mostrar una imagen en baja resolución mientras se descarga la imagen de resolución completa, selecciona Entrelazado.El entrelazado puede hacer que el tiempo de descarga parezca más corto y proporciona comentarios a los visualizadores de que la descarga está en curso.
En el menú de formato de optimización, elija un algoritmo de reducción de colores para generar la tabla de consulta de colores:

Perceptual

Crea una tabla de color personalizada dando prioridad a colores para los cuales el ojo humano tiene mayor sensibilidad.

Selectiva

Crea una tabla de color similar a la tabla de color perceptual, pero favoreciendo áreas amplias de color y la preservación de colores web. Esta tabla de color normalmente produce imágenes con la mayor integridad de color. (Selectiva es la opción por defecto).

Adaptable

Crea una tabla de color personalizada mediante muestreo de colores del espectro que aparece más comúnmente en la imagen. Por ejemplo, una imagen con solo tonos de verde y azul produce una tabla de color hecha principalmente de verdes y azules. La mayoría de las imágenes concentran colores en áreas particulares del espectro.

Restrictiva (Web)

Usa la tabla de color estándar de 216 colores, segura para web, común a los paneles de 8 bits (256 colores) de Windows y Mac OS.Esta opción asegura que no se aplique tramado del explorador a los colores cuando la imagen se muestre usando color de 8 bits. Si tu imagen tiene menos de 216 colores, los colores no utilizados se eliminan de la tabla.

Para especificar el número máximo de colores en el panel de color, seleccione un número del menú Colores, introduzca un valor en el cuadro de texto, o haga clic en las flechas para cambiar el número de colores.Si la imagen contiene menos colores que el panel, la tabla de color refleja el menor número de colores en la imagen.
Si eliges Restrictivo (Web) para el algoritmo de reducción de color, puedes elegir Automático del menú Colores.Elige Automático si quieres que Photoshop® Elements determine el número óptimo de colores en la tabla de color basándose en la frecuencia de colores en la imagen.
Elija un porcentaje de tramado, ya sea introduciendo un porcentaje en el cuadro de texto Tramado o haciendo clic en la flecha del menú Tramado y arrastrando el control deslizante que aparece.
Si la imagen contiene transparencia, selecciona Transparencia para preservar píxeles transparentes; deselecciona Transparencia para rellenar píxeles total y parcialmente transparentes con el color mate.
Para crear un GIF animado, seleccione Animar.
Para guardar la imagen optimizada, haga clic en OK. En el cuadro de diálogo Guardar optimizado como, escriba un nombre de archivo y haga clic en Guardar.

Creación de un GIF animado

Coloque las imágenes que desee que aparezcan en cada marco de la animación en capas separadas del panel Capas.Por ejemplo, para crear una animación de un ojo parpadeando, colocarías una imagen del ojo abierto en una capa, y una imagen del ojo cerrado en otra capa.
Seleccione Archivo > Guardar para Web.
Nota

Si la imagen tiene múltiples capas, también puede abrir el cuadro de diálogo Guardar para Web desde el cuadro de diálogo Guardar como eligiendo Formato GIF CompuServe y seleccionando Capas como marcos.

Optimice la imagen en formato GIF.
Seleccione Animar.
Configura opciones adicionales en la sección Animación del cuadro de diálogo:

Opciones de repetición

Repetir continuamente la animación en un explorador web, o animar solo una vez. También puedes elegir Otro para especificar el número de veces que la animación debe repetirse.

Retardo de cuadro

Especifica el número de segundos que se muestra cada fotograma en un explorador web.Usa un valor decimal para especificar fracciones de un segundo. Por ejemplo, utilice 0,5 para indicar medio segundo.