Cómo crear una animación GIF y agregarla a HTML
Última actualización el 22 de noviembre de 2023 by Peter Wood
En el mundo en constante evolución del diseño web y la creación de contenido, la capacidad de incorporar imágenes y animaciones llamativas en las páginas web es una habilidad valiosa. Los GIF son una de las formas de animación más atractivas y utilizadas en Internet. Ya sea que desee agregar humor, crear elementos interactivos o simplemente mejorar el atractivo visual de su sitio web, saber cómo agregar GIF a HTML es una habilidad esencial para cualquier desarrollador web o creador de contenido. En esta guía de muestra, se le guiarán por los pasos para realizar sin problemas integrar GIF en código HTML para que puedas darle vida a tu contenido web.
Parte 1: Cómo crear una animación GIF para agregarla en HTML
Antes de agregar animación GIF a HTML, primero necesita una animación GIF. Si encuentra una animación GIF muy adecuada en el sitio web, puede guardar directamente su enlace para su uso posterior, pero si no encuentra una animación GIF adecuada, puede crear una animación GIF usted mismo para agregarla al sitio web. WidsMob GIF es un creador y editor de animaciones GIF que te permite crear cualquier animación GIF que desees a través de archivos de vídeo e imagen.
1. Importe MP4, MKV, WEBM, MPEG y muchos otros tipos de archivos de video.
2. Personaliza el contenido de la animación GIF y obtén una vista previa al instante.
3. Ajuste la configuración HSL de la animación GIF para obtener la mejor experiencia de visualización.
4. Agregue texto a la animación GIF para obtener una explicación auxiliar.
Paso 1: Descarga e instala WidsMob GIF en tu ordenador. Después de una instalación exitosa, inicie el software. Haga clic en el Vídeo a GIF en la página de inicio del software, seleccione el archivo de video en el cuadro de diálogo emergente e impórtelo al software. Una vez que el video se importe correctamente, la animación GIF se generará automáticamente y comenzará a reproducirse.
Paso 2: El contenido del vídeo será cada vez un poco complicado, por lo que puedes considerar volver a seleccionar el contenido de la animación GIF. Hay una línea de tiempo debajo del cuadro de vista previa de la animación GIF. Puede determinar el contenido de la animación GIF a través de los cuadros de selección en ambos extremos de la línea de tiempo, o ingresar la hora de inicio y la hora de reproducción de la animación GIF en ambos extremos. Haga clic en el Jugar icono para obtener una vista previa de la reproducción de la animación GIF.
Paso 3: Haz clic en el botón Ajuste de vídeo botón. En el área de edición de la derecha, aparecerán 3 opciones para que ajuste el HSL de la animación GIF. Ajuste el control deslizante de Comparación y observe los cambios en tiempo real de la animación GIF a la izquierda. Si desea obtener la mejor experiencia de visualización, debe cooperar directamente con las otras dos opciones.
Paso 4: Para la animación GIF agregada en HTML, es posible que necesite agregar texto para ayudar con la explicación. Haga clic en el Añadir texto en la esquina superior derecha del cuadro de vista previa, ingrese texto en el cuadro de diálogo emergente y establezca el color del texto, la fuente, el tamaño, etc. Haga clic en el OK y el texto se agrega oficialmente a la animación GIF.
Paso 5: Seleccione directamente el texto en la animación GIF y arrástrelo para modificar la posición del texto en la animación GIF. Para animaciones GIF en HTML, puede ajustar el control deslizante de Calidad in Configuración de GIF para obtener una animación GIF de alta calidad. Después de editar, haga clic en el Exportar GIF para exportar la animación GIF e insertarla en HTML.
Parte 2: Cómo agregar GIF animado en HTML
Ahora que tiene una animación GIF, lo siguiente que debe hacer es agregar correctamente la animación GIF al archivo HTML para asegurarse de que se pueda reproducir sin problemas en la Web. Sin embargo, la configuración de visualización de diferentes navegadores web puede ser diferente y debes seguir intentando garantizar la mejor experiencia de visualización.
Paso 1: Asegúrese de que su archivo de animación GIF esté ubicado en el mismo archivo de directorio que el código HTML. Para abrir el archivo HTML, puede elegir un editor de texto o un entorno de desarrollo integrado. Encuentre el código en su código que necesita insertar una animación GIF. Generalmente se utiliza el etiqueta para insertar animación GIF.
Paso 2: Agregue src a img para especificar la ruta de almacenamiento del archivo de animación GIF. La ruta relativa es la dirección del archivo almacenado en el mismo directorio que el HTML. No olvides escribir el nombre y formato de la animación GIF. Las rutas absolutas le permiten agregar GIF animados cargados en el sitio web.
Paso 3: En el atributo img, puede configurar el atributo alt, que puede proporcionar una breve descripción de la animación GIF. Cuando la animación GIF no se carga, se mostrará el texto para obtener ayuda.
Paso 4: Dependiendo de la configuración de visualización de la Web, es posible que necesite ajustar el ancho y el alto. HTML contiene esta función de atributo.
Paso 5: Guarde el archivo HTML con la animación GIF agregada y podrá abrirlo en un navegador web para poder obtener una vista previa de la animación GIF que se reproduce en la página web. Los GIF animados deberían reproducirse automáticamente en la mayoría de los navegadores sin necesidad de código adicional.
Parte 3. Preguntas frecuentes sobre GIF a HTML
Conclusión
Ya has aprendido cómo agregar GIF a HTML y esperamos que esta guía te ayude a mejorar tu contenido web y atraer a tu audiencia con animaciones atractivas. La web es un espacio dinámico y la posibilidad de incluir GIF abre un mundo de posibilidades creativas. Ya sea que utilice GIF para entretenimiento, educación o para mejorar la experiencia del usuario, recuerde mantener sus animaciones relevantes, con rendimiento optimizado y coherentes con el diseño general de su sitio.