Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

Cómo acelerar videos GIF

El formato de intercambio de gráficos, mejor conocido como GIF, ha existido por más tiempo que la propia World Wide Web. Gracias a su simplicidad y soporte generalizado, los archivos GIF siguen siendo muy populares a pesar de las docenas de otros formatos de imagen y video disponibles en la actualidad. Dicho esto, los GIF pueden arrastrar hacia abajo el rendimiento de una página web, especialmente si no están optimizados. Veamos algunas formas de acelerar las animaciones GIF en su sitio web y veamos algunos formatos alternativos que debe considerar.

¿Por qué acelerar las animaciones GIF?# #

Los GIF se inventaron en 1987 como una forma de transmitir múltiples imágenes que comparten los mismos metadatos en un solo archivo. Nunca tuvo la intención de ser una herramienta de animación, sin embargo, las personas lo han estado utilizando para ese propósito durante las últimas tres décadas. Aunque ahora tenemos varias alternativas superiores para mostrar animaciones, las personas se sienten cómodas con GIF, y las animaciones GIF siguen siendo extremadamente fáciles de hacer.
Dicho esto, solo porque los GIF son fáciles de usar no los hace ideales para sitios web. Incluso si está satisfecho con el rendimiento de su sitio web, es posible que no se dé cuenta de cuánto peso están agregando sus GIF a cada página. Un GIF que dura solo unos segundos puede tener un tamaño de varios megabytes , lo que significa que los visitantes con conexiones a Internet más lentas podrían mirar una página en blanco durante unos segundos antes de que se cargue. Si los usuarios tienen que esperar más tiempo para que se cargue un GIF animado que la duración real de la animación, es probable que se sientan decepcionados y tentados a presionar el botón Atrás de su navegador.

Por qué deberías dejar de usar GIF estáticos#

Si bien las animaciones GIF todavía tienen algún valor, no hay ninguna razón para usar GIF para imágenes estáticas en estos días. Si su sitio web utiliza muchas imágenes GIF estáticas, considere convertirlas al formato PNG para recortar fácilmente del 5 al 25 por ciento del tamaño de cada archivo. También debe pensar en admitir formatos más nuevos como WebP .

Formas de acelerar manualmente las animaciones GIF#

Si solo tiene unos pocos archivos GIF a los que está particularmente conectado, puede valer la pena intentar las siguientes técnicas. Cada uno se puede hacer con la ayuda de la herramienta en línea EzGIF .

1. Recortar y redimensionar#

Las imágenes más pequeñas se cargan más rápido que las grandes, por lo que disminuir las dimensiones de sus GIF puede generar ahorros menores. Dado que los GIF animados son solo colecciones de imágenes GIF estáticas, tendrá que editar cada imagen individual para disminuir el tamaño general del archivo animado. Afortunadamente, hay muchas herramientas de edición gratuitas que simplifican el proceso.

2. Recorte la línea de tiempo de la animación#

Es posible que no necesite necesariamente cada cuadro de una animación. Use una herramienta de edición de GIF para eliminar algunos cuadros y reducir el tamaño del archivo.

3. Baje la velocidad de fotogramas#

Si no desea eliminar marcos manualmente, puede usar una herramienta de edición para soltar automáticamente cada segundo, tercer o cuarto marco de una animación para reducir el tamaño del archivo.

4. Reduzca la cantidad de colores#

Intenta disminuir el número de colores por cuadro. Puede experimentar con diferentes opciones para encontrar el mejor compromiso entre el tamaño del archivo y la calidad de la imagen.

5. Experimente con transparencia#

Hacer transparentes partes de cada fotograma es un método efectivo de ahorro de costos para imágenes con grandes áreas que no cambian, pero puede arruinar animaciones más ocupadas. La mayoría de las herramientas de edición de GIF le permiten experimentar con la configuración de transparencia.

Acelere las animaciones GIF con herramientas de compresión#

Debido a su naturaleza, no es posible realizar cambios en los archivos GIF sin afectar sus datos gráficos. En otras palabras, optimizar sus GIF animados para la velocidad a menudo significa sacrificar la calidad de la imagen. Afortunadamente, el ojo humano no es muy bueno para notar diferencias sutiles de color, por lo que es posible que sus usuarios ni siquiera puedan notar la diferencia.
Aunque el término "compresión con pérdida" conlleva una connotación negativa, a veces la reducción de la calidad de una imagen vale la pena. Ejecutar sus GIF a través de una herramienta de compresión como EzGIF puede reducir el tamaño de sus archivos en un 30-50 por ciento sin afectar drásticamente la calidad visual.

Formatos alternativos para acelerar las animaciones GIF#

Si tiene muchos archivos GIF en su sitio web, podría tener más sentido convertirlos a una alternativa más eficiente. Existe un debate entre los desarrolladores web sobre si los formatos de imágenes animadas deben ser eliminados por completo a favor de los formatos de video. Afortunadamente, tiene muchas opciones independientemente de su preferencia. Aquí hay algunas alternativas a GIF para considerar:

1. Videos MP4#

Dado que la etiqueta de video HTML5 dio a los navegadores la capacidad de reproducir videos sin la necesidad de complementos externos, MP4 se ha convertido en el formato contenedor multimedia preferido de la mayoría de los desarrolladores web. La conversión de sus GIF animados a videos MP4 puede hacer que sus archivos sean hasta un 95 por ciento más pequeños. Además de su tamaño de archivo más pequeño, los videos MP4 se ven mejor que otras alternativas ya que el formato fue diseñado para transmitir video. Todos los navegadores modernos admiten videos MP4, por lo que ahora es el momento ideal para convertir esos GIF a MP4.
Una manera fácil de hacer esto es usar una solución como FFmpeg . Con esta herramienta, puede ejecutar un comando simple desde su consola para convertir sus archivos GIF a MP4 de la siguiente manera:
ffmpeg -f gif -i infile.gif outfile.mp4

2. APNG#

Una extensión del formato PNG, APNG funciona de manera similar a GIF, ya que actúa como un contenedor para múltiples archivos PNG. Sin embargo, APNG admite más colores y transparencia parcial, y su algoritmo de compresión es muy superior. Ha existido durante más de una década y es compatible con la mayoría de los principales navegadores.
apng support

3. WebP#

WebP utiliza una combinación de técnicas de compresión con pérdida y sin pérdida para empaquetar imágenes en el tamaño más pequeño posible. Al igual que APNG, es compatible con la mayoría de los navegadores modernos, excepto IE y Safari.

4. CSS puro#

Si usa GIF animados simples para elementos de la interfaz de usuario, considere reemplazarlos con gráficos basados ​​en vectores. Las formas creadas con CSS puro son independientes de la resolución, por lo que se pueden ampliar sin sacrificar la calidad.

Herramientas para acelerar las animaciones GIF#

Aquí hay una selección de herramientas que son útiles para comprimir, editar y convertir GIF:

1. EzGIF#

ezgif
EzGIF es una solución basada en la web que ofrece una amplia selección de herramientas para editar, optimizar y convertir imágenes o videos a diferentes formatos. También tiene una práctica herramienta de creación de GIF para que pueda crear animaciones optimizadas desde el principio.

2. ImageOptim#

imageoptim
Exclusivamente para Mac, ImageOptim utiliza un algoritmo de compresión que disminuye automáticamente las dimensiones de los GIF y JPG a aproximadamente el 60-80 por ciento de su tamaño original. También elimina los perfiles de color innecesarios y el exceso de metadatos. El resultado es una imagen más pequeña y un archivo más pequeño.

3. Imágenes de FILEminimizer#

fileminimizerpictures
FILEminimizer Pictures es un programa de Windows que le brinda cuatro opciones de compresión diferentes para que pueda encontrar el equilibrio perfecto entre la calidad de la imagen y el ahorro de tamaño. Incluye una práctica función que le permite cargar directamente GIF a Facebook.

4. RIOT#

riot
La herramienta de optimización de imagen radical , o RIOT, le brinda un control considerable sobre el proceso de optimización. También cuenta con una interfaz de vista dual que le permite ver una comparación de antes y después.

5. Convertio#

convertio
Convertio es otra herramienta de conversión que admite cientos de formatos. También puede convertir archivos de audio y video, lo que lo convierte en una excelente solución todo en uno para desarrolladores web.

GIF y CDN#

Ya sea que planee mantener sus archivos GIF tal como están, optimizarlos o convertirlos a otro formato, una forma fácil de acelerar su entrega es utilizando un CDN . Un CDN extraerá los archivos GIF de su servidor de origen y los almacenará en caché. Por lo tanto, la próxima vez que un usuario haga una solicitud para ese archivo, se entregará desde el servidor perimetral CDN más cercano posible. Esto da como resultado una reducción en la distancia recorrida y, por lo tanto, la latencia, así como también reduce la carga en su servidor de origen.
Para obtener más información sobre cómo integrar una CDN con su sitio web, consulte nuestra extensa lista de integraciones de CDN .

Resumen#

No hay señales de que los GIF desaparezcan pronto, pero los desarrolladores web serios deben mirar hacia adelante y adoptar alternativas más eficientes.
Por supuesto, la optimización web siempre se trata de sopesar los costos y los beneficios. Su tiempo es un recurso valioso, así que antes de comenzar a hacer cambios, sea realista sobre los beneficios para determinar si vale la pena la inversión. Si su sitio web sufre de lentitud general, debe realizar algunas pruebas analíticas para determinar si algo más está causando el problema.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas