Redimensionar GIF

Cambia las dimensiones de un GIF animado escribiendo píxeles exactos o un porcentaje, sin perder la animación.

1. 1

   Añade tu GIF

   Arrastra un GIF animado al área de carga o haz clic para buscarlo. También funcionan WebP animado y APNG. El archivo se lee en tu dispositivo y nunca se sube.

2. 2

   Fija el tamaño

   Escribe un ancho, un alto o ambos: con el bloqueo de proporción activo, al rellenar uno se rellena el otro. También vale un porcentaje, y pasar de 100 % amplía en lugar de ignorarse.

3. 3

   Elige cómo resolver una proporción distinta

   Si tu caja de destino tiene otras proporciones, elige ajustar, estirar, recortar o rellenar. Ajustar es la opción segura: no deforma ni corta nada.

4. 4

   Descarga el GIF redimensionado

   Pulsa Descargar. El retardo de cada fotograma, el número de bucles y la transparencia salen intactos, así que la animación se reproduce igual.

Un GIF llega con el tamaño con el que se hizo, y ese tamaño rara vez es el que necesitas. Una grabación de pantalla capturada a 1920 píxeles de ancho es inservible como adjunto de correo e ilegible como emoji de 128 píxeles. Un GIF de reacción sacado de un móvil mide 480 de ancho cuando la columna de documentación mide 700. Y a diferencia de una fotografía, no basta con dejar que el navegador lo escale: un GIF mostrado más pequeño que su tamaño natural sigue descargando todos sus píxeles a tamaño completo, así que quien lee paga por una resolución que nunca ve.

Escribe dimensiones exactas o un porcentaje, amplía además de reducir y cambia al modo Píxel para mantener nítidos los bordes de un sprite.

Lee GIF, WebP animado y APNG. Escribe un GIF89a estándar conservando los retardos por fotograma, el número de bucles y la transparencia.

Qué se gana al cambiar las dimensiones

• Bytes, en cantidad. Reducir a la mitad el ancho y el alto elimina unas tres cuartas partes de los datos de píxel. Es la reducción de tamaño más barata que existe, porque no cuesta nada del movimiento.
• Un hueco que encaja. Las casillas de emoji, los marcos de avatar y las columnas de documentación tienen anchos fijos. Lo que no encaja lo recorta o lo escala el algoritmo de otro.
• Legibilidad. El texto dentro de una grabación de pantalla o se lee al tamaño de visualización o es decoración. Redimensionar a propósito es cómo se descubre antes de publicar.
• Sprites que siguen nítidos. El pixel art ampliado con suavizado queda arruinado sin remedio. Ampliado con vecino más cercano es perfecto en cualquier múltiplo entero.

Una imagen fija tiene un solo raster. Un GIF animado tiene una pila de ellos, cada uno posiblemente cubriendo solo parte del lienzo, cada uno con su retardo, su paleta y su máscara de transparencia. Redimensionar uno correctamente significa componer primero cada fotograma sobre el lienzo completo, escalar eso y luego reconstruir una paleta para toda la animación en lugar de una por fotograma. Las herramientas que se saltan la composición producen resultados que saltan, porque un fotograma que era legalmente un parche de 30 píxeles con desplazamiento se escala como si fuera la imagen entera.

Qué le ocurre a cada fotograma

• Componer. Cada fotograma se dibuja sobre un lienzo del tamaño lógico de la animación, respetando su desplazamiento, su método de descarte y su transparencia, así que lo que se escala es la imagen que realmente vería alguien.
• Escalar. Un dibujado por fotograma al tamaño de destino, en tu hardware gráfico cuando está disponible. Suavizado activo para material fotográfico, desactivado para pixel art.
• Recuantizar. Se construye una paleta a partir de una muestra repartida por toda la animación, no del primer fotograma, y cada píxel se asigna a ella.
• Reoptimizar. Las zonas sin cambios entre fotogramas se vuelven a marcar como transparentes al nuevo tamaño, que es donde se va la mayor parte del peso.

Qué no debe cambiar un redimensionador

Tres cosas tienen que salir exactamente como entraron: el retardo propio de cada fotograma, el número de bucles y qué píxeles son transparentes. Una herramienta que retemporiza al redimensionar produce un GIF perfectamente válido que simplemente va a otra velocidad, y una que aplana la transparencia devuelve una imagen con un recuadro blanco alrededor. Aquí ambas cosas se comprueban en cada ejecución en lugar de darse por supuestas.

Todo redimensionador suaviza por defecto, y para fotografías es lo correcto: interpolar entre píxeles vecinos es lo que evita que una foto escalada parezca un mosaico. Para pixel art es destructivo de una forma que nada revierte. Un contorno negro de un píxel en un sprite, ampliado cuatro veces con suavizado, se convierte en un degradado gris de cuatro píxeles; el borde nítido desaparece y ningún enfoque lo recupera. El vecino más cercano simplemente repite cada píxel de origen, así que una ampliación de 4× convierte cada píxel en un bloque limpio de 4×4. Medido en el sprite de prueba de esta herramienta escalado de 64 a 256: suavizar produjo 94 colores distintos en la fila central, el vecino más cercano produjo exactamente 8, que es lo que el origen contiene.

Resultados medidos

• Vecino más cercano frente a suavizado 8 colores distintos en una fila frente a 94, sobre un origen que contiene 8. El modo es la diferencia entre conservar el arte y promediarlo.
• Precisión del remuestreo El modo suave difiere del lanczos3 de libvips en 3,31/255 de media: dos implementaciones independientes coincidiendo.
• Relleno transparente frente a sólido 49.167 B frente a 13.961 B para la misma imagen. El relleno transparente cuesta la optimización entre fotogramas, que aquí vale 3,5×.
• Velocidad 100 fotogramas de 480×270 a 960×540 en 1.149 ms; el mismo clip a 240×135 en 112 ms.

El error más común es redimensionar a una cifra que suena redonda en lugar de a la que usa el destino. Antes de escribir nada, averigua a qué tamaño se muestra realmente el destino —una columna de documentación, una casilla de emoji, el ancho en línea de un cliente de chat— y ajústate exactamente. Redimensionar a 500 cuando la columna mide 700 hace que el navegador lo vuelva a escalar y deshaga el trabajo; redimensionar a 1400 para una columna de 700 duplica la descarga por una diferencia que solo aprecia una pantalla de alta densidad, y solo si el origen tenía ese detalle.

Por material

• Grabaciones de pantalla con texto. No bajes del tamaño al que el texto se lee: mira la vista previa, no el número. Aquí el suavizado es lo correcto; el texto ya está suavizado.
• Pixel art y sprites. Cambia a Píxel y usa múltiplos enteros: 2×, 3×, 4×. Una escala no entera de pixel art produce bloques desiguales incluso con vecino más cercano, porque unos píxeles de origen caen en dos de salida y otros en tres.
• Material procedente de vídeo. Suavizado, y reducir en lugar de ampliar. Ampliar fotogramas de vídeo saca a la luz los artefactos de compresión que eran invisibles al tamaño original.
• Cualquier cosa para un cuadrado fijo. Recortar, no Rellenar. Un cuadrado relleno tiene bandas vacías visibles; uno recortado llena la casilla como el resto de imágenes.

• Emoji personalizados. Discord y Slack aceptan 128×128 y rechazan casi todo lo que pase de 256 KB, así que esta herramienta y el compresor suelen usarse juntas.
• Documentación y archivos README. Ajústate al ancho real de la columna para que el navegador no escale nada por su cuenta.
• Firmas de correo. Unas dimensiones pequeñas son la única forma fiable de dejar una animación por debajo de lo que aceptan la mayoría de servidores.
• Avatares e imágenes de perfil. Cuadrados, recortados y lo bastante pequeños para cargar antes de que la página termine de dibujarse.

Tamaños que conviene memorizar

Los emoji personalizados de Discord y Slack son de 128×128. X muestra imágenes en línea de hasta 506 píxeles de ancho. La columna de un README de GitHub mide 768 a ancho completo y unos 700 en la práctica. La mayoría de temas de documentación se mueven entre 680 y 760. Todo lo que supere la columna donde aterriza son bytes que quien lee descarga y nunca ve.

La lista de entrada es cerrada y se aplica en el diálogo de archivos, no en el motor, así que un archivo que esta herramienta no puede abrir se rechaza en milisegundos con una ruta a la herramienta que sí puede, en lugar de aceptarse y fallar después tras un indicador de carga.

• Entra GIF. Animado o de un solo fotograma, entrelazado o no, con paleta global o una paleta local distinta en cada fotograma. Los fotogramas que son subrectángulos desplazados se componen sobre el lienzo completo antes de escalar nada.
• Entran WebP animado y APNG. Ambos se leen con nuestros propios demultiplexores en todos los navegadores, así que los fotogramas y la temporización son idénticos en todas partes.
• Sale GIF, siempre. Un GIF89a estándar con tabla de colores global, retardos por fotograma, métodos de descarte y extensión de bucle de Netscape.
• Cualquier otra cosa se rechaza con una ruta. Un vídeo se envía a Vídeo a GIF; una imagen fija, al Creador de GIF.

Qué lee la herramienta

El GIF se descodifica de forma nativa donde el navegador tiene un descodificador y con nuestro propio lector en el resto, así que una animación se abre igual en todos los navegadores en lugar de llegar como su primer fotograma. El WebP animado y el APNG siempre pasan por nuestro lector, que es lo que mantiene idénticos el número de fotogramas y la temporización entre motores.

Límites de tamaño y de lote

• Gratis. Un archivo de hasta 50 MB y hasta 300 fotogramas, con salida de hasta 2048 píxeles en el lado largo. A plena calidad: el plan gratuito no es un redimensionado de menor calidad, es de un solo archivo.
• Pro. Hasta 20 archivos a la vez, descargados en un único ZIP, sin límite de dimensiones impuesto. El lote es lo que compra Pro aquí, porque redimensionar un set de emoji o una carpeta de clips uno a uno es la verdadera lata.
• El límite común a ambos planes. Cada fotograma se expande a color completo mientras se trabaja con él, así que un presupuesto de memoria acota el trabajo antes de empezar, en vez de dejar que la pestaña deje de responder mientras el indicador sigue girando.

No se sube nada. El archivo se descodifica fotograma a fotograma en tu máquina, cada fotograma se compone y se escala, se construye una paleta para toda la animación, las zonas sin cambios se vuelven a marcar como transparentes y el resultado se escribe como un GIF89a estándar. Todo corre en un hilo en segundo plano para que la página siga respondiendo, y el escalado en sí corre en tu hardware gráfico cuando está disponible.

Por qué el mismo archivo se redimensiona igual siempre

• Un cuantizador determinista. Corte mediano, no el cuantizador neuronal aleatorizado que usan la mayoría de bibliotecas GIF, así que la misma entrada con los mismos ajustes siempre da una salida idéntica byte a byte.
• Resultados idénticos en todas las rutas. Las rutas acelerada por gráficos y por procesador deben producir los mismos bytes, no solo parecidos: una ruta que eligiera otra entrada de paleta se vería como parpadeo de color entre fotogramas.
• Geometría comprobada con otra implementación. El remuestreo suave se verifica contra libvips, una biblioteca de imagen completamente aparte, y no contra nuestra propia salida anterior.

El escalado está acelerado por hardware donde tu dispositivo lo permite, y se verifica que las rutas acelerada y de reserva produzcan bytes idénticos. El remuestreo suave se contrasta con una biblioteca de imagen independiente. Medido en la máquina de referencia: 100 fotogramas de 480×270 a 960×540 en 1.149 ms. Se ejecuta en tu dispositivo, no en nuestros servidores.

• Compresor de GIF
• Creador de GIF
• Vídeo a GIF
• GIF a MP4
• Editor de GIF
• Todas las herramientas GIF