Revisión de Quicq: optimización de imágenes de WordPress en tiempo real
Publicado: 2022-02-14¿Sabía que, en promedio, las imágenes representan aproximadamente la mitad del tamaño de archivo de una página web promedio?
Eso significa que, si está utilizando imágenes no optimizadas, esas imágenes podrían tener un gran efecto negativo en los tiempos de carga de su sitio web.
Quicq es un servicio de Afosto que le permite optimizar completamente las imágenes de su sitio en tiempo real y servirlas desde una red de entrega de contenido (CDN) con tecnología de Google Cloud. Más allá del rendimiento, también puede usarlo para manipular imágenes fácilmente, como recortarlas, agregar marcas de agua y más.
Funciona con WordPress a través de un complemento de integración dedicado, así como con otras plataformas como Magento y PrestaShop.
En nuestra revisión práctica de Quicq, le mostraremos cómo funciona Quicq y cómo puede usarlo para optimizar las imágenes de su sitio de WordPress.
Vamos a profundizar en…
Revisión de Quicq: Qué hace el complemento
En un alto nivel, Quicq se enfoca en ofrecer una solución completa para la optimización de imágenes de WordPress. Es básicamente una herramienta plug-and-play que le permite beneficiarse de todas las tácticas importantes de optimización de imágenes, más sobre las siguientes.
Hay dos tácticas "principales" en las que la mayoría de la gente piensa cuando se trata de la optimización de imágenes:
- Cambiar el tamaño : cambiar el tamaño de las dimensiones reales de la imagen para que coincida con la forma en que la usará en su sitio. Las dimensiones más pequeñas significan menos datos, lo que significa un tamaño de imagen más pequeño.
- Compresión : uso de un algoritmo de compresión para reducir el tamaño del archivo de la imagen sin cambiar sus dimensiones, ya sea a través de un algoritmo sin pérdida ( sin cambios en la calidad ) o un algoritmo con pérdida ( tal vez una pequeña reducción en la calidad ).
Quicq ciertamente puede implementar esas tácticas para usted, pero también es una de las nuevas generaciones de complementos de optimización de imágenes que van más allá de simplemente cambiar el tamaño y comprimir estáticamente sus imágenes.
En su lugar, sirve automáticamente sus imágenes desde su CDN con Google Cloud y luego las optimiza en tiempo real para los visitantes.
Tan pronto como active Quicq en su sitio, optimizará automáticamente todas sus imágenes con las siguientes optimizaciones:
- Servirlos a través de Quicq CDN, que funciona con Google Cloud. Esto permite a los visitantes descargar sus imágenes desde la ubicación de CDN más cercana a ellos.
- Cambie su tamaño al tamaño óptimo según el dispositivo de cada visitante.
- Comprímalos para reducir su tamaño de archivo.
- Conviértalos a un formato de imagen optimizado que ofrezca tamaños más pequeños que JPEG y PNG. Quicq es compatible con WebP y AVIF, un formato de imagen más nuevo que puede ofrecer tamaños de archivo incluso más pequeños que WebP. La compatibilidad con AVIF es notable, ya que no todos los servicios admiten este nuevo formato de imagen todavía.
Todos estos cambios conducirán a tiempos de carga de imágenes mucho más rápidos (y, en consecuencia, tiempos de carga del sitio web).
¿Por qué utilizar la optimización dinámica de imágenes en tiempo real?
Como mencioné anteriormente, Quicq utiliza un enfoque de optimización dinámica que optimiza las imágenes en tiempo real.
Es decir, en lugar de optimizar la versión original de la imagen en el servidor de su sitio de WordPress como un complemento de optimización tradicional, Quicq no toca la imagen original sino que realiza sus operaciones en "la nube".
Hay algunas ventajas en este enfoque de optimización dinámica.
El más importante es que puede asegurarse de que cada visitante vea una imagen optimizada en función de las dimensiones reales de su dispositivo.
Por ejemplo, si un visitante está navegando en la pantalla de un teléfono inteligente de baja resolución, puede mostrar una imagen con dimensiones pequeñas sin afectar su experiencia.
Pero si un visitante está navegando en una pantalla enorme de 4K, su sitio puede mostrar sin problemas una versión más grande de la imagen para asegurarse de que también tenga una excelente experiencia de usuario.
Debido a que Quicq utiliza un enfoque de optimización dinámico y sobre la marcha, puede ofrecer el formato y el tamaño de imagen óptimos para cada usuario individual.
Este enfoque dinámico también es muy útil si desea manipular sus imágenes porque puede realizar cambios en la imagen sin necesidad de editar el archivo de imagen original o cargar una nueva versión de la imagen.
Por ejemplo, simplemente manipulando la URL de una imagen, puede realizar las siguientes manipulaciones:
- Recorta la imagen de diferentes maneras.
- Agrega una marca de agua.
- Desenfoca la imagen.
- Cambia las dimensiones de la imagen.
- Ajuste la calidad de la imagen. Por ejemplo, tal vez desee utilizar una imagen sin comprimir de alta resolución en algunos lugares. Puedes hacer eso fácilmente.
- Utilice un formato de imagen diferente. Por ejemplo, WebP o AVIF.
Con Quicq, todo lo que hace es cargar la imagen original una vez. Luego, puede realizar todas estas manipulaciones agregando algunos parámetros de consulta adicionales a la URL.
Por ejemplo, aquí está el enlace a la imagen original:
https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg
Y aquí hay un enlace que recorta la imagen a un cuadrado de 1000 × 1000:
https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg?w=1000&h=1000&c=1
Te mostraré algunos ejemplos reales en la siguiente sección.
Práctica con Quicq: cómo optimizar las imágenes de WordPress
Ahora que sabe lo que hace Quicq, practiquemos y le mostraré cómo funciona en WordPress.
Nuevamente, no se limita a WordPress, pero ofrece un complemento de WordPress dedicado que lo hace muy fácil de usar con su sitio de WordPress.
1. Regístrese para obtener una cuenta gratuita de Quicq
Para comenzar, deberá registrarse para obtener una cuenta gratuita de Quicq/Afosto. Hablaré sobre los precios a continuación, pero hay un generoso plan gratuito para siempre y también obtienes una prueba gratuita ilimitada de 14 días (sin necesidad de tarjeta de crédito).
Una vez que se registre en su cuenta, haga clic en el botón Iniciar prueba gratuita junto a Quicq en el panel de control de Afosto:
2. Cree una CDN Quicq
A continuación, debe crear un CDN de Quicq, que es esencialmente lo que servirá y optimizará las imágenes para su sitio.
Una vez que inicie su prueba de Quicq, debería aparecer automáticamente una tarea para hacerlo en la lista de tareas del panel principal de Afosto. Si no lo ve, también puede acceder a esta interfaz haciendo clic en el ícono de ajustes junto a Quicq:
Primero, deberá ingresar la URL que desea usar para su Quicq CDN. Sus imágenes se cargarán desde esta URL, por lo que querrá relacionarlas con su sitio web.
Por ejemplo, si estuviera creando uno para WP Mayor, haría la URL wpmayor .
Luego, ingrese la URL directa a una imagen existente en su sitio y haga clic en Validar sitio web:
Luego, Quicq debería detectar automáticamente que está usando WordPress y generar la ruta a sus imágenes, que debería ser la carpeta de carga dentro de la carpeta wp-content .
También tiene la opción de expandir la Configuración avanzada , que le permite controlar el comportamiento de la memoria caché para sus imágenes. El valor predeterminado es 365 días, lo que debería estar bien. Pero puede cambiar esto si lo desea.
Para finalizar, haga clic en el botón Agregar :
3. Instale el complemento Quicq y agregue la clave de URL
Una vez que haya creado su cuenta y configurado su CDN, puede instalar el complemento Quicq gratuito de WordPress.org en su sitio. Esto le permitirá integrar su sitio de WordPress con la imagen CDN que acaba de crear.
Una vez que haya activado el complemento, vaya a la nueva área de Quicq en su panel de control de WordPress y agregue la clave de URL que ingresó en el proceso de configuración. Es decir, la parte de la URL de CDN que pudo personalizar.
Para mi ejemplo, eso es wpmayor .
Luego, seleccione el botón Activar Quicq y luego Guardar cambios para activarlo:
¡Y eso es! Su sitio de WordPress ahora debería comenzar a cargar sus imágenes a través de Quicq CDN, que incluye optimizaciones de imágenes en tiempo real.
Una cosa menor que señalaría aquí es que no creo que el área del complemento de Quicq deba ser un área de menú de nivel superior en el tablero de WordPress. Dado que es solo un proceso de configuración único, creo que sería mejor moverlo a un submenú como Configuración → Quicq para ayudar a los usuarios a tener un área de administración más limpia.
4. Manipular imágenes con parámetros de URL (cuando sea necesario)
Para la mayoría de los sitios de WordPress, no necesita hacer nada más para tener imágenes optimizadas. En este punto, Quicq ya está realizando automáticamente las siguientes optimizaciones:
- Comprimir/redimensionar las imágenes de forma óptima en función del dispositivo de cada usuario.
- Convertir las imágenes al formato WebP o AVIF según lo que funcione mejor.
- Servir las imágenes a través de Google Cloud CDN de Quicq.
Sin embargo, como mencioné anteriormente, una de las cosas interesantes del enfoque en tiempo real de Quicq es que también puede manipular sus imágenes simplemente agregando algunos parámetros de consulta a la URL.
Puede consultar la página de documentación aquí para obtener una vista detallada, pero repasemos algunos ejemplos rápidos de cómo funciona esto.
Digamos que tiene una imagen ancha que usa en una parte de su sitio. Ahora, desea usar esa misma imagen, pero recortarla en una imagen cuadrada.
Sin Quicq, necesitaría abrir su herramienta de edición de imágenes favorita, recortar la imagen y luego cargar una nueva copia de la imagen recortada para usar.
Con el procesamiento de imágenes en tiempo real de Quicq, puede realizar el recorte simplemente agregando un parámetro de URL ( y sin afectar la imagen original ).
Aquí está la imagen original y la URL:
Y luego, así es como se ve la imagen cuando se recorta a un cuadrado de 1000 × 1000 px al agregar este parámetro de URL: ?w=1000&h=1000&c=1 :
Aquí hay otro ejemplo...
Digamos que quiere ir un paso más allá y desenfocar la imagen, además de recortarla en un cuadrado.
Todo lo que necesita hacer es agregar el parámetro de desenfoque y establecer cuánto desenfoque desea usar (de 0 a 3) y su imagen se verá borrosa:
Precios rápidos
Quicq tiene un plan gratuito para siempre bastante generoso y luego planes de pago para los usuarios que necesitan más funciones.
El plan gratuito le permite optimizar hasta 100 000 imágenes por mes* y servir 25 GB de ancho de banda de CDN por mes para siempre, lo que debería ser más que suficiente para un sitio pequeño. Por ejemplo, si tiene un sitio básico de folleto/portafolio o un pequeño blog, no creo que lo supere nunca.
*Recuerde, las optimizaciones de imágenes ocurren dinámicamente en lugar de una vez como un complemento tradicional, por lo que una imagen cuenta como una optimización cada vez que se carga.
Si necesita los planes pagos, se le factura en función de dos métricas:
- Optimizaciones : la cantidad de optimizaciones de imágenes que tiene por mes.
- Transferencia de datos : la cantidad de ancho de banda que consumen sus imágenes cuando se sirven a través de la CDN.
Esta estrategia de facturación es un poco más compleja que algunos otros complementos de optimización de imágenes en tiempo real, que generalmente solo le facturan en función de la cantidad de visitas que tiene su sitio por mes.
Sin embargo, en realidad me gusta más este modelo de facturación porque creo que es una forma más justa de facturación, incluso si hace que sea un poco más difícil estimar su uso.
Con este enfoque, solo se le facturará en función de su uso real, lo que probablemente lo ayudará a ahorrar dinero.
Para saber cuánto pagará, puede usar la calculadora en la página de precios.
Si no está seguro sobre el uso de su sitio, puede usar el nivel gratuito para comenzar o también hay una prueba gratuita de 14 días de los planes de mayor uso, lo que le dará una buena comprensión del uso de su sitio:
Si necesita los planes premium, puede obtener un 20% de descuento en sus primeros dos meses en todos los paquetes con nuestro código de cupón exclusivo:
Reflexiones finales sobre Quicq
En general, sé que muchos sitios se están moviendo hacia este enfoque de optimización de imágenes en tiempo real.
Creo que este enfoque tiene mucho que ofrecer debido a la flexibilidad que le brinda en términos de manipular sus imágenes y asegurarse de que cada visitante vea una imagen optimizada para su situación única.
Quicq no es el primer complemento que trae esto a WordPress, pero tiene algunas cosas a su favor:
- Tiene un nivel gratuito muy generoso. Tiene el nivel gratuito más alto que he visto.
- Me gusta su modelo de precios para las opciones premium porque solo paga en función de su uso real. Si bien hace que la fijación de precios sea un poco más complicada, creo que es una forma "más justa" de facturar. Además, siempre puede usar la prueba ilimitada de 14 días para calcular el uso real de su sitio si no está seguro de lo que pagará.
- Todavía le permite realizar otras manipulaciones de imágenes como recortar, desenfocar, etc. La mayoría de los otros complementos de WordPress que conozco solo se enfocan en el rendimiento o solo le dan acceso a la marca de agua, por lo que es genial que Quicq vaya más allá de eso. La mayoría de los usuarios ocasionales probablemente no los usarán, pero es bueno para usuarios avanzados y desarrolladores.
Si desea probarlo, Quicq tiene un generoso plan gratuito para siempre, así como una prueba gratuita ilimitada de 14 días para ayudarlo a determinar su uso. Puede hacer clic en los botones a continuación para comenzar: