La velocidad es uno de los factores más importantes cuando se trata de un sitio web exitoso. Las imágenes requieren mucho ancho de banda para cargarse, especialmente si están animadas. Como muchos creadores usan GIF en el diseño de sitios web, tal vez lo ideal sea una forma más eficiente de mostrarlos.
Si bien tiene muchas formas disponibles para acelerar un sitio web de WordPress, una función de clic para cargar GIF ayuda en el rendimiento. Después de todo, desea que los visitantes tengan la mejor experiencia posible.
En este tutorial, le mostraré cómo agregar una función de clic para cargar a los GIF de WordPress.
Usando el reproductor GIF de WP
Hoy, estoy demostrando el complemento WP GIF Player para WordPress. Agrega una función a la pantalla del editor que facilita la adición de animaciones y al mismo tiempo proporciona un nuevo código abreviado para usar en páginas y publicaciones.
Instale y active el complemento «WP GIF Player». Puede encontrarlo fácilmente escribiendo el nombre en el campo de búsqueda de la derecha.
Configuración del reproductor WP GIF
Primero, echemos un vistazo rápido a la configuración de WP GIF Player.
Vaya al área de Configuración y haga clic en «WP GIF Player».
Actualmente, solo tiene una opción que se puede cambiar. Puede elegir configurar el primer cuadro del GIF como su miniatura, usar un GIF como miniatura o evitar configurar una miniatura de publicación con el GIF por completo.
Por ahora, vamos a dejar esto en el valor predeterminado para «No establecer una miniatura de publicación». Esto se debe a que estoy usando la » Imagen destacada » como la miniatura de las publicaciones. En muchos sentidos, esta es simplemente una forma más fácil de promocionar una publicación en WordPress.
Si realiza alguna modificación, haga clic en el botón «Guardar cambios» para confirmar su elección.
Uso de WP GIF Player en publicaciones y páginas
Ahora, agreguemos un GIF animado a una publicación que estamos creando. Vaya a Publicaciones y haga clic en la función «Agregar nuevo».
Asumiré que tiene un GIF listo para colocar en su sitio web. Si no tienes uno, siempre puedes buscar uno en Google. Internet está lleno de lugares donde puedes descargar y usar GIF animados gratuitos.
En el editor de la publicación, verás un nuevo botón en la parte superior. Coloque el cursor en cualquier parte del contenido donde desee que se muestre su imagen. En este ejemplo, lo estoy colocando antes de todo el texto.
Haga clic en el botón «Agregar GIF» al lado de la herramienta de medios.
Cargue el archivo GIF como lo haría con cualquier otra imagen.
Una vez que cargue su imagen, verá un código abreviado en su lugar . Este es el WP GIF Player tomando el control de la imagen. Coincidentemente, puede copiar este código abreviado y usarlo en otras ubicaciones de su sitio web en lugar de hacer clic en el botón «Agregar GIF».
Haga clic en el botón Actualizar o Publicar para publicar la publicación.
NOTA: WP GIF Player ingresa una imagen en todo el ancho de la publicación en algunos temas. No puedo cambiar el tamaño de esto ni siquiera en el propio shortcode. Debido a que WordPress responde naturalmente , esto no afectará demasiado a los visitantes móviles. Sin embargo, degradará la calidad de la imagen si es naturalmente pequeña.
En este caso, estoy usando un GIF de 245 píxeles de ancho que se expande a 600. Como puede ver, la calidad disminuye.
Observe que hay un «GIF» en el centro de la imagen. Esto le dice al visitante que necesita hacer clic para cargar la animación. Cuando se hace clic en el GIF, la animación se carga y se reproduce.
Usando WP GIF Player en un widget
¿Qué sucede si desea agregar un GIF animado a su barra lateral? Ahí es cuando se usa un widget. Desafortunadamente, el complemento WP GIF Player no viene con soporte de botones para widgets. Sin embargo, puede usar fácilmente el código abreviado de la publicación anterior para agregar el GIF a la barra lateral.
Copie el código abreviado en una ubicación segura. Por ejemplo, simplemente lo puse en un archivo de Bloc de notas para poder copiarlo y pegarlo más tarde.
Vaya a Apariencia y haga clic en la función «Widgets».
Desplácese hacia abajo hasta el widget «Texto». Estos estarán en orden alfabético, por lo que puede encontrarlos cerca del final de la lista.
Arrastra y suelta el widget en tu barra lateral. Tendrás un diseño diferente al mío dependiendo del tema que uses. No todos los temas tendrán las mismas barras laterales y funciones.
Pegue el código abreviado en el editor del widget.
Haga clic en el botón «Guardar» en la parte inferior derecha. Esto confirmará el widget en su sitio web inmediatamente.
Como puede ver, WP GIF Player y WordPress se ajustarán al tamaño más pequeño de la barra lateral. Esto significa que no tiene que preocuparse por tratar de hacer coincidir el ancho de la barra lateral para que el gráfico se vea bien en su sitio.
¿Es la carga diferida una buena alternativa?
La carga diferida de imágenes es una muy buena manera de mantener óptima la velocidad de un sitio. Sin embargo, los GIF animados siguen siendo mucho más grandes que otros tipos de imágenes. Cuando una persona se desplaza hacia abajo, el GIF aún requerirá tiempo para descargar la información de la animación. Esto no promueve una buena experiencia para el visitante.
¿Qué tipo de mejoras de imagen ha realizado en su sitio web de WordPress? ¿Con qué frecuencia usa GIF para acentuar su contenido?