Otimização de imagens do site

A otimização de imagens é um dos aspectos mais “recompensadores” do desempenho do WordPress: para a mesma estrutura de página e tema, desde que o tamanho, as dimensões, a formatação e o fornecimento da imagem estejam corretos, a experiência de carregamento melhorará imediatamente.

Mas a otimização de imagens também é a maneira mais fácil de fazer uma bagunça, não porque seja tecnicamente muito difícil, mas porque as informações são muito fragmentadas:
Você lê alguns artigos, sabe que “compressão”, “WebP/AVIF”, “carregamento lento” e, em seguida, dá uma olhada na introdução do plug-in e diz “grátis todo mês! 100 créditos por mês”, “Free 20MB”, “1 crédito por imagem”, mas quanto mais eu leio, mais confuso fico... A gratuidade é suficiente? Como deduzir a taxa? Você entendeu errado “a mesma coisa”? E o mais importante:Ele realmente fez efeito depois que você o fez ou não?

Este artigo faz apenas três coisas:

1. Fornecer um executávelroteiro (também fig.)(O que fazer primeiro, o que fazer depois)
2. Seja claro sobre a opção que você está escolhendo (qual é a diferença entre gratuito/pago e para quem cada um é adequado)
3. Escreva as armadilhas mais comuns com antecedência (para que você não tenha que procurar por aí para solucionar problemas quando terminar)

1. o resultado final: o que o WordPress traz e o que não traz

Se você não descobrir primeiro o que o núcleo do WordPress já faz, é fácil fazer uma de duas coisas:

• Em vez de usar a “capacidade livre” que deveria estar desfrutando, você gasta tempo/paga dinheiro para construir a roda repetidamente.
• Eu achava que o WordPress “converteria automaticamente todas as imagens antigas para WebP/AVIF”, mas acontece que isso não acontece!

O núcleo do WordPress tem esses recursos essenciais incorporados:

• Imagens responsivas (srcset/tamanho): A partir do WordPress 4.4, o núcleo produzirá imagens para o srcset 与 sizese utiliza as imagens de vários tamanhos geradas durante o upload para permitir que o navegador escolha um recurso mais adequado para carregar de acordo com as condições da tela.
• Carregamento preguiçoso nativoO WordPress 5.5 em diante permite o carregamento preguiçoso nativo de imagens por padrão, usando os padrões HTML. loading implementação do atributo.
• Suporte para upload de WebPDesde o WordPress 5.8, você pode carregar e usar WebP como JPEG/PNG (desde que o ambiente de hospedagem ofereça suporte a WebP).
• Suporte para upload de AVIFA partir do WordPress 6.5, é possível fazer upload e usar AVIF como JPEG/PNG (também depende do suporte da hospedagem).

Mas preste atenção:
“Suporte para upload/uso” ≠ “Conversão automática/entrega automática”.
Ou seja: mesmo que você já esteja no WP 6.5, os JPG/PNGs na sua biblioteca de mídia não se transformarão em WebP/AVIF por conta própria; você não obterá automaticamente o link completo “output AVIF/WebP according to the browser's capabilities and fallback to the original image for unsupported browsers”! --Essa parte geralmente precisa ser corrigida por um plug-in ou serviço.

2. roteiro: otimização de imagens em 5 etapas

O que fazer, por que, o que fazer para se qualificar e o que é um pit típico.

2.1 Primeiro, acertar o “tamanho” (o mais negligenciado, mas o mais gratificante)

Muitas estações são lentas não porque a compactação não foi feita, mas porque aBaixou uma imagem grande que se estende muito além da área de exibição：
Por exemplo, se a página tiver apenas 900 px de largura e você pedir ao visitante para fazer download da imagem original de 3000 px, o navegador simplesmente “faz o download e depois a encolhe”. Isso desperdiça largura de banda, aumenta o tempo de decodificação e torna a primeira tela mais lenta.

WordPress 4.4+Mecanismo de imagem responsivo（srcset/sizes) foi projetado para tratar exatamente desse problema.

Faça o que conta como um passe:

• Ao abrir uma página em um telefone celular, o tamanho da imagem baixada deve ser significativamente menor do que no desktop
• A mesma imagem é carregada com diferentes tamanhos de recursos em diferentes dispositivos (em vez de sempre fazer o download da imagem original)

As armadilhas mais comuns:

• Alguns temas/construtores tratam os diagramas como imagens de fundo CSS ou os geram de forma personalizada, possivelmente ignorando o srcsetO resultado foi uma grande imagem do
• Você usa leitos de imagem vinculados externamente, blocos de imagem de terceiros e também pode ignorar o sistema de vários tamanhos gerado pela biblioteca de mídia

---

2.2 Compressão (reduza o KB, mas não “esmague” a qualidade)

A essência da compactação não é “quanto menor, melhor”, mas “a diferença é pouco visível a olho nu, mas a queda de volume é óbvia”.

As regras são as seguintes:

