Guía del usuario Cancelar

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

Buscar

Última actualización el 4 may. 2021

Acerca del formato GIF

El formato GIF utiliza el color de 8 bits y comprime eficazmente áreas de color uniforme a la vez que mantiene los detalles nítidos, como los que hay en líneas, logotipos o texto. El formato GIF también se usa para crear una imagen animada y mantener la transparencia. La mayoría de los navegadores admiten el formato GIF.

El formato GIF utiliza compresión LZW, que es un método de compresión sin pérdida de calidad. Sin embargo, como los archivos GIF tienen un límite de 256 colores, si se optimiza una imagen original de 24 bits como archivo GIF de 8 bits, es posible que se reste colores a la imagen.

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

Puede elegir el número de colores de una imagen GIF y controlar cómo se traman en un navegador. El formato GIF admite transparencia o halos de fondo, permitiendo fusionar los bordes de la imagen con el color de fondo de una página Web.

Acerca del formato PNG-8

El formato PNG-8 utiliza el color de 8 bits. Al igual que el formato GIF, el formato PNG-8 comprime eficazmente áreas de color uniforme a la vez que mantiene los detalles nítidos, como los que hay en líneas, logotipos o texto.

Como el formato PNG-8 no lo admiten todos los navegadores, es preferible evitarlo si se va a distribuir la imagen a muchos usuarios.

Este formato utiliza esquemas de compresión más avanzados que el GIF, así que un archivo PNG-8 puede ser entre un 10 y un 30% más pequeño que un archivo GIF de la misma imagen, según los motivos de color. Aunque PNG-8 tiene una compresión sin pérdida de calidad, si se optimiza una imagen original de 24 bits como archivo PNG de 8 bits, es posible que se reste color a la imagen.

Nota:

con determinadas imágenes, sobre todo las de motivos sencillos y pocos colores, la compresión GIF puede crear un archivo de menor tamaño que la compresión PNG-8. Vea las imágenes optimizadas en los formatos GIF y PNG-8 y compare el tamaño de los archivos.

Como sucede con el formato GIF, puede elegir el número de colores de una imagen y controlar cómo se traman en un navegador. El formato PNG-8 admite transparencia y halos de fondo, permitiendo fusionar los bordes de una imagen con el color de fondo de una página Web.

we_04 — 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 áreas grandes de colores uniformes y detalles nítidos como los que hay en líneas, logotipos y texto. Al igual que el formato GIF, el formato PNG-8 admite transparencias y comprime eficazmente áreas de color uniforme a la vez que mantiene los detalles nítidos; sin embargo, no todos los navegadores Web permiten visualizar archivos PNG-8.

Abra una imagen y elija Archivo > Guardar para Web.
Elija GIF o PNG-8 en el menú de formatos de optimización.
Para ver la imagen con una resolución baja mientras se descarga con resolución completa, seleccione Entrelazado. El entrelazado puede hacer que el tiempo de descarga parezca más corto y notifica a los usuarios que la descarga está en curso.
En el menú de formatos de optimización, elija un algoritmo de reducción de color para generar la tabla de colores de consulta:

Perceptual

Crea una tabla de colores personalizada dando prioridad a los colores para los que el ojo humano es más sensible.

Selectiva

Crea una tabla de colores parecida a la tabla 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 máxima integridad del color. (Selectiva es la opción por defecto).

Adaptable

Crea una tabla de colores personalizada realizando muestras del espectro que aparece con más frecuencia en la imagen. Por ejemplo, una imagen solo con tonos de verde y azul produce una tabla de colores compuesta principalmente por verdes y azules. La mayoría de las imágenes concentran los colores en áreas determinadas del espectro.

Restrictiva (Web)

Utiliza la tabla estándar de 216 colores y compatible con Web común a los paneles de 8 bits (de 256 colores) de Windows y Mac OS. Esta opción asegura que no se aplique ningún tramado de navegador a los colores cuando la imagen se visualice con un color de 8 bits. Si la imagen tiene menos de 216 colores, los colores que no se utilicen se quitan de la tabla.
Para especificar el número máximo de colores del panel, seleccione un número en el 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 reflejará el número de colores más reducido en la imagen.
Si elige Restrictiva (Web) como algoritmo de reducción de color, podrá seleccionar Auto en el menú Colores. Elija Auto si desea que Photoshop Elements determine el número óptimo de colores de la tabla según la frecuencia de los colores de la imagen.
Elija un porcentaje de tramado, introduciendo un porcentaje en el cuadro de texto Tramado o haciendo clic en la flecha del menú Tramado y arrastrando el regulador que aparece.
Si la imagen contiene transparencia, seleccione Transparencia para mantener los píxeles transparentes; desactive esta opción para rellenar los píxeles parcial y totalmente 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 optimizada como, escriba un nombre de archivo y haga clic en Guardar.

Creación de un GIF animado

Coloque las imágenes que desea que aparezcan en cada cuadro de la animación en capas separadas del panel Capas. Por ejemplo, para crear la animación de un ojo parpadeando, colocaría 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 varias capas, también puede abrir el cuadro de diálogo Guardar para Web desde el cuadro de diálogo Guardar como si elige el formato CompuServe GIF y selecciona Capas como cuadros.
Optimice la imagen en formato GIF.
Seleccione Animar.
Defina opciones adicionales en la sección Animación del cuadro de diálogo:

Opciones de repetición

Puede optar por repetir continuamente la animación en un navegador Web o animar una sola vez. También puede elegir Otro para especificar el número de veces que debe repetirse la animación.

Retardo de cuadro

Especifica el número de segundos que aparece cada cuadro en el navegador Web. Utilice un valor decimal para especificar fracciones de segundo. Por ejemplo, utilice 0,5 para indicar medio segundo.

Páginas relacionadas

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?