Complementos esenciales de WordPress para trabajar con GIF animados
Una vez limitados a pancartas horteras y parpadeantes con colores de neón y dibujos animados que flotaban a través de ventanas emergentes y encabezados de correo electrónico, los GIF han cambiado para mejor. Con este cambio, llegaron para quedarse, especialmente para los usuarios y desarrolladores de WordPress. Diseñados específicamente para la web, los archivos GIF suelen tener un tamaño pequeño, lo que los hace perfectos para agregar un toque de movimiento a una publicación. De hecho, los GIF animados pueden aportar una refrescante sensación de vida a un artículo o tema que de otro modo sería estático.
Sin embargo, los GIF animados vienen con una buena cantidad de problemas y frustraciones. Dado que los GIF animados se componen de muchos marcos, pueden pasar rápidamente de ser archivos pequeños y discretos a ser algunos de los gráficos más difíciles de manejar en su servidor. Los GIF son conocidos por ralentizar los tiempos de carga en las páginas en las que se utilizan, lo que los convierte en una barrera para el tráfico repetido y en un punto problemático para los webmasters que entienden la importancia de la velocidad en una era de impaciencia.
Luego están todos los problemas específicos de WordPress. WordPress no se creó pensando en los GIF animados, y su resurgimiento ha causado algunos dolores de cabeza a los desarrolladores. Si bien WordPress generalmente cambia el tamaño de las imágenes automáticamente, este proceso rompe las animaciones al mostrar solo el primer cuadro. Además, los GIF animados pueden ser difíciles de usar como imágenes destacadas en WordPress. Pueden interrumpir las fuentes RSS, las campañas de correo electrónico, las visualizaciones de la página principal y las miniaturas.
En la mayoría de los casos, los beneficios aún superan a los negativos. Sin embargo, para que los GIF sean una parte exitosa de su publicación de WordPress, es posible que deba probar algunas técnicas nuevas. Consulte algunos complementos y técnicas imprescindibles para trabajar con GIF animados a continuación.
Básico: haga que su sitio de WordPress sea más rápido
Uno de los principales problemas al usar GIF animados en WordPress es el problema del tiempo de carga. Mantener los tiempos de carga lo más rápido posible es esencial para mantener contentos a sus visitantes y hacer que su sitio web sea lo más efectivo posible.
Según KISSmetrics, el tiempo de carga es un factor importante que contribuye al abandono de la página. Con un tiempo de carga de solo 4 segundos, la tasa de abandono de la página salta al 25 % y se acerca al 50 % a medida que ese tiempo se acerca a los 10 segundos. Además, un retraso de 1 segundo en la respuesta de la página puede resultar en una reducción del 7% en las conversiones.
Esto significa que si un sitio genera $ 100,000 por día, un sitio de comercio electrónico u otro minorista en línea, un retraso de 1 segundo en la página podría equivaler a $ 2.5 millones en ventas perdidas cada año. También afecta directamente la satisfacción del cliente. Un retraso de 1 segundo reduce la satisfacción del cliente en un 16 %. Sus clientes quieren que su sitio funcione con poco o ningún retraso.
Debido a que los GIF se pueden usar para aumentar la satisfacción del usuario, esto se vuelve aún más problemático. Tal vez use un GIF animado para ilustrar cómo funciona un producto, como es el caso de esta trampa para animales a continuación. El GIF es simplemente la forma más rápida y sencilla de explicar el mecanismo de colocación y liberación de la trampa.
Incluso fuera de los sitios de comercio electrónico, los GIF se pueden usar para ilustrar puntos específicos, agregar humor a un tema que de otro modo sería aburrido o aumentar la sensación de interacción del usuario. Pueden ser una excelente manera de vincular un concepto desconocido con uno familiar, utilizando la cultura pop como conexión. Por ejemplo, los blogs de WebpageFX para una audiencia de propietarios de negocios, que pueden o no estar familiarizados con términos como "metapalabras clave" y "relleno de palabras clave". Estas prácticas están desactualizadas y son completamente ineficaces, pero en lugar de decir esto, mostraron cuán (in)efectivas serían con un GIF animado.
Obviamente, los GIF son excelentes para aumentar la comprensión o simplemente traer una sonrisa a la cara del lector, pero esto crea un dilema directo. A pesar de sus aspectos positivos inherentes, estos archivos pueden ser bastante grandes y los tiempos de carga lentos pueden generar pérdidas de ganancias y niveles de tráfico más bajos con el tiempo. Si los GIF son importantes para usted y su blog, es fundamental eliminar los problemas que provocan retrasos y tiempos de carga lentos. Los complementos a continuación pueden ayudar a reducir el tamaño de los archivos y mejorar las experiencias de carga, sin sacrificar sus animaciones o su calidad.
WP Smush.es
Ampliamente utilizado y disponible para desarrolladores de todos los niveles, WP Smush.it viene con las funciones necesarias para optimizar las imágenes de una manera que reduce los tiempos de carga y mantiene satisfechos a los usuarios finales. El complemento está diseñado para:
- Optimizar la compresión JPEG
- Convierta algunos GIF estáticos en PNG indexados
- Elimina los colores no utilizados de las imágenes indexadas
- Eliminar metadatos innecesarios de las imágenes
- Haga que los GIF animados sean más eficientes eliminando los píxeles que permanecen iguales en todos los marcos
A diferencia de otros complementos de compresión de imágenes, que rompen los GIF animados de la misma manera que lo hace WordPress, WP Smush.it incluye específicamente técnicas de optimización para GIF animados.
Las imágenes que los usuarios de back-end y los administradores agregan a las páginas se ejecutan automáticamente a través del complemento al momento de la carga. Lo que esto significa es que no tiene que cambiar su proceso en absoluto para tener una experiencia de usuario mejorada. ¡No hay nada mejor que eso! Los usuarios preocupados por cómo las imágenes existentes afectan los tiempos de carga también pueden usar el complemento para escanear el contenido existente. WP Smush.it es fácil de instalar y fácil de usar.
Cualquier complemento de carga diferida
Otra opción para optimizar los tiempos de carga al incorporar GIF es usar un complemento de carga diferida. Estos complementos están diseñados pensando en los usuarios. En lugar de esperar a que se cargue una página completa, lo que ralentiza los tiempos y genera frustración, los complementos de carga diferida cargan solo el contenido que está actualmente visible en la pantalla del visitante. La carga diferida acelera los sitios con muchas imágenes y puede ser una forma efectiva de mantener contentos a sus visitantes.
Existen muchas opciones gratuitas que simplifican la carga diferida. Incluyen, pero no se limitan a:
- Lazy Load: Lazy Load utiliza jQUery.sonar para cargar solo imágenes visibles. Fue escrito por el equipo VIP de WordPress y recibe constantemente altas clasificaciones de los usuarios.
- Image Lazy Load: diseñado como una versión liviana del Lazy Load original, Image Lazy Load (Unveil.js) brinda soporte para imágenes de alta resolución en dispositivos con pantallas retina.
- BJ Lazy Load: BJ Lazy Load reemplaza las imágenes de publicación incrustadas con marcadores de posición y carga el contenido justo antes de que sea visible para los usuarios finales durante el desplazamiento.
- Rocket Lazy Load: Rocket Lazy Load está diseñado como un script pequeño (menos de 2 kb) que muestra todas las imágenes de la página: widgets, incrustaciones, miniaturas, avatares y más, mientras se desplaza. Es más conocido por su pequeño tamaño.
Intermedio: instale algunos complementos de animación convenientes
Una vez que haya dominado los tiempos de carga y la velocidad, es hora de pasar a algo un poco más avanzado, pero aún factible para la mayoría de los usuarios generales de WordPress. Estos complementos de animación hacen que los GIF existentes sean más fáciles de usar e incluso más atractivos. Los convenientes complementos de animación que se enumeran a continuación mejoran la capacidad de WordPress para mostrar GIF.
Cambio de tamaño de GIF animado
El cambio de tamaño de GIF animado corrige la función de cambio de tamaño automático de WordPress para que pueda cambiar el tamaño de los GIF animados sin romper la animación. Esto elimina el problema frecuente de WordPress que muestra el primer cuadro de un GIF animado sin nada más.
giphypress
Cualquiera que haya trabajado con frecuencia con GIF animados probablemente esté familiarizado con Giphy, un archivo de GIF animado que permite a los usuarios buscar por etiqueta y encontrar GIF relevantes para casi cualquier tema. Giphypress facilita la inserción de archivos Giphy en su sitio: solo use el botón agregado por el complemento para buscar la imagen perfecta y haga clic en "Incrustar en la publicación".
Vista previa de animación GIF
La vista previa de animación GIF busca y encuentra cualquier lugar donde haya usado un GIF animado en su sitio de WordPress y lo reemplaza con imágenes de vista previa. Independientemente de dónde se originó el GIF (las fuentes de imagen en el sitio o fuera del sitio funcionan), el complemento usa el primer cuadro de animación para generar una vista previa. Luego, los visitantes del sitio tienen la opción de hacer clic en reproducir para ver el resto de la animación o continuar sin ver la animación.
Esta es una excelente manera de disminuir los tiempos de carga de las páginas de su sitio, especialmente si optó por no usar un complemento de carga diferida: en lugar de tener que cargar cada cuadro de cada GIF animado en la página, los visitantes solo necesitan cargar el primer cuadro. Este tipo de funcionalidad es utilizada por grandes sitios web como BuzzFeed, especialmente para los visitantes móviles, que tienen más razones para ser selectivos con respecto a los datos que eligen descargar.
Avanzado: haz cosas geniales con GIF animados
Estos complementos y técnicas son un poco más difíciles de configurar, pero son bastante poderosos. Siga leyendo para aprender cómo configurar un GIF como su imagen destacada (algo que estamos viendo cada vez más en sitios como BuzzFeed, Mashable y TechCrunch) y cómo convertir una serie de archivos de imagen separados en una secuencia animada directamente en su sitio.
Establecer un GIF animado como imagen destacada
En su mayor parte, los diseñadores y desarrolladores web se han visto limitados, especialmente en WordPress, al intentar establecer un GIF animado como imagen destacada. Dado que WordPress crea automáticamente una imagen en miniatura a partir de la imagen destacada que proporciona, rompiendo los GIF animados, puede ser realmente difícil de lograr. Sin embargo, eso no significa que sea imposible.
Una forma de evitar el retraso es insertar la URL de la imagen en el cuadro de la imagen destacada, en lugar de descargar y cargar un gráfico desde su computadora o en algún lugar de la web. Esto es impredecible.
Otra opción (quizás menos que ideal, pero aún viable para aquellos que están bien versados en el desarrollo de WordPress) es cambiar el formato de la imagen destacada de "destacado" a "completo" dentro del archivo de índice del tema. Esto permite que la imagen destacada obtenga gifs animados originales y sin distorsiones. Esto requiere la voluntad de hacer un poco de codificación, y tiene la desventaja de que se aplica a todas las imágenes destacadas, por lo que deberá comenzar a dimensionarlas manualmente al ancho y alto adecuados.
No tiene que ser complicado. De hecho, también existen complementos para facilitar el proceso. Autoset Featured Image y Automatic Featured Image Posts son dos complementos (elija uno) que configuran automáticamente la primera imagen, independientemente de su formato, como la imagen destacada. Esto significa que si su primera imagen que se muestra dentro de una publicación es un GIF animado, se convertirá en la imagen destacada. Sin embargo, esta solución tiene otras desventajas, a saber, que siempre tendrá que ser exigente con la imagen que coloca en la parte superior de sus publicaciones.
Imágenes animadas automáticamente
El complemento Auto Animate Image permite a los usuarios incrustar animaciones creadas a partir de una serie de archivos separados, en lugar de un GIF animado estándar. Se puede usar para sortear el máximo de 256 colores de los GIF animados, lo que permite una sensación más natural y fluida. En el lado negativo, es fácil crear algo que ralentice enormemente su sitio, por lo que usar este complemento requiere algo de delicadeza.
El complemento no solo muestra múltiples imágenes, de lo contrario, imágenes sin movimiento, continuamente, como una animación, también admite nombres de archivo arbitrarios, no se requiere estándar. Esto significa que GIF, PNG, JPEG, JPEG XR, y otras opciones de fotos HD, BMP, TIFF, WebP y SVG, se pueden usar indistintamente para crear algo nuevo y completamente original. Las animaciones creadas con Auto Animate Image se pueden configurar en retraso, repetición, rebobinado, pausa e incluso en blanco, lo que genera más opciones que un GIF estándar. Elimina la necesidad de escribir JavaScript, pero se puede controlar con él si se desea. El complemento es compatible con la mayoría de los navegadores, por lo que no debe preocuparse por las diferentes experiencias de los usuarios finales.
Se trata de hacer felices a sus visitantes
Los GIF están de vuelta. Muchos dirían que han regresado de entre los muertos. Sin embargo, en lugar de las viejas animaciones de mal gusto que solían ser, ahora son aspectos integrales de diseños web limpios, sólidos y efectivos. Sin embargo, cuando se trabaja en WordPress, pueden ser más que problemáticos.
Comience por el principio, en el nivel básico. Tómese el tiempo para buscar complementos para aumentar la velocidad de carga, encuentre con qué se siente cómodo y pruebe cómo disminuyen los tiempos. A partir de ahí, trabaje en complementos de animación más avanzados. Entonces, sé creativo. Salga de la rutina de los GIF animados "estándar" creando sus propias animaciones a partir de imágenes estáticas y asegurándose de que sus GIF animados se puedan configurar como imágenes destacadas.
Un GIF animado no tiene que causar frustración, negatividad o temidas horas frente a la pantalla de la computadora, tratando de hacer que sus páginas se carguen más rápido o se muestren correctamente. Están destinados a ser divertidos, y los complementos y las opciones descritos anteriormente los mantienen así.