• Fotografias/imagens ao vivo (pessoas, produtos, paisagens)Compressão com perdas prioritária (ganho máximo)
• Capturas de tela da interface / imagens com muito textoCompactação: Seja mais conservador na compactação para evitar texto difuso
• Logotipo/íconeSVG prioritário ou discreto sem perdas (com perdas é fácil de colar nas bordas)

Faça o que conta como um passe:

• Redução significativa no tamanho da imagem na maioria das páginas
• Nenhum ruído visível, bordas turvas, quebras de blocos de cores, texto borrado

---

2.3 WebP / AVIF (estratégia de formato: menor para igual definição)

O WordPress já suporta o upload WebP (5,8) vs. AVIF (6,5)。
No entanto, para que o formato Next Generation realmente funcione, dois aspectos precisam ser resolvidos:

1. Como converter em lote bibliotecas de mídia históricas(Caso contrário, você estará otimizando apenas para “novas imagens carregadas posteriormente”)
2. Se deseja gerar uma cópia ou substituir a imagem original(Esse é um divisor de águas arriscado; vamos nos concentrar em “Substituir e excluir a imagem original” do Plus WebP mais tarde)

Estilo de escrita recomendado:

• WebP: geralmente preferido como padrão (compatibilidade mais estável)
• AVIF: uma outra direção de compactação, adequada para imagens grandes/imagens grandes da primeira tela/imagens de álbum (mas maisDependência de suporte ambiental）

---

2.4 O carregamento preguiçoso deve ser usado corretamente (não é um tamanho único para todos)

WordPress 5.5 em dianteCarregamento preguiçoso padrãoFoto.
Ele reduz o uso da largura de banda durante a renderização inicial:

• Carregamento lento para “recursos fora da tela”
• A imagem grande mais importante na primeira tela (e, em muitos casos, a imagem principal na primeira tela) geralmente não é adequada para o carregamento atrasado

---

2.5 Camada de entrega: CDN / Imagem CDN

A compactação, o dimensionamento e a formatação resolvem o problema de “arquivos menores que cabem”.
No entanto, se as imagens forem sempre extraídas de uma distância da fonte, a latência da rede ainda afetará significativamente a experiência. É aí que entra a solução de “camada de entrega” (CDN/Image CDN).

Duas direções típicas:

• Polonês da Cloudflare：Documentação da CloudflareOs métodos de compactação poloneses (lossless/lossy/WebP) são apresentados, e é mencionado que a compactação com o format=auto O formato WebP/AVIF é permitido.
• Jetpack Site Accelerator：Documentação do JetpackExplique que ele otimizará imagens e as distribuirá em sua rede juntamente com recursos estáticos.

A otimização de imagens é responsável por torná-las menores e mais adequadas.CDN Responsável por fornecer um sistema mais próximo e mais estável

3. seleção: somente duas rotas principais

A falha mais comum na otimização de imagens não é “não ter plug-ins”, mas ter muitos plug-ins, o que leva a um processamento duplicado:
A está comprimindo, B está comprimindo, A está convertendo para WebP/AVIF, B está convertendo, A está alterando URLs, B está reescrevendo - não dá nem para saber o que está acontecendo na estação.

Regras:

Há apenas um caminho a seguir: compressão local ou em nuvem dos três.

• Rota A (todos os locais gratuitos):Mais WebP ou AVIF + Otimizador de imagem EWWWW(ou apenas um)
• Rota B (opção tripla de compactação de nuvem):ShortPixel / Imagify / TinyPNG

---

3.1 Rota A: Local totalmente gratuito (mais WebP ou AVIF ou EWWWW)

Essa rota é caracterizada por:

• Você não depende de serviços de compactação de terceiros “por mês/por planilha” (embora alguns recursos possam ser oferecidos como serviços opcionais).
• O custo: o processamento em lote pode exigir mais do servidor no CPU/IO, exigindo que você preste mais atenção à “estratégia e ao risco”.”

3.1.1 Mais WebP ou AVIFO núcleo é “gerar/substituir”, não é a tradicional “ferramenta de compressão”.”

• Ao gerar imagens de volume total:A ID do arquivo de imagem original é substituída por WebP/AVIF, o arquivo original é excluído e o URL no conteúdo é substituído.。
• O plug-in fornece comandos WP-CLI e lembra: o WP-CLI é mais confiável quando há muitos arquivos.

Isso significa que, em vez de “gerar silenciosamente um WebP para você”, poderia ser umMigração de ativos(Especialmente se você ativar a opção “Substituir e excluir a imagem original”).

Diferenças entre os dois modelos

Modo 1: Manter a imagem original + gerar cópia WebP/AVIF (mais estável)

• Prós: Mais fácil de recorrer em caso de problemas de compatibilidade
• Custo: o uso do disco aumentará (imagem original + novo formato + miniaturas de vários tamanhos)

Modo 2: Substituir e excluir a imagem original (mais agressivo)

• Prós: os discos não se expandem tão rapidamente; as referências de estações vão diretamente para o novo formato
• Risco: você está “mudando ativos + mudando referências”, o que torna mais cara a solução de problemas de compatibilidade (especialmente se alguns sistemas externos ou lógicas de tema dependerem do nome de arquivo/caminho/formato original).

Armadilhas típicas do Plus WebP ou AVIF

1. Após a substituição de toda a biblioteca, algumas imagens de página são exibidas de forma anormal.
   O motivo disso geralmente não é que a imagem esteja “quebrada”, mas que algum link na cadeia de substituição de URL, armazenamento em cache, política de miniaturas etc. não está correto.
2. Quanto maior o número de miniaturas, maior o escopo da alteração
   O upload de uma imagem pelo WordPress gera vários tamanhos; os temas/plugins também podem adicionar mais tamanhos. A substituição completa significa que você pode estar alterando uma coleção muito grande de arquivos.
3. O fato de fazer uma migração de formato não significa necessariamente que o volume seja sempre o menor
   WebP/AVIF são geralmente menores, mas a “estratégia de tamanho” e a “estratégia de compactação” ainda são fundamentais. Não pense no Plus WebP como “um clique mais rápido”.

---

3.1.2 Otimizador de imagens EWWW: representante da compressão local livre

A página do plug-in EWWW está muito bem posicionada:

• Ele pode ser otimizado em seu servidor usando uma série de ferramentas (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp, etc.)
• Você também pode transferir o processamento que consome CPU para o servidor (opcional) se precisar de maior compactação ou mais economia de CPU.

Que papel a EWWW deve desempenhar na Rota A?

Se estiver usando o Plus WebP como uma “estratégia de migração/substituição de formato”, então o EWWWW é mais adequado:

• Compressão e otimização de volume(especialmente a redução de peso de recursos brutos, como JPG/PNG)
• Otimização em lote da biblioteca de mídia histórica(visando a “redução de volume” em vez de “substituição de URL”)

Poço típico de EWWW

1. Carga elevada do servidor durante a otimização em lote
   Como a compactação local consome CPU/IO, a solução não é “não usá-la”, mas “lote, pico baixo, opção de descarregamento/nuvem, se necessário”.
2. “Um WebP é gerado” não significa que o front-end deve estar produzindo um WebP.
   Muitos plug-ins sofrem desse mal-entendido: geração é uma coisa, estratégias de entrega (reescritas, tags de imagem, acessos ao cache etc.) são outra.
3. Fazer a mesma coisa várias vezes com outros plug-ins
   Se você optar pelo caminho A, tente não sobrepor a compactação em nuvem do tipo ShortPixel/Imagify/TinyPNG; se optar pelo caminho B, não ative a lógica de substituição do Plus WebP. Princípio básico:Uma rota para o final.

---

3.2 Rota B: opção tripla de compactação na nuvem (ShortPixel / Imagify / TinyPNG)

Essa rota é adequada para pessoas que “querem economizar recursos do servidor, querem fazer lotes com menos esforço e aceitam faturamento por crédito/por volume”.
Mas o ponto mais enganoso sobre a compactação em nuvem é:Créditos gratuitos não são tão simples quanto “planilhas gratuitas”!.. O número de tamanhos de miniaturas, o fato de o WebP/AVIF ser ou não gerado e o fato de ele ser ou não repetidamente pressurizado podem afetar significativamente o consumo.

A seguir, explicaremos: o que está acontecendo com a gratuidade/tarifa, como os créditos são deduzidos, quais são as armadilhas mais prováveis de serem pisadas e quais tipos de sites são apropriados.

---

3.2.1 ShortPixel100 créditos gratuitos/mês, mas os créditos são consumidos por miniaturas e ampliações WebP/AVIF.

O que está acontecendo com o gratuito/pago

A descrição do plug-in ShortPixel afirma claramente:

• 100 créditos gratuitos por mês
• Há também “Extra Unlimited Monthly Credits” (a página do plug-in fornece informações sobre os preços correspondentes)
• Também disponível como “pacotes de créditos únicos que nunca expiram” (com informações sobre o preço inicial)

Dica:

• Gratuito: fornece uma determinada quantidade de créditos por mês para sites leves ou testes
• Pacotes descartáveis: adequados para sites com grandes bibliotecas de mídia que desejam liquidar seu estoque de uma só vez (compre uma vez e use, geralmente não expira).
• Mensal/Ilimitado: adequado para sites com imagens continuamente atualizadas e otimização estável de longo prazo

A KB oficial do ShortPixel também forneceu uma atualização sobre “One Time Pack vs Unlimited Monthly”.explicação explícitaO Unlimited Monthly é um pagamento mensal (ou anual) que oferece créditos ilimitados com uma cota fixa de CDN; créditos únicos que não expiram, dando-lhe mais controle sobre seu uso sob demanda.

Conclusão: como os créditos do ShortPixel são calculados?

Documentação oficial do ShortPixel KB foi bem direto:

• O WordPress gera várias miniaturas quando você carrega uma imagem;
• Cada otimização de miniatura conta como um crédito；
• Se você optar por gerar um WebP ou AVIF, oCada versão WebP/AVIF da imagem original e da miniatura consome um crédito adicional.；
• Você pode excluir determinadas miniaturas de serem otimizadas para reduzir o consumo de créditos.

Exemplo de créditos：

Digamos que você carregue uma imagem e o tema/plugin gere 8 miniaturas:

• Otimizar somente a imagem original + miniaturas: 1 (original) + 8 (miniaturas) = 9 créditos
• Se você também quiser gerar WebP/AVIF: mais uma versão de última geração para cada um dos 9 acima → +9 créditos.
  Em outras palavras, o que você acha que é “1 imagem” pode, na verdade, consumir perto de “créditos de 2 dígitos”.

Portanto:“100 créditos gratuitos” não é o mesmo que “100 imagens gratuitas”.

As armadilhas mais comuns do ShortPixel

1. Os 100 créditos gratuitos se esgotam rapidamente
   Causa principal: muitas miniaturas + créditos extras para gerar WebP/AVIF.
   sugestão：

• Avalie primeiro o número de miniaturas do site
• Excluir tamanhos desnecessários de miniaturas (otimizar apenas os tamanhos que serão realmente usados)
• Determine a estratégia de compressão antes de executar em massa para evitar o consumo repetido de tentativas e erros

2. Empilhamento de outros plug-ins de conversor ao mesmo tempo
   Se você tiver substituições Plus WebP e o ShortPixel gerando/inserindo tags de última geração, a lógica se acumula e fica mais difícil de solucionar problemas. Para a rota B, deixe o ShortPixel fazer isso sozinho.
3. Achei que, se eu o instalasse, seria “WebP/AVIF em primeiro plano”.”
   Página do plug-in ShortPixelMencionou que ele converte WebP/AVIF e pode adicionar imagens de última geração à página inicial (por exemplo, por marcação).
   Mas ainda é importante verificar os resultados depois de fazer isso.

---

3.2.2 ImaginarGratuito: 20MB/mês; cota deduzida de acordo com o “tamanho da imagem original + número de miniaturas”, dedução repetida para pressão pesada.

Quantidade e posicionamento livres

Página oficial de preços da ImagifyA escrita é clara:Conta gratuita Cota mensal 20MB。
Sua página de plug-in também deixa claro que ele pode compactar, redimensionar e converter WebP/AVIF.

Como a cota é deduzida?

Documentação oficial da Imagify “How is Quota Usage Calculated?” (Como o uso da cota é calculado?) detalha o mecanismo de dedução de forma muito clara:

• O número de miniaturas afeta o consumoPor exemplo, se você tiver 10 tamanhos de miniaturas, a otimização de uma imagem se tornará a otimização de 11 imagens (original + 10 miniaturas), que contribuem para o consumo da cota.
• Dedução da cota de acordo com o tamanho do documento originalPor exemplo, se você enviar uma imagem de 100 KB para o Imagify, 100 KB serão deduzidos da cota.
• A alteração do nível de compactação e a reotimização consumirão a cota novamente。
• A mesma chave de API pode ser usada para vários sites, mas as cotas são compartilhadas entre eles.

Essa é a “forma central de entendimento” da Imagify:
É mais parecido com um pacote de tráfego: ele deduz tanto quanto você envia; quanto mais miniaturas você tiver, mais ele deduz; e você repetirá a dedução se pressionar novamente.

Exemplo de cota do Imagify fácil de ler

Digamos que você carregue uma imagem original de 800 KB e o site gere 8 miniaturas.

• O Imagify otimiza para incluir a “imagem original + 8 miniaturas” (se você optar por otimizar todas elas), o que significa que essa única ação consome uma cota próxima ao “tamanho original de todos esses arquivos combinados”.
  É por isso que alguns sites acham que o “20MB se esgota rapidamente”: não é que o Imagify não seja suficiente, é que você está carregando muitas imagens ao mesmo tempo, muitas miniaturas e provavelmente está tentando os níveis de compactação várias vezes.

As armadilhas mais comuns da Imagify

1. Free 20MB Não é suficiente para fazer uma “limpeza do histórico em todo o site”
   O 20MB geralmente é mais adequado para testes com atualizações leves; se a sua biblioteca de mídia já for grande, uma limpeza única provavelmente exigirá uma atualização.
2. O ajuste repetido dos níveis de compressão resulta na duplicação do consumo de cotas
   A Imagify deixa claro queA re-otimização consumirá a cota novamente.
   Sugiro que você deixe clara a “estratégia” nesta página:

• Comece com um pequeno número de imagens para determinar o nível de compactação e a aparência
• Determinar a estratégia e, em seguida, executar em massa
  Evite tentativas e erros repetidos na biblioteca completa

3. Vários sites que compartilham a chave de API levam a uma “redução inexplicável da cota”.”
   Se você usar a mesma chave de API para mais de uma estação, a cota será compartilhada.
   Portanto, em cenários de equipe/multi-estação, é melhor ser claro: quais estações são compartilhadas e quais são usadas individualmente para evitar orçamentos incontroláveis.

---

3.2.3 TinyPNG(Tiny Compress Images): 500 créditos/mês gratuitos; a mudança para WebP/AVIF “deduzirá 1 crédito por tamanho”.”

Créditos gratuitos e suas ideias de cobrança

A página do plug-in do TinyPNG para WordPress é muito clara:

• 500 créditos por mês gratuitamente
• Em “General WordPress Installation” (Instalação geral do WordPress), você provavelmente pode compactar o arquivo Aprox. 100 imagens/mês
• No entanto, se a conversão AVIF ou WebP estiver ativada:Cada tamanho de imagem consome um crédito adicionalPortanto, presumivelmente, ele só pode ser compactado e convertido Aprox. 50 imagens/mês(dependendo do número de tamanhos de miniaturas que você tiver).

Enquanto isso, a Tinify (os desenvolvedores do TinyPNG/TinyJPG) também fez seu Página de preços da APIDescrição: Inscreva-se e receba 500 compressões gratuitas por mês; depois disso, você será cobrado de acordo com o número de compressões bem-sucedidas, sem assinatura obrigatória.

Resuma a maneira como o TinyPNG é entendido em uma frase:
Ele conta os créditos; quanto mais tamanhos de miniaturas você tiver e quanto mais WebP/AVIF você tiver ativado, mais rapidamente os créditos serão consumidos.

Exemplos fáceis de ler dos créditos do TinyPNG

Suponha que seu site gere 8 tamanhos de miniaturas para cada imagem:

• Somente compactação: original + 8 miniaturas → 9 créditos necessários
• Se a conversão WebP/AVIF estiver ativada: um crédito extra por tamanho → provavelmente quase o dobro!
  Isso corresponde à descrição na página do plug-in: após a ativação, o valor gratuito muda de aproximadamente “100 cartões/mês” para “50 cartões/mês”.

As armadilhas mais comuns do TinyPNG

1. Pensamento 500 créditos = 500 imagens
   Não é. Ele é consumido por “tamanho/variante de imagem”. A página do plug-in avisa claramente que “As conversões deduzem um crédito adicional de 1 para cada tamanho de imagem”.
2. Os plug-ins de temas/e-commerce estão gerando muitos tamanhos e os créditos gratuitos estão caindo significativamente
   Quanto maior for o número de tamanhos, mais fácil será o aumento de escala e o consumo dos créditos.
3. Depois de habilitar a conversão, você descobre que os créditos ficaram subitamente sem uso.
   Não se trata de um bug, mas de seu mecanismo de faturamento.
   Conselhos sobre estratégia:

• Se a fase gratuita for usada principalmente para compactação e redução de peso, você poderá começar apenas com a compactação e, em seguida, ativar a conversão quando tiver certeza de que a estrutura do seu site é estável e que você realmente precisa da próxima geração.

4. recomendação de subcenário: como escolher diferentes tipos de locais

Além disso, o WordPress, os sites de conteúdo, os sites de comércio eletrônico, os portfólios e os sites de associação não têm os mesmos “pontos de pressão” para imagens.

4.1 Sites/blogs de conteúdo (muitos gráficos de artigos, frequência média de atualizações)

Recomendações prioritárias:

1. Estratégia de dimensionamento (Etapa 1)
2. Compressão (Etapa 2)
3. WebP (Etapa 3)

Uma rota mais adequada:

• Deseja salvar: Route B Triple Choice (ShortPixel / Imagify / TinyPNG)
• Se você quiser usar o modo gratuito: Rota A (Plus WebP + EWWW), mas é recomendável começar com o “modo conservador (sem excluir a imagem original)” para avaliar o risco.

Poço típico:

• A primeira imagem da página do artigo é muito grande, estratégia de carregamento preguiçoso inadequadaA primeira tela fica mais lenta

4.2 Site de comércio eletrônico/produto (muitas miniaturas, muitas variantes de imagem, estabilidade em primeiro lugar)

É mais provável que o problema do comércio eletrônico não seja “o efeito da compactação não é bom”, mas sim “o tamanho otimizado não é o correto, faltam miniaturas, os componentes frontais não conseguem visualizar a imagem”.

Recomendações prioritárias:

1. Estabilidade em primeiro lugar: estratégia de compactação conservadora, não faça uma substituição completa da biblioteca imediatamente
2. Avaliação dos tamanhos das miniaturas: os temas de comércio eletrônico geralmente geram mais tamanhos, e o consumo de quantidade é ampliado (ShortPixel/TinyPNG é particularmente perceptível)
3. Faça a validação em pequena escala antes do lote (muito importante)

Uma rota mais adequada:

• A rota B tende a ser mais descomplicada: ShortPixel/Imagify/TinyPNG podem ser todos em lote, e é fundamental que você entenda o mecanismo de cotas e avalie o custo com antecedência
• A rota A é adequada, mas tenha mais cuidado com o comportamento “sobrescrever IDs/excluir imagens originais/substituir URLs” do Plus WebP: trata-se de uma migração de ativos e não é recomendável substituir tudo logo de cara.

4.3 Portfólio/estação fotográfica (sensível à qualidade de uma única imagem, imagens grandes, alta demanda de visualização)

Recomendações prioritárias:

1. Estratégia de tamanho (controle da área de exibição)
2. Estratégia de compressão (é melhor ser maior do que esmagar os detalhes)
3. WebP/AVIF (os ganhos de cena em imagens grandes são óbvios, mas verifique a visualização)

Uma rota mais adequada:

• ImaginarDeduza a cota de acordo com o “tamanho da imagem original”, esse tipo de site é mais fácil de ser “controlado pelo orçamento” (você sabe quanto deduzir para cada imagem grande), mas evita repressões repetidas.
• ShortPixelSe o tamanho da miniatura não for muito grande, os créditos também serão muito intuitivos; mas se você gerar muitos tamanhos +next-gen, o consumo de créditos será ampliado, e você precisará planejar com antecedência.

5 Comparação de cotas/faturamento: colocando “grátis não é suficiente” em perspectiva

Qual é a melhor oferta e quanto tempo durará a gratuidade?

5.1 Três modelos de chargeback

• ShortPixel(créditos)Créditos baseados em “imagem original + número de miniaturas”; créditos adicionais serão deduzidos para cada versão correspondente de WebP/AVIF gerada.
• Imaginar(cota MB)Dedução da cota de acordo com o “tamanho do arquivo original”; quanto mais miniaturas, mais deduções; a reimpressão deduzirá novamente.
• TinyPNG(créditos)Créditos: 500 créditos por mês; a ativação da conversão WebP/AVIF deduz créditos adicionais para cada tamanho de imagem.

5.2 Métodos de estimativa rápida

Você pode estimá-lo da seguinte forma:

1. Encontre uma “imagem original que você carrega com frequência” aleatória e veja qual é o tamanho dela (por exemplo, 300 KB / 1MB / 3MB).
2. Dependendo de quantos tamanhos de miniaturas seu site gera (por exemplo, 5 / 10 / 20)
3. Decida se você deseja gerar WebP/AVIF (sim/não)

Em seguida, use a seguinte “matemática mental” para entender o consumo:

• ShortPixelCréditos por imagem: ≈ (1 + número de miniaturas); se estiver gerando WebP/AVIF, ≈ dobra novamente (já que a versão de última geração também recebe crédito)
• ImaginarCada imagem ≈ (tamanho original + tamanho de cada miniatura) deduz a cota; altere o nível de compactação e a recompactação será deduzida novamente!
• TinyPNG500 créditos gratuitos; se seu site gerar muitos tamanhos por imagem e a conversão estiver ativada, o número de créditos gratuitos cairá significativamente (a página do plug-in fornece uma expectativa visual de “~100 créditos/mês” em comparação com “~50 créditos/mês”)

6. alertas de risco

Risco 1: não permita que vários plug-ins façam a mesma coisa repetidamente

É a “fonte de desastre” mais comum.”

• Rota A:Mais WebP ou AVIF + EWWWW(Divida o trabalho entre os dois, não faça conversões e entregas iguais ao mesmo tempo, ou instale apenas um deles)
• Rota B: ShortPixel / Imagify / TinyPNG escolha três(escolha um para compressão e próxima geração)

Risco 2: além disso, a opção “Substituir ID / Excluir imagem original / Substituir URL” do WebP é uma migração de ativos.

Ênfase adicionada:Mais WebP A descrição afirma claramente que a geração completa substitui o ID da imagem original, exclui o arquivo original e substitui o URL do conteúdo.
Isso significa que não se trata de um “pequeno ajuste que pode ser retirado a qualquer momento”, mas de uma mudança no nível do ativo.

A estratégia sugerida deve ser:

• Primeiro, um pequeno teste (de algumas dezenas a algumas centenas)
• Confirme se a exibição em primeiro plano, as miniaturas e as atualizações de cache estão funcionando corretamente
• Reconsiderar o processamento completo da biblioteca

Risco 3: o consumo real de “créditos gratuitos” de compactação na nuvem depende do número de miniaturas e da seleção da próxima geração.

• ShortPixel: As miniaturas e a próxima geração afetam significativamente os créditos.
• TinyPNGAtivação de WebP/AVIF: A ativação de WebP/AVIF deduz um crédito adicional para cada tamanho de imagem.
• ImaginarDedução de miniaturas: deduzida de acordo com o tamanho da imagem original; quanto mais miniaturas forem deduzidas, maior será a pressão para repetir a dedução!

Risco 4: “WebP/AVIF gerado” não significa “WebP/AVIF está sendo fornecido pelo front office”

Muitas pessoas sentem que “não é mais rápido” após a conversão porque o frontend ainda está produzindo JPG/PNG (o armazenamento em cache/gravação/tagging/negociação do navegador etc. não estão corretos).

7. como verificar se ela entrou em vigor depois de ter sido feita

4 pontos de validação muito simples:

1. Se a mesma página é atualizada uma segunda vez e carrega de forma mais consistente e rápida(Armazenamento em cache e otimização do sentido físico do funcionamento)
2. Os tamanhos das imagens carregadas em telefones celulares e desktops são significativamente diferentes?(responsivo) srcset/sizes (independentemente de funcionarem ou não)
3. Verificação pontual de algumas imagens: se os arquivos/recursos WebP ou AVIF estão presentes(O site está realmente usando próxima geração）
4. Examine algumas imagens: aumente o zoom para ver se elas estão visivelmente enlameadas, se o texto está confuso(a massa comprimida não é excessiva)

Se todos os quatro itens corresponderem, a rota que você escolheu foi executada. Próximo passo. CDN “Camada de entrega”O sistema será mais estável.

8. recomendações para ação

1. Escolha sua rota primeiro:

• Tentando ser o mais livre possível.: Mais WebP ou AVIF + EWWWW (ou apenas um deles)
• Deseja economizar recursos do servidor, pague por crédito para ter mais tranquilidadeShortPixel / Imagify / TinyPNG - escolha um!

2. Faça um pequeno teste primeiro (algumas dúzias)
3. Certifique-se de que está tudo bem antes de enviar
4. São necessárias mais melhorias na estabilidade da entrega:ler CDN Aceleração

problemas comuns

1. quantos plug-ins preciso instalar? Posso instalar todos eles?

Tente pegar apenas uma rota.

• Rota A: Mais WebP ou AVIF + EWWWW Image Optimizer (ou apenas um deles)
• Rota B: ShortPixel / Imagify / TinyPNG - escolha um!
  Na mesma estação, ao mesmo tempo, é permitido que mais de um plug-in faça “compactação/transferência WebP/AVIF/alteração de URL/reescrita de entrega”, o que provavelmente tornará o processo cada vez mais caótico, mas também o mais difícil de verificar.

2) O WordPress já não é compatível com WebP/AVIF? Ainda preciso de um plug-in?

Ele precisa ser separado:
“Suporte para upload/uso” ≠ “Conversão automática/entrega automática”.
O WordPress 6.5 também não converte automaticamente em lote JPG/PNGs antigos para WebP/AVIF, nem faz automaticamente todo o processo de “exportar AVIF/WebP para o navegador com capacidade e fallback” para você. Geralmente, é necessário um plug-in ou serviço para que a biblioteca de mídia histórica funcione.

3) Qual é a etapa mais “gratificante” na otimização de imagens?

Geralmente Obtenha os “tamanhos” corretos primeiro (srcset/sizes).。
Muitos sites são lentos não porque não têm compactação, mas porque a página tem apenas 900 pixels e o usuário é solicitado a fazer o download de uma imagem de 3000 pixels. A compactação economiza KBs, mas o “tamanho errado” fará com que você baixe várias vezes mais dados para nada.

4) Como posso ter certeza de que estou carregando a “imagem menor” e não a imagem original para sempre?

Observe dois fenômenos:

• Ao abrir uma página em um telefone celular, o tamanho da imagem baixada é visivelmente menor do que no desktop
• A mesma imagem é carregada com diferentes tamanhos de recursos em diferentes dispositivos
  Se a imagem original for baixada para sempre, um motivo comum é que o tema/construtor trata a imagem como uma imagem de fundo CSS ou saída personalizada, ignorando o redimensionamento múltiplo da biblioteca de mídia com srcset.

5) “WebP/AVIF generated” significa que o frontend deve estar produzindo WebP/AVIF?

Não é igual.
A geração é apenas a “camada de arquivo” concluída; o fato de o front-end realmente fornecer WebP/AVIF depende de reescritas, políticas de marcação de imagens, acessos ao cache, negociação do navegador em vigor e assim por diante. Quando terminar, certifique-se de “verificar algumas imagens quanto aos tipos de recursos”.

6. mais O que há de tão perigoso em WebP ou AVIF? Posso executar toda a biblioteca em um clique?

Seu ponto de risco não é a “compressão”, mas simMudanças nos níveis de migração de ativos：

• A geração completa pode substituir o ID do arquivo de imagem original, excluir o arquivo original e substituir o URL no conteúdo.
  a razão pela qualNão é recomendável substituir toda a biblioteca logo de caraTeste em pequena escala (dezenas a centenas) e tenha backups disponíveis antes de considerar o processamento completo da biblioteca.

7) Qual é a opção entre os dois modos do Plus WebP: manter a imagem original versus substituir e excluir a imagem original?

Simples de entender:

• Modo 1: Manter a imagem original + gerar cópia WebP/AVIF (mais estável)Imagem original: conveniente para reversões, mas o disco aumenta (imagem original + novo formato + miniaturas de vários tamanhos).
• Modo 2: Substituir e excluir a imagem original (mais agressivo)Os discos são menos propensos ao inchaço, mas você está “alterando ativos + alterando referências”, o que torna mais cara a solução de problemas de compatibilidade.
  Quanto mais complexo for o site (comércio eletrônico/multi-plugin/multi-size), mais recomendável será começar com um modelo mais estável.

8) A compactação local gratuita do EWWW Image Optimizer é suficiente? Ela sobrecarregará o servidor?

O EWWW é mais um “compressor local”: ele consome o CPU/IO.
É comum que a carga aumente durante a otimização em lote, o que não significa que ela “não funcione”, mas sim que a estratégia deve ser correta: lote, picos baixos e opções de descarregamento/nuvem, se necessário.
Se estiver buscando economia ou se estiver com poucos recursos de servidor, a Rota B é mais amigável ao servidor.

9. 100 créditos gratuitos/mês do ShortPixel, por que sinto que eles acabaram em algumas fotos?

por conta de créditos não é “número de fotos”.”A próxima geração será ampliada por uma miniatura com a próxima geração:

• A imagem original + cada miniatura conta como crédito
• Se um WebP/AVIF for gerado, um crédito adicional será consumido para cada versão correspondente.
  Portanto, o que você acha que é “1 imagem” pode, na verdade, consumir cerca de “créditos de 2 dígitos”. shortPixel

10. 20MB/mês gratuito da Imagify, por que ele também se esgota rapidamente?

A Imagify é mais parecida com um “pacote de tráfego”:

• Como você enviou.Tamanho do arquivo originaldedução de cotas
• Quanto mais miniaturas você tiver, mais você consome
• Alterar o nível de compactação para re-otimizar consumirá a cota novamente
• Mesma chave de API para vários sites, compartilhamento de cotas
  Portanto, “20MB se esgotará em breve” geralmente é causado por imagens muito grandes, muitas miniaturas ou tentativas e erros repetidos.

11. o TinyPNG é gratuito por 500 créditos/mês, por que o plug-in diz que são apenas 100 créditos/mês e depois 50 créditos/mês com WebP/AVIF?

Porque os créditos do TinyPNG também são ampliados por “size/variant”:

• Uma instalação normal do WordPress provavelmente comprime cerca de 100 folhas/mês.
• Habilite a conversão AVIF ou WebP:Cada tamanho de imagem consome um crédito adicionalPortanto, você provavelmente só poderá compactar e converter cerca de 50 imagens/mês (dependendo do número de tamanhos de miniaturas).
  Portanto, 500 créditos ≠ 500 imagens.

12. quantas miniaturas existem em meu site? Por que isso é tão importante?

O WordPress gera vários tamanhos para o upload de uma imagem; temas/plugins (especialmente de comércio eletrônico) podem adicionar mais tamanhos.
Os créditos/cotas de compactação na nuvem geralmente são “originais + miniaturas juntas”, portanto, quanto mais miniaturas você tiver, menos créditos gratuitos terá para usar.

13 O carregamento lento é sempre mais rápido? Por que algumas pessoas dizem que o carregamento preguiçoso torna as coisas mais lentas?

O carregamento lento é adequado para “recursos fora da tela”.
Se a primeira tela da imagem grande mais importante também tiver o carregamento atrasado, isso poderá tornar a experiência da primeira tela mais lenta. O WordPress 5.5, desde o carregamento preguiçoso padrão, é bom, mas não é “um tamanho único”.

14. estou viajando na rota A ou B. Quando preciso do CDN / Picture CDN?

A compactação, o dimensionamento e a formatação resolvem o problema dos “arquivos menores que cabem”;
O CDN soluciona o problema de fornecer um sistema mais próximo e mais estável。
Quando as imagens são extraídas do site de origem por longas distâncias, resultando em uma latência significativa, a suplementação de CDN/imagens com CDN (por exemplo, Cloudflare Polish / Jetpack Site Accelerator) será mais estável em geral, leia Aceleração do WordPress CDN。

15 Qual é a maneira mais fácil de verificar se “realmente funciona” quando eu terminar?

O método de verificação mais eficiente em termos de tempo:

• Se a mesma página é atualizada uma segunda vez e carrega de forma mais consistente e rápida
• Os tamanhos das imagens carregadas em telefones celulares e desktops são visivelmente diferentes (o srcset/sizes entra em jogo)?
• Verificação pontual de algumas imagens: se os arquivos/recursos WebP ou AVIF estão presentes
• Examine algumas imagens: aumente o zoom para ver se elas estão visivelmente enlameadas, se o texto está confuso