Optimizar cualquier imagen es en parte un esfuerzo para reducir el tiempo de carga. Parte de la optimización es comprimir la imagen, lo que reduce el tamaño del archivo y los archivos más pequeños deberían cargarse más rápido. La optimización se puede dirigir hacia solo cambiar un archivo, o hacia la creación de imágenes receptivas que creen archivos que se puedan ver en diferentes dispositivos con (casi) igual calidad.
En términos de optimización de archivos GIF, hay GIF animados y no animados. En 2017, la mayoría de las personas que discuten archivos GIF se refieren a GIF animados, así que voy a suponer que ese es el tipo de archivo con el que está trabajando.
Para optimizar los archivos GIF hay varias opciones diferentes. Tenga en cuenta que lo que puede hacer dependerá de la herramienta que esté utilizando.
- ¿Son estos buenos colores para mi sitio web de cartera de desarrollo web? (Azul - # 484B9C y naranja - # FF9800
- ¿Qué tan necesario es tener un conocimiento profundo de Javascript antes de aprender a usar jQuery?
- ¿Cómo maneja / optimiza WP Engine las solicitudes de búsqueda?
- Cómo convertirse en un desarrollador front-end independiente
- ¿Qué sitios web debo visitar para convertirme en un desarrollador web experto front-end?
- Compresión con pérdida. La compresión puede ser sin pérdida o con pérdida. Pérdida significa que se sacrifica algo de calidad para lograr una compresión de mayor tamaño. Con video y GIF animados. el usuario no notará alguna pérdida de calidad.
- Retirar marcos. Al eliminar cada ___ fotograma (___ es un número como cada 4 ° fotograma, 3 ° fotograma, etc.), vuelve a bajar el tamaño del archivo sin que el espectador pierda una calidad notable. Esto se usa mejor con GIF más largos que tienen una alta velocidad de fotogramas. O puede eliminar marcos duplicados. Este método busca marcos consecutivos muy similares y los elimina / fusiona. Nuevamente, bajando el tamaño del archivo.
- Optimizando la transparencia. Este método funciona tomando el primer fotograma y manteniéndolo en segundo plano. Los cuadros subsiguientes se comparan y aquellos con partes sin cambios tienen las secciones sin cambios hechas transparentes. Esencialmente, esto es como superimponer los bits cambiantes sobre los bits sin cambios. Este método es más complicado, ya que las imágenes de dichas diapositivas de presentación funcionarán mejor porque grandes secciones de cada cuadro son iguales. Si está comprimiendo presentaciones de diapositivas o videos, es probable que vea resultados confusos.
Otra forma de lograr imágenes optimizadas con tiempos de carga más rápidos es mediante la creación de imágenes receptivas. Utilizado con mayor frecuencia en sitios web, este tipo de optimización crea una presentación dinámica donde los elementos se redimensionan en función del dispositivo / pantalla que se utiliza. Por ejemplo, un monitor de escritorio grande recibiría imágenes más grandes y de mayor definición que las que se ven en un teléfono inteligente. La intención de esto es crear la mejor experiencia de usuario para cada tipo de dispositivo. Y eso incluye optimizar el tiempo de carga mediante el uso de imágenes adaptadas a cada tipo de dispositivo. Cambiar el tamaño de la ventana del navegador también redimensionará las imágenes, manteniendo la calidad de visualización sin sacrificar la velocidad de carga. Aquí hay una buena explicación y un ejemplo de imágenes receptivas de Cloudinary para ilustrar el concepto.
Hay muchas herramientas en el mercado. Pruebe algunos y vea cuál funciona mejor para su situación.
