Quicq Review : Optimisation des images WordPress en temps réel
Publié: 2022-02-14Saviez-vous qu'en moyenne, les images représentent environ la moitié de la taille de fichier d'une page Web moyenne ?
Cela signifie que si vous utilisez des images non optimisées, ces images pourraient avoir un effet négatif considérable sur les temps de chargement de votre site Web.
Quicq est un service d'Afosto qui vous permet d'optimiser pleinement les images de votre site en temps réel et de les diffuser à partir d'un réseau de diffusion de contenu (CDN) alimenté par Google Cloud. Au-delà des performances, vous pouvez également l'utiliser pour manipuler facilement des images, telles que les recadrer, ajouter des filigranes, etc.
Il fonctionne avec WordPress via un plugin d'intégration dédié ainsi qu'avec d'autres plateformes telles que Magento et PrestaShop.
Dans notre examen pratique de Quicq, nous vous montrerons comment fonctionne Quicq et comment vous pouvez l'utiliser pour optimiser les images de votre site WordPress.
Creusons…
Examen rapide : ce que fait le plugin
À un niveau élevé, Quicq se concentre sur l'offre d'une solution complète pour l'optimisation des images WordPress. Il s'agit essentiellement d'un outil plug-and-play qui vous permet de bénéficier de toutes les tactiques d'optimisation d'image importantes - plus d'informations sur celles ci-dessous.
Il existe deux tactiques "principales" auxquelles la plupart des gens pensent lorsqu'il s'agit d'optimiser l'image :
- Redimensionnement - redimensionner les dimensions réelles de l'image pour correspondre à la façon dont vous allez l'utiliser sur votre site. Des dimensions plus petites signifient moins de données, ce qui signifie une taille d'image plus petite.
- Compression - utilisation d'un algorithme de compression pour réduire la taille du fichier de l'image sans modifier ses dimensions, soit via un algorithme sans perte ( pas de changement de qualité ) ou un algorithme avec perte ( peut-être une petite réduction de la qualité ).
Quicq peut certainement mettre en œuvre ces tactiques pour vous, mais c'est aussi l'une des nouvelles races de plugins d'optimisation d'image qui vont au- delà du simple redimensionnement et de la compression statique de vos images.
Au lieu de cela, il diffuse automatiquement vos images à partir de son CDN alimenté par Google Cloud, puis les optimise en temps réel pour les visiteurs.
Dès que vous activez Quicq sur votre site, il optimisera automatiquement toutes vos images avec les optimisations suivantes :
- Servez-les via le CDN Quicq, qui est alimenté par Google Cloud. Cela permet aux visiteurs de télécharger vos images à partir de l'emplacement CDN le plus proche d'eux.
- Redimensionnez-les à la taille optimale en fonction de l'appareil de chaque visiteur.
- Compressez-les pour réduire leur taille de fichier.
- Convertissez-les dans un format d'image optimisé qui offre des tailles plus petites que JPEG et PNG. Quicq prend en charge WebP et AVIF, un format d'image plus récent qui peut offrir des tailles de fichiers encore plus petites que WebP. La prise en charge d'AVIF est remarquable car tous les services ne prennent pas encore en charge ce nouveau format d'image.
Tous ces changements entraîneront des temps de chargement des images beaucoup plus rapides (et, par conséquent, des temps de chargement du site Web).
Pourquoi utiliser l'optimisation dynamique des images en temps réel ?
Comme je l'ai mentionné ci-dessus, Quicq utilise une approche d'optimisation dynamique qui optimise les images en temps réel.
C'est-à-dire qu'au lieu d'optimiser la version originale de l'image sur le serveur de votre site WordPress comme un plugin d'optimisation traditionnel, Quicq ne touche pas l'image originale mais effectue plutôt ses opérations dans « le cloud ».
Il y a quelques avantages à cette approche d'optimisation dynamique.
Le plus important est que vous pouvez vous assurer que chaque visiteur voit une image optimisée en fonction des dimensions réelles de son appareil.
Par exemple, si un visiteur navigue sur un écran de smartphone basse résolution, vous pouvez diffuser une image aux dimensions réduites sans affecter son expérience.
Mais si un visiteur navigue sur un immense écran 4K, votre site peut diffuser de manière transparente une version plus grande de l'image pour s'assurer qu'il bénéficie également d'une excellente expérience utilisateur.
Parce que Quicq utilise une approche d'optimisation dynamique à la volée, il est capable de fournir la taille et le format d'image optimaux pour chaque utilisateur individuel.
Cette approche dynamique est également très utile si vous souhaitez manipuler vos images, car vous pouvez apporter des modifications à l'image sans avoir à modifier le fichier image d'origine ou à télécharger une nouvelle version de l'image.
Par exemple, juste en manipulant l'URL d'une image, vous pouvez effectuer les manipulations suivantes :
- Recadrez l'image de différentes manières.
- Ajouter un filigrane.
- Flou l'image.
- Modifiez les dimensions de l'image.
- Réglez la qualité de l'image. Par exemple, vous souhaitez peut-être utiliser une image haute résolution non compressée à certains endroits. Vous pouvez facilement le faire.
- Utilisez un autre format d'image. Par exemple, WebP ou AVIF.
Avec Quicq, il vous suffit de télécharger l'image d'origine une seule fois. Ensuite, vous pouvez effectuer toutes ces manipulations en ajoutant des paramètres de requête supplémentaires à l'URL.
Par exemple, voici le lien vers l'image originale :
https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg
Et voici un lien qui recadre l'image en un carré de 1 000 × 1 000 :
https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg?w=1000&h=1000&c=1
Je vais vous montrer quelques exemples concrets dans la section suivante.
Pratique avec Quicq : Comment optimiser les images WordPress
Maintenant que vous savez ce que fait Quicq, passons à la pratique et je vais vous montrer comment cela fonctionne sur WordPress.
Encore une fois, ce n'est pas limité à WordPress, mais il offre un plugin WordPress dédié qui le rend très facile à utiliser avec votre site WordPress.
1. Créez un compte Quicq gratuit
Pour commencer, vous devrez créer un compte Quicq/Afosto gratuit. Je parlerai ensuite de la tarification, mais il existe un généreux plan gratuit pour toujours et vous bénéficiez également d'un essai gratuit illimité de 14 jours (sans carte de crédit requise).
Une fois que vous avez créé votre compte, cliquez sur le bouton Commencer l'essai gratuit à côté de Quicq dans le tableau de bord Afosto :
2. Créer un CDN Quicq
Ensuite, vous devez créer un CDN Quicq, qui est essentiellement ce qui servira et optimisera les images de votre site.
Une fois que vous démarrez votre essai Quicq, une tâche pour ce faire devrait apparaître automatiquement dans la liste des tâches du tableau de bord principal d'Afosto. Si vous ne le voyez pas, vous pouvez également accéder à cette interface en cliquant sur l'icône d'engrenage à côté de Quicq :
Tout d'abord, vous devrez entrer l'URL que vous souhaitez utiliser pour votre CDN Quicq. Vos images seront chargées à partir de cette URL, vous voudrez donc les associer à votre site Web.
Par exemple, si j'en créais un pour WP Mayor, je créerais l'URL wpmayor .
Ensuite, entrez l'URL directe vers une image existante sur votre site et cliquez sur Valider le site :
Quicq devrait alors automatiquement détecter que vous utilisez WordPress et générer le chemin vers vos images, qui devrait être le dossier uploads dans le dossier wp-content .
Vous avez également la possibilité de développer les paramètres avancés , qui vous permettent de contrôler le comportement du cache pour vos images. La valeur par défaut est de 365 jours, ce qui devrait convenir. Mais vous pouvez modifier cela si vous le souhaitez.
Pour terminer, cliquez sur le bouton Ajouter :
3. Installez le plug-in Quicq et ajoutez une clé d'URL
Une fois que vous avez créé votre compte et configuré votre CDN, vous pouvez installer le plugin Quicq gratuit de WordPress.org sur votre site. Cela vous permettra d'intégrer votre site WordPress avec le CDN d'image que vous venez de créer.
Une fois que vous avez activé le plugin, accédez à la nouvelle zone Quicq de votre tableau de bord WordPress et ajoutez la clé URL que vous avez saisie lors du processus de configuration. C'est-à-dire la partie de l'URL CDN que vous avez pu personnaliser.
Pour mon exemple, c'est wpmayor .
Ensuite, sélectionnez la bascule Active Quicq , puis Enregistrer les modifications pour la mettre en ligne :
Et c'est tout! Votre site WordPress devrait maintenant commencer à charger ses images via le CDN Quicq, qui inclut des optimisations d'images en temps réel.
Une chose mineure que je noterais ici est que je ne pense pas que la zone du plugin Quicq devrait être une zone de menu de niveau supérieur dans le tableau de bord WordPress. Puisqu'il ne s'agit que d'un processus de configuration unique, je pense qu'il serait plus agréable de le déplacer vers un sous-menu tel que Paramètres → Quicq pour aider les utilisateurs à disposer d'une zone d'administration plus propre.
4. Manipuler des images avec des paramètres d'URL (si nécessaire)
Pour la plupart des sites WordPress, vous n'avez rien d'autre à faire pour avoir des images optimisées. À ce stade, Quicq effectue déjà automatiquement les optimisations suivantes :
- Compresser/redimensionner les images de manière optimale en fonction de l'appareil de chaque utilisateur.
- Conversion des images au format WebP ou AVIF selon ce qui fonctionne le mieux.
- Diffuser les images via le CDN Google Cloud de Quicq.
Cependant, comme je l'ai mentionné plus tôt, l'un des avantages de l'approche en temps réel de Quicq est que vous pouvez également manipuler vos images simplement en ajoutant des paramètres de requête à l'URL.
Vous pouvez consulter la page de documentation ici pour un aperçu détaillé, mais passons en revue quelques exemples rapides de la façon dont cela fonctionne.
Disons que vous avez une image large que vous utilisez sur une partie de votre site. Maintenant, vous voulez utiliser la même image, mais recadrez-la en une image carrée.
Sans Quicq, vous auriez besoin d'ouvrir votre outil d'édition d'image préféré, de recadrer l'image, puis de télécharger une nouvelle copie de l'image recadrée à utiliser.
Avec le traitement d'image en temps réel de Quicq, vous pouvez effectuer le recadrage en ajoutant simplement un paramètre d'URL ( et sans affecter l'image d'origine ).
Voici l'image et l'URL d'origine :
Et puis voici à quoi ressemble l'image lorsqu'elle est recadrée à un carré de 1000×1000 px en ajoutant ce paramètre d'URL – ?w=1000&h=1000&c=1 :
Voici un autre exemple…
Disons que vous voulez aller plus loin et brouiller l'image, en plus de la recadrer en carré.
Tout ce que vous avez à faire est d'ajouter le paramètre de flou et de définir le degré de flou que vous souhaitez utiliser (de 0 à 3) et votre image sera floue :
Tarification rapide
Quicq propose un forfait gratuit pour toujours assez généreux, puis des forfaits payants pour les utilisateurs qui ont besoin de plus de fonctionnalités.
Le forfait gratuit vous permet d'optimiser jusqu'à 100 000 images par mois* et de servir 25 Go de bande passante CDN par mois pour toujours, ce qui devrait être plus que suffisant pour un petit site. Par exemple, si vous avez un site de brochure/portfolio de base ou un petit blog, je ne pense pas que vous dépasserez jamais cela.
* N'oubliez pas que les optimisations d'image se produisent de manière dynamique plutôt qu'une seule fois comme un plugin traditionnel, donc une image compte comme une optimisation à chaque fois qu'elle se charge.
Si vous avez besoin des forfaits payants, vous êtes facturé en fonction de deux paramètres :
- Optimisations - le nombre d'optimisations d'image que vous avez par mois.
- Transfert de données - la quantité de bande passante que vos images consomment lorsqu'elles sont servies via le CDN.
Cette stratégie de facturation est un peu plus complexe que certains autres plugins d'optimisation d'image en temps réel, qui vous facturent généralement en fonction du nombre de visites mensuelles de votre site.
Cependant, j'aime mieux ce modèle de facturation car je pense que c'est un mode de facturation plus équitable, même s'il rend un peu plus difficile l'estimation de votre utilisation.
Avec cette approche, vous ne serez facturé qu'en fonction de votre utilisation réelle, ce qui vous aidera probablement à économiser de l'argent.
Pour savoir ce que vous paierez, vous pouvez utiliser la calculatrice sur la page de tarification.
Si vous n'êtes pas sûr de l'utilisation de votre site, vous pouvez simplement utiliser le niveau gratuit pour commencer ou il existe également un essai gratuit de 14 jours des plans d'utilisation plus élevée, ce qui devrait vous donner une bonne compréhension de l'utilisation de votre site :
Si vous avez besoin des plans premium, vous pouvez obtenir 20 % de réduction sur vos deux premiers mois sur tous les forfaits avec notre code promo exclusif :
Réflexions finales sur Quicq
Dans l'ensemble, je sais que de nombreux sites adoptent cette approche d'optimisation des images en temps réel.
Je pense que cette approche a beaucoup à offrir en raison de la flexibilité qu'elle vous donne en termes de manipulation de vos images et de s'assurer que chaque visiteur voit une image optimisée pour sa situation unique.
Quicq n'est pas le premier plugin à apporter cela à WordPress, mais il a quelques avantages :
- Il a un niveau gratuit très généreux. Il a le niveau gratuit le plus élevé que j'ai vu.
- J'aime son modèle de tarification pour les options premium, car vous ne payez qu'en fonction de votre utilisation réelle. Même si cela rend la tarification un peu plus compliquée, je pense que c'est une façon « plus juste » de facturer. De plus, vous pouvez toujours utiliser l'essai illimité de 14 jours pour déterminer l'utilisation réelle de votre site si vous n'êtes pas sûr de ce que vous allez payer.
- Il vous permet toujours d'effectuer d'autres manipulations d'image comme le recadrage, le floutage, etc. La plupart des autres plugins WordPress que je connais ne se concentrent que sur les performances ou ne vous donnent accès qu'au filigrane, donc c'est cool que Quicq aille au-delà. La plupart des utilisateurs occasionnels ne les utiliseront probablement pas, mais c'est bien pour les utilisateurs avancés et les développeurs.
Si vous voulez l'essayer, Quicq propose un généreux plan gratuit pour toujours ainsi qu'un essai gratuit illimité de 14 jours pour vous aider à déterminer votre utilisation. Vous pouvez cliquer sur les boutons ci-dessous pour commencer :