Encontraste el GIF animado perfecto para dar vida a tu publicación de blog. Pero cuando lo agregas a WordPress, solo aparece como una imagen plana y aburrida, sin la animación que querías.
Es un problema frustrantemente común. Esto sucede porque WordPress a veces solo guarda el primer fotograma del GIF al crear diferentes tamaños de imagen.
Afortunadamente, hay un truco sencillo para solucionar esto. En esta guía, te mostraremos la forma correcta de agregar GIFs animados para que siempre funcionen perfectamente.
¿Por qué los GIFs de WordPress no funcionan correctamente?
A veces, las animaciones GIF se convierten en imágenes estáticas en WordPress porque genera automáticamente varios tamaños de la imagen, pero solo a partir del primer fotograma de la animación.
¿Por qué sucede eso?
Cada vez que agregas cualquier tipo de imagen a tu sitio web de WordPress usando el cargador de medios, WordPress crea automáticamente varias copias de esa imagen en diferentes tamaños.
Hay 3 tamaños de imagen de WordPress predeterminados que se generan automáticamente: miniatura, mediano y grande. WordPress también conserva tu carga original, que puedes seleccionar eligiendo la opción 'Tamaño completo'.
Sin embargo, al crear nuevos tamaños de imagen para GIFs animados, WordPress termina guardando solo el primer fotograma del archivo GIF.
Como resultado, cuando agregas cualquiera de esos tamaños de imagen generados a tu publicación o página, serán imágenes estáticas y el GIF de WordPress no funcionará.
Ahora, veamos la forma correcta de agregar GIFs animados en WordPress para que conserven su animación.
Agregar GIFs animados correctamente en WordPress
Primero, necesitas editar o crear una nueva entrada o página de WordPress en el editor Gutenberg de WordPress para agregar el GIF animado.
Una vez que estés en el editor de contenido de WordPress, haz clic en el botón '+' y agrega un bloque de Imagen.
A continuación, encontrarás varias formas de subir tu GIF animado en el bloque de Imagen.
Para empezar, simplemente haz clic en el botón 'Subir' y selecciona tu GIF animado desde tu computadora. O puedes hacer clic en el botón 'Biblioteca de medios' y agregar archivos multimedia que ya se hayan subido a tu biblioteca de medios.
También hay una opción para ingresar el enlace de tu GIF haciendo clic en el botón 'Insertar desde URL', pero no recomendamos esto porque no sube la imagen a tu sitio web.
Una vez que subas tu GIF, el editor de bloques lo insertará en tu contenido y podrás personalizarlo.
Después de agregar el GIF, deberás seleccionar la opción 'Tamaño completo' en 'Tamaño de imagen' del menú de la derecha.
Es importante seleccionar 'Tamaño completo' porque esto le indica a WordPress que use el GIF animado original y sin modificar que subiste. Los otros tamaños (como mediano o miniatura) son copias estáticas que WordPress creó a partir del primer fotograma de la animación, por eso no se mueven. Al elegir 'Tamaño completo', te aseguras de que la animación funcione correctamente. 👍
Podrás ver la animación de inmediato en el editor de contenido.
Continúa y publica o actualiza tu entrada de blog para ver los GIFs animados en acción.
Consejos adicionales para usar GIFs animados en WordPress
Las imágenes GIF animadas suelen ser de mayor tamaño que otros archivos de imagen. Esto se debe a que contienen varias imágenes comprimidas que se usan como fotogramas para crear la animación.
Usar GIFs grandes o agregar demasiadas imágenes GIF en una página de WordPress puede ralentizar tu sitio web y afectar tu optimización para motores de búsqueda (SEO). Consulta nuestra guía definitiva sobre cómo mejorar la velocidad y el rendimiento de WordPress para más detalles.
Si usas Giphy.com para encontrar GIFs animados, entonces el plugin GIF Master te puede resultar muy útil. Te permite buscar en la base de datos de Giphy desde tu panel de WordPress y agregar GIFs sin salir de tu sitio de WordPress.
De manera similar, también puedes usar EmbedPress para agregar automáticamente GIFs animados y memes de Gfycat. Simplemente ingresa la URL de tu GIF de Gfycat, y el plugin lo incrustará en tu contenido.
Preguntas Frecuentes Sobre los GIFs en WordPress
Aquí tienes respuestas a algunas de las preguntas más comunes que recibimos sobre el uso de GIFs animados en WordPress.
¿Por qué los GIFs animados son tan grandes?
Los GIFs animados son esencialmente una serie de imágenes estáticas, o fotogramas, empaquetados en un solo archivo. Cuantos más fotogramas y colores tenga un GIF, mayor será su tamaño de archivo.
Por eso, a menudo son mucho más grandes que las imágenes JPG o PNG estándar.
¿Cómo puedo optimizar los GIFs para hacerlos más pequeños?
Puedes usar herramientas gratuitas en línea como EZgif o GIMP para optimizar tus GIFs animados antes de subirlos a WordPress. Estas herramientas pueden ayudarte a reducir el tamaño del archivo haciendo cosas como eliminar fotogramas extra o disminuir el número de colores en el GIF, a menudo sin una caída notable en la calidad.
¿Es malo usar muchos GIFs en una sola página?
Sí, agregar demasiados archivos GIF grandes a una sola página puede ralentizar significativamente el tiempo de carga de tu sitio web. Esto puede crear una mala experiencia de usuario e impactar negativamente en tus clasificaciones SEO.
Lo mejor es usarlos con moderación para resaltar puntos clave o agregar interés visual donde más importa.
Recursos Adicionales para la Gestión de tus Medios
Esperamos que esta guía te haya ayudado a agregar correctamente GIFs animados a tu sitio de WordPress. Ahora que dominas los GIFs, es posible que encuentres útiles estos otros artículos sobre gestión de medios.
- Excelentes Plugins de WordPress para Gestionar Imágenes – Descubre herramientas que pueden ayudarte a organizar, optimizar y mostrar tus imágenes de manera más efectiva.
- Por qué nunca deberías subir un video a WordPress – Descubre por qué alojar tus propios videos puede afectar el rendimiento de tu sitio y qué deberías hacer en su lugar.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Derick Melander
Gracias, me estaba volviendo loco.
Soporte de WPBeginner
Glad our guide was helpful!
Administrador
Dana
Gracias por esto. Súper útil y fácil de seguir.
Soporte de WPBeginner
You’re welcome
Administrador
Mike
¿Es mejor incrustar algún código o insertar el gif como describes arriba para la velocidad del sitio? ¿O realmente no impacta nada?
Soporte de WPBeginner
Siempre y cuando el gif esté optimizado, no debería haber un gran impacto en tener el gif subido en tu sitio en lugar de incrustarlo.
Administrador
Evans Mary
Muy agradecido por este conocimiento. Muchas gracias por compartir.
Soporte de WPBeginner
De nada, ¡me alegra que nuestro artículo te haya sido útil!
Administrador
Lise
Esta fue una publicación de blog muy útil.
He estado subiendo gifs a giphy, pero se volvieron borrosos en mi página.
Sin embargo, ahora tengo gifs de alta calidad.
Soporte de WPBeginner
¡Nos alegra que nuestra guía te haya sido útil!
Administrador
Karl Heinz Burkhardt
Esto fue muy útil. Muchas gracias.
Soporte de WPBeginner
¡Nos alegra que nuestra guía te haya sido útil!
Administrador
Melissa
¡Gracias, me salvaste la vida!
Soporte de WPBeginner
You’re welcome, glad our guide could be helpful
Administrador
Alexandre
Doesn’t work for me?
Soporte de WPBeginner
Es posible que desees asegurarte de no tener un plugin de optimización de imágenes que esté intentando modificar el GIF
Administrador
Giron
¿Cómo hacer para iniciar y detener la animación gif haciendo clic con el ratón?
Soporte de WPBeginner
Si bien no tenemos un método recomendado en este momento, ciertamente echaremos un vistazo para una posible adición a este artículo
Administrador
Joy
Gracias, chicos. Esto realmente ayudó.
ed
¿Existen plugins de comentarios de usuarios que permitan a los usuarios agregar gifs?
Brian
¿Alguna idea de cómo agregar fácilmente una publicación con una Live Photo de iOS? ¡Gracias!
Christophe
Hola,
He agregado un gif animado a mi sitio de WordPress siguiendo tu ejemplo. Funcionó, pero ahora el .gif ha desaparecido por completo, incluso de mi Biblioteca de Medios.
¿Alguna idea de dónde podría venir esto?
¡Muchas gracias!
Christopher Eldridge
Hola, en mi caso, el cargador de medios no ofrece la opción de cambiar el tamaño del archivo. ¿Es porque estoy usando la versión gratuita de Wordpress? Si es así, ¿qué versión debo comprar para poder modificar el tamaño del archivo y tener una animación GIF funcionando?
¡Gracias!
Chris
Johnson
Tengo un sitio de blogs automáticos en el que publico en mis redes sociales. No escribo publicaciones, solo subo imágenes y uso los plugins Auto Image Post y Draft Scheduler para automatizarlas.
Administrador, por favor, ¿cómo hago que todos mis GIF subidos se animen automáticamente?
He probado varios complementos pero ninguno funcionó. Agradeceré enormemente su ayuda.
Gracias.
John Mauldin
¡Gran artículo y GRAN OPORTUNIDAD! Acabo de ver y descargar un GIF animado que necesito poner en un sitio de WP. ¡¡Muchas gracias por esta información, wpbeginner.com!
Rakesh kumar
¡¡Muchas gracias!! Fue muy simple y a la vez muy efectivo. La mayoría de nosotros nos perderemos este truco.
Donna Merrill
Hasta donde sé, siempre he escuchado que agregar un GIF ralentizará mi blog. Por eso aún no lo he usado. Sin embargo, tengo algunos sitios de nicho donde tal vez no sea un problema.
Gracias por aclararlo.
-Donna