Revisão do Quicq: Otimização de imagem WordPress em tempo real
Publicados: 2022-02-14Você sabia que, em média, as imagens representam cerca de metade do tamanho do arquivo de uma página da Web média?
Isso significa que, se você estiver usando imagens não otimizadas, essas imagens podem ter um grande efeito negativo nos tempos de carregamento do seu site.
O Quicq é um serviço da Afosto que permite otimizar totalmente as imagens do seu site em tempo real e servi-las a partir de uma rede de entrega de conteúdo (CDN) com tecnologia do Google Cloud. Além do desempenho, você também pode usá-lo para manipular imagens facilmente, como cortá-las, adicionar marcas d'água e muito mais.
Funciona com o WordPress através de um plugin de integração dedicado, bem como com outras plataformas como Magento e PrestaShop.
Em nossa análise prática do Quicq, mostraremos como o Quicq funciona e como você pode usá-lo para otimizar as imagens do seu site WordPress.
Vamos cavar…
Revisão rápida: o que o plugin faz
Em alto nível, a Quicq está focada em oferecer uma solução completa para otimização de imagens do WordPress. É basicamente uma ferramenta plug-and-play que permite que você se beneficie de todas as táticas importantes de otimização de imagem – mais sobre as abaixo.
Existem duas táticas “principais” que a maioria das pessoas pensa quando se trata de otimização de imagem:
- Redimensionar – redimensionar as dimensões reais da imagem para corresponder à forma como você a usará em seu site. Dimensões menores significam menos dados, o que significa um tamanho de imagem menor.
- Compactação – usando um algoritmo de compactação para reduzir o tamanho do arquivo da imagem sem alterar suas dimensões, seja por meio de um algoritmo sem perdas ( sem alteração na qualidade ) ou um algoritmo com perdas ( talvez uma pequena redução na qualidade ).
O Quicq certamente pode implementar essas táticas para você, mas também é uma das novas gerações de plugins de otimização de imagem que vão além de apenas redimensionar e compactar suas imagens estaticamente.
Em vez disso, ele veicula automaticamente suas imagens de sua CDN com tecnologia do Google Cloud e as otimiza em tempo real para os visitantes.
Assim que você ativar o Quicq em seu site, ele otimizará automaticamente todas as suas imagens com as seguintes otimizações:
- Atenda-os por meio do Quicq CDN, que é desenvolvido pelo Google Cloud. Isso permite que os visitantes baixem suas imagens do local da CDN mais próximo a eles.
- Redimensione-os para o tamanho ideal com base no dispositivo de cada visitante.
- Compacte-os para reduzir o tamanho do arquivo.
- Converta-os para um formato de imagem otimizado que oferece tamanhos menores que JPEG e PNG. O Quicq suporta WebP e AVIF, um formato de imagem mais recente que pode oferecer tamanhos de arquivo ainda menores que o WebP. O suporte AVIF é notável, pois nem todos os serviços ainda oferecem suporte a esse formato de imagem mais recente.
Todas essas mudanças levarão a tempos de carregamento de imagem muito mais rápidos (e, consequentemente, tempos de carregamento do site).
Por que usar a otimização de imagem dinâmica em tempo real?
Como mencionei acima, o Quicq usa uma abordagem de otimização dinâmica que otimiza as imagens em tempo real.
Ou seja, em vez de otimizar a versão original da imagem no servidor do seu site WordPress como um plugin de otimização tradicional, o Quicq não toca na imagem original, mas realiza suas operações na “nuvem”.
Existem algumas vantagens nessa abordagem de otimização dinâmica.
O grande problema é que você pode garantir que todos os visitantes vejam uma imagem otimizada com base nas dimensões reais do dispositivo.
Por exemplo, se um visitante estiver navegando em uma tela de smartphone de baixa resolução, você poderá veicular uma imagem com dimensões pequenas sem afetar sua experiência.
Mas se um visitante estiver navegando em uma enorme tela 4K, seu site pode servir perfeitamente uma versão maior da imagem para garantir que eles também tenham uma ótima experiência de usuário.
Como o Quicq usa uma abordagem de otimização dinâmica e dinâmica, ele é capaz de fornecer o tamanho e o formato de imagem ideal para cada usuário individual.
Essa abordagem dinâmica também é muito útil se você deseja manipular suas imagens, pois pode fazer alterações na imagem sem precisar editar o arquivo de imagem original ou fazer upload de uma nova versão da imagem.
Por exemplo, apenas manipulando o URL de uma imagem, você pode realizar as seguintes manipulações:
- Corte a imagem de maneiras diferentes.
- Adicione uma marca d'água.
- Desfocar a imagem.
- Altere as dimensões da imagem.
- Ajuste a qualidade da imagem. Por exemplo, talvez você queira usar uma imagem não compactada de alta resolução em alguns pontos. Você pode facilmente fazer isso.
- Use um formato de imagem diferente. Por exemplo, WebP ou AVIF.
Com o Quicq, tudo o que você faz é carregar a imagem original uma vez. Em seguida, você pode realizar todas essas manipulações adicionando alguns parâmetros de consulta extras à URL.
Por exemplo, aqui está o link para a imagem original:
https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg
E aqui está um link que corta a imagem em um quadrado de 1.000 × 1.000:
https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg?w=1000&h=1000&c=1
Mostrarei alguns exemplos reais na próxima seção.
Hands-On com Quicq: Como otimizar imagens do WordPress
Agora que você sabe o que o Quicq faz, vamos praticar e mostrarei como ele funciona no WordPress.
Novamente, não se limita ao WordPress, mas oferece um plugin WordPress dedicado que facilita muito o uso com seu site WordPress.
1. Registre-se para uma conta gratuita do Quicq
Para começar, você precisa se registrar para uma conta gratuita do Quicq/Afosto. Falarei sobre preços a seguir, mas há um plano generoso para sempre gratuito e você também recebe uma avaliação gratuita ilimitada de 14 dias (sem necessidade de cartão de crédito).
Depois de registrar sua conta, clique no botão Iniciar avaliação gratuita ao lado de Quicq no painel do Afosto:
2. Crie uma CDN rápida
Em seguida, você precisa criar um Quicq CDN, que é essencialmente o que servirá e otimizará as imagens para o seu site.
Depois de iniciar o teste do Quicq, uma tarefa para fazer isso deve aparecer automaticamente na lista de tarefas do painel principal do Afosto. Caso não veja, você também pode acessar esta interface clicando no ícone de engrenagem ao lado de Quicq:
Primeiro, você precisará inserir o URL que deseja usar para o Quicq CDN. Suas imagens serão carregadas a partir desse URL, portanto, você desejará torná-las relacionadas ao seu site.
Por exemplo, se eu estivesse criando um para o WP Mayor, eu faria a URL wpmayor .
Em seguida, insira o URL direto para uma imagem existente em seu site e clique em Validar site:
O Quicq deve detectar automaticamente que você está usando o WordPress e gerar o caminho para suas imagens, que deve ser a pasta de uploads dentro da pasta wp-content .
Você também tem a opção de expandir as configurações avançadas , que permitem controlar o comportamento do cache de suas imagens. O padrão é 365 dias, o que deve ser bom. Mas você pode alterar isso, se desejar.
Para finalizar, clique no botão Adicionar :
3. Instale o plug-in Quicq e adicione a chave de URL
Depois de criar sua conta e configurar seu CDN, você pode instalar o plug-in Quicq gratuito do WordPress.org em seu site. Isso permitirá que você integre seu site WordPress com a imagem CDN que você acabou de criar.
Depois de ativar o plug-in, vá para a nova área Quicq no painel do WordPress e adicione a chave de URL que você inseriu no processo de configuração. Ou seja, a parte do URL da CDN que você conseguiu personalizar.
Para o meu exemplo, isso é wpmayor .
Em seguida, selecione a alternância Active Quicq e, em seguida, Salvar alterações para torná-lo ativo:
E é isso! Seu site WordPress agora deve começar a carregar suas imagens por meio do Quicq CDN, que inclui otimizações de imagem em tempo real.
Uma pequena coisa que eu notaria aqui é que eu não acho que a área do plugin Quicq deva ser uma área de menu de nível superior no painel do WordPress. Como é apenas um processo de configuração único, acho que seria melhor movê-lo para um submenu como Configurações → Quicq para ajudar os usuários a ter uma área de administração mais limpa.
4. Manipule imagens com parâmetros de URL (quando necessário)
Para a maioria dos sites WordPress, você não precisa fazer mais nada para ter imagens otimizadas. Neste ponto, o Quicq já está realizando automaticamente as seguintes otimizações:
- Comprimir/redimensionar as imagens de forma otimizada com base no dispositivo de cada usuário.
- Converter as imagens para o formato WebP ou AVIF dependendo do que funcionar melhor.
- Exibição das imagens por meio do Google Cloud CDN da Quicq.
No entanto, como mencionei anteriormente, uma das coisas legais sobre a abordagem em tempo real do Quicq é que você também pode manipular suas imagens apenas adicionando alguns parâmetros de consulta à URL.
Você pode conferir a página de documentação aqui para uma visão detalhada, mas vamos ver alguns exemplos rápidos de como isso funciona.
Digamos que você tenha uma imagem ampla que você usa em uma parte do seu site. Agora, você quer usar a mesma imagem, mas cortá-la em uma imagem quadrada.
Sem o Quicq, você precisaria abrir sua ferramenta de edição de imagem favorita, recortar a imagem e, em seguida, fazer upload de uma nova cópia da imagem recortada para usar.
Com o processamento de imagem em tempo real do Quicq, você pode realizar o recorte apenas adicionando um parâmetro de URL ( e sem afetar a imagem original ).
Aqui está a imagem e o URL originais:
E aqui está a aparência da imagem quando cortada em um quadrado de 1000×1000 px adicionando este parâmetro de URL – ?w=1000&h=1000&c=1 :
Aqui está outro exemplo…
Digamos que você queira dar um passo adiante e desfocar a imagem, além de cortá-la em um quadrado.
Tudo o que você precisa fazer é adicionar o parâmetro blur e definir quanto desfoque você deseja usar (de 0 a 3) e sua imagem ficará desfocada:
Preços rápidos
O Quicq tem um plano gratuito para sempre bastante generoso e planos pagos para usuários que precisam de mais recursos.
O plano gratuito permite otimizar até 100.000 imagens por mês* e servir 25 GB de largura de banda CDN por mês para sempre, o que deve ser mais que suficiente para um site pequeno. Por exemplo, se você tem um site básico de brochura/portfólio ou um blog pequeno, acho que nunca vai superar isso.
*Lembre-se, as otimizações de imagem acontecem dinamicamente ao invés de uma vez como um plugin tradicional, então uma imagem conta como uma otimização toda vez que é carregada.
Se você precisar dos planos pagos, a cobrança será feita com base em duas métricas:
- Otimizações – o número de otimizações de imagem que você tem por mês.
- Transferência de dados – a quantidade de largura de banda que suas imagens consomem ao serem atendidas pela CDN.
Essa estratégia de cobrança é um pouco mais complexa do que alguns outros plugins de otimização de imagem em tempo real, que normalmente cobram apenas com base no número de visitas que seu site tem por mês.
No entanto, gosto mais desse modelo de faturamento porque acho que é uma forma mais justa de faturamento, mesmo que dificulte um pouco a estimativa de seu uso.
Com essa abordagem, você só será cobrado com base no seu uso real, o que provavelmente ajudará você a economizar dinheiro.
Para descobrir o que você vai pagar, você pode usar a calculadora na página de preços.
Se você não tiver certeza sobre o uso do seu site, basta usar o nível gratuito para iniciar ou também há uma avaliação gratuita de 14 dias dos planos de uso mais alto, o que deve fornecer uma boa compreensão do uso do seu site:
Se você precisar dos planos premium, poderá obter 20% de desconto nos primeiros dois meses em todos os pacotes com nosso código de cupom exclusivo:
Considerações Finais sobre o Quicq
No geral, sei que muitos sites estão migrando para essa abordagem de otimização de imagem em tempo real.
Eu acho que essa abordagem tem muito a oferecer devido à flexibilidade que ela oferece em termos de manipulação de suas imagens e de garantir que cada visitante veja uma imagem otimizada para sua situação única.
Quicq não é o primeiro plugin a trazer isso para o WordPress, mas tem algumas coisas a seu favor:
- Tem um nível gratuito muito generoso. Ele tem o nível gratuito mais alto que eu já vi.
- Eu gosto de seu modelo de preços para as opções premium porque você paga apenas com base no seu uso real. Embora isso torne os preços um pouco mais complicados, acho que é uma maneira “mais justa” de faturar. Além disso, você sempre pode usar o teste ilimitado de 14 dias para descobrir o uso real do seu site se não tiver certeza do quanto pagará.
- Ele ainda permite que você execute outras manipulações de imagem, como corte, desfoque e assim por diante. A maioria dos outros plugins do WordPress que conheço são focados apenas no desempenho ou apenas dão acesso à marca d'água, então é legal que o Quicq vá além disso. A maioria dos usuários casuais provavelmente não os usará, mas é bom para usuários e desenvolvedores avançados.
Se você quiser experimentá-lo, o Quicq tem um plano generoso para sempre gratuito, bem como uma avaliação gratuita ilimitada de 14 dias para ajudá-lo a descobrir seu uso. Você pode clicar nos botões abaixo para começar: