A maior vitória de desempenho que já enviei no WP Adminify' O site de marketing era o ' t um plugin de cache ou um ajuste de CDN. Estava excluindo uma imagem Nosso antigo herói era uma captura de tela PNG de 2.400 px I' d exportado em & quot; qualidade completa" porque eu acreditava teimosamente que PNG significava nítido. Esse arquivo tinha 1,4 MB. Em um Android de gama média acima de 4G, era o maior elemento Contentful Paint - e arrastava o LCP para cerca de 4,1 segundos. Troquei-o por 84 KB WebP na largura real da exibição e LCP caiu sob 1,9 s na mesma tarde Sem código Apenas uma imagem menor.
Isso & #39; s a coisa frustrante sobre SEO de imagem. It & #39; s não exótico Imagens são geralmente a coisa mais pesada na página - muitas vezes perto de metade do total de bytes - e ainda a maioria de nós tratá-los como uma reflexão tardia Nós soltamos uma câmera-original no CMS, tipo & quot; captura de tela & quot; no campo alt, e seguir em frente Então nos perguntamos por que o Principais sinais vitais da Web relatório no Search Console está sangrando vermelho no celular.
Este guia é a lista de verificação que realmente executo em sites de ferramentas.dev e clientes, escrita a partir da perspectiva de alguém que envia essas coisas. I' será honesto sobre o que as ferramentas gratuitas fazem e - igualmente importante - o que elas fazem't. Cada ferramenta de imagem está ligada Toolz.dev roda inteiramente no seu navegador em um <canvas>, então nada que você aparece é carregado em qualquer lugar. Isso tem consequências reais para o seu fluxo de trabalho, alguns bons, outros irritantes. Nós vamos chegar aos dois.
tl;dr: Redimensione a imagem para a largura real da tela primeiro, depois comprima e sirva em um formato moderno. Na prática, são três passagens: Redimensionamento da imagem Para cortar as dimensões dos pixels, imagem compactar Para apertar os bytes, e conversor de formato Para obter o WebP. Adicione
width/heightatributos para interromper a mudança de layout, escrever texto alternativo que um ser humano diria em voz alta e carregar com preguiça qualquer coisa abaixo da dobra Faça isso e seu LCP e CLS melhorem - os dois Core Web Vitals orientados por imagem em que o Google realmente se classifica.
Por que as imagens importam tanto para o SEO?
Dois dos três Core Web Vitals são problemas de imagem disfarçados Maior pintura contente é, na maioria das páginas de conteúdo, a imagem de herói terminando seu download Cumulative Layout Shift é muito frequentemente uma imagem carregando tarde e empurrando o texto para baixo uma linha Ambos são entradas de classificação confirmadas, e ambos são coisas que você corrigir, manipulando imagens melhor - não escrevendo mais conteúdo.
There' s um segundo canal de tráfego que as pessoas esquecem: Imagens do Google Para muitos sites de comércio eletrônico, receitas, viagens e design, a pesquisa de imagens é uma fatia significativa de visitas orgânicas, às vezes um quinto dela Esse tráfego depende inteiramente de coisas que um rastreador pode ler - o nome do arquivo, o texto alternativo, a cópia ao redor e se a imagem é pequena o suficiente para ser indexada prontamente.
E então há o chato, mas real: a largura de banda custa dinheiro e paciência. Uma página que fornece 3 MB de imagens devolve aos usuários móveis nas conexões com os metros antes de verem seu título. As páginas mais rápidas mantêm as pessoas por perto e o engajamento, no entanto, o Google mede isso não faz mal.
Qual formato de imagem você deve realmente usar?
A escolha do formato é onde a maioria das economias vivem e as regras são mais simples do que as guerras de formato que as tornam sólidas.
jpeg é para fotografias - qualquer coisa com gradientes suaves e milhares de It' s com perdas, que é exatamente o que você quer para uma foto de qualidade 75 cores8 a compressão é invisível para um visualizador normal e o arquivo é uma fração do original Don' t usá-lo para qualquer coisa com bordas duras, texto ou transparência.
png é sem perdas Use-o para capturas de tela, logotipos, diagramas e qualquer coisa com regiões de cores planas ou transparência A captura: para uma fotografia, PNG produz um arquivo comicamente grande em comparação com JPEG Meu erro de herói de 1,4 MB foi exatamente isso - uma captura de tela fotográfica forçada em PNG.
WebP é o padrão prático em 2026. Ele tem perdas e perdas, suporta transparência e animação e normalmente atinge 25 a 34% menores que o JPEG na qualidade correspondente. O suporte ao navegador é universal agora. Este é o formato para o qual converto quase tudo.
avif comprime ainda mais - muitas vezes significativamente menor que o WebP - porque ele & #39; s construído no codec de vídeo AV1. It' s um ótimo formato. Mas EU tenho que ser direto com você aqui, porque um monte de guias (incluindo o rascunho deste artigo substituído) dizer-lhe para & quot; basta converter para AVIF" com uma ferramenta on-line, e que & #39; não é como navegador codificação canvas funciona.
VG É para vetores: ícones, logotipos, ilustrações simples. Ele escala infinitamente e permanece minúsculo. É inútil para fotos.
A ressalva do AVIF que ninguém menciona
Aqui está a parte honesta. Toolz.dev's conversor de formato exportação PNG, JPEG ou WebP- e apenas esses três. Ele pode & #39; t saída AVIF, e nem a maioria dos conversores no navegador A razão é técnica: a ferramenta desenha sua imagem em um <canvas> e liga canvas.toBlob('image/webp', quality). O codificador de canvas do navegador envia JPEG, PNG e WebP; ele não envia um codificador AVIF. Portanto, não há como espremer um AVIF de uma tela, ponto final.
você ainda pode ração um arquivo AVIF em - o navegador decodifica AVIF felizmente via new Image(), então um drop-in AVIF é renderizado para o Canvas Fine. Você simplesmente não consegue obter um de volta. É uma assimetria de decodificação, codificação de saída e tropeça nas pessoas constantemente.
Portanto, meu conselho do mundo real: use o formato do conversor de WebP, que cobre 95% da vitória. Se você deseja que o AVIF esteja no topo, gere-o em seu pipeline de construção com sharp, avifenc, ou Squoosh' s codificador offline - que & #39; s onde AVIF pertence de qualquer maneira, porque sua codificação é lenta e você don & #39; t quer fazê-lo à mão para cada imagem.
| formato | melhor para | Perdido? | O conversor Toolz.dev pode emitir isso? |
|---|---|---|---|
| jpeg | fotos | sim | sim |
| png | Capturas de tela, logotipos, transparência | não | sim |
| WebP | quase tudo na web | ambos | sim |
| avif | Compressão máxima em imagens pesadas | sim | Não - use uma ferramenta de construção |
| VG | ícones, logotipos, arte vetorial | N/A | Não (vetor, não tela) |
Como você compacta imagens sem destruir a qualidade?
O erro que mais vejo é comprimir a coisa errada na ordem errada. Comprimir uma imagem de 4.000 px que é exibida em 800px é como selar a vácuo uma mala que você nunca precisou para levar. Redimensione primeiro, comprima o segundo. sempre.
Portanto, o fluxo de trabalho é: Abrir Redimensionamento da imagem, defina o maior tamanho que a imagem realmente renderizará (verifique seu layout - uma imagem corporal do blog geralmente tem 72 px 800 px, não 1920).O redimensionador cabe dentro de sua caixa de destino e nunca estica ou corta, então a proporção é segura. Em seguida, leve essa saída para imagem compactar e puxe a qualidade até que você possa dizer apenas mal - geralmente 78 qualidade para baixo até fotos Visualize previamente o zoom completo antes de você artefatos se escondem em gradientes de tons de pele, não em miniatura.
Um número para ancorar: para conteúdo fotográfico, a Quality 80 é a resposta chata e confiável. eu tenho A/B'D 80 contra 90 em fotos reais de produtos e, com zoom de 100% em um bom monitor, a maioria das pessoas não pode ligar. Mas 80 é frequentemente 40% menor. Abaixo de cerca de 60, você começa a ver artefatos em blocos em áreas lisas, então esse é o piso para qualquer coisa, menos uma pequena miniatura.
Duas pegas de navegador que vão confundir você
Ambos me custaram um tempo real de depuração, então aprenda-os gratuitamente.
PNG transparentes → JPEG torna o fundo preto, não branco. Uma vez converti um logotipo transparente para JPEG e as áreas transparentes saíram em preto sólido Eu assumi que a ferramenta estava quebrada e passei vinte minutos olhando para ela It' s not a bug - it' s the HTML spec Quando você serializa uma tela para um formato sem canal alfa (JPEG), os pixels transparentes são compostos em preto sólido Se você precisar de transparência, mantenha PNG ou use WebP, que suporta alfa Se você deseja especificamente um fundo branco, coloque uma camada branca para baixo primeiro.
Cada re-codificação tira os metadados EXIF e GPS. Como essas ferramentas redesenham a imagem em uma tela nova, a saída não possui EXIF, nem informações da câmera, nem coordenadas GPS incorporadas. Isso e no 39; é uma verdadeira vitória de privacidade - você e no 39; não está publicando acidentalmente a latitude/longitude do seu telefone estampada em uma foto. Mas ele e no 39; também é um gotcha se você estiver confiando em perfis de cores incorporados ou metadados de direitos autorais; esses também vão. Para SEO isso não importa & #39; importa, mas saiba e #39; está acontecendo.
Como funcionam as imagens responsivas e o srcset?
Um telefone renderiza imagens com talvez 390 px de largura. Envio para um arquivo de 1920px desperdiça a maioria dos bytes que você acabou de comprimir cuidadosamente. srcset Corrige isso entregando ao navegador um menu de tamanhos e deixando-o escolher.
<img
src="product-800.webp"
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Matte-black wireless headphones on a walnut desk"
width="800" height="600" loading="lazy" />
Para fazer esses três arquivos, execute a mesma fonte através Redimensionamento da imagem em 400, 800 e 1200px, depois converta cada um para Webp. sizes atributo é a parte que as pessoas pulam, e pulá-lo silenciosamente quebra a coisa toda - sem ele, o navegador assume a imagem preenche a janela de visualização e agarra o maior candidato Diga o quão ampla a imagem realmente renderiza e ele baixa o certo.
Como você escreve texto alternativo que realmente ajuda?
O texto alternativo é a outra metade do SEO da imagem e é o Half Developers Rush. Ele faz três trabalhos ao mesmo tempo: é o que um leitor de tela lê em voz alta para um usuário cego, é como um rastreador entende o que a imagem mostra e é o texto alternativo se a imagem não carregar. Acertar é principalmente escrever como uma pessoa, não como um robô de palavra-chave.
A regra que EU uso: descreva a imagem da maneira que você' d descrevê-lo para alguém em um telefonema Específico, natural, curto - sob cerca de 125 caracteres para leitores de tela don' t truncar desajeitadamente Pular " imagem de & quot; ou & quot; foto de, " porque o leitor de tela já anuncia que ele & #39; s uma imagem; levando com aqueles desperdiça o ouvinte& #39; s tempo E se sua palavra-chave alvo realmente se encaixa na imagem, incluí-lo uma vez, naturalmente Se ele não & #39; t se encaixa, deixá-lo fora - uma foto de um teclado does& #39; t need " buy headphones sem fio baratos " atolado em seu alt.
Alguns antes/depois de avaliações reais que fiz:
alt="image"→alt="Matte-black wireless headphones on a walnut desk"alt="chart"→alt="Bar chart of monthly revenue rising from $10K in January to $45K in December"alt="best cheap headphones buy now free shipping sale"(palavra-chave recheada) →alt="Over-ear headphones with the carrying case open beside them"
Uma nuance que as pessoas erram: imagens puramente decorativas - uma divisória, um floreio de fundo - deveriam ter um vazio alt="", não uma descrição. Um alt vazio diz ao leitor de tela para pular completamente, que é exatamente o que você deseja para decoração. Reserve um texto alternativo real para imagens que carregam informações.
Enquanto você está nisso, nomeie o arquivo descritivamente também. wireless-headphones-matte-black.webp batidas IMG_4532.jpg Como os mecanismos de pesquisa lêem o nome do arquivo como um sinal, e os hífens (não sublinhados) são o separador que o Google analisa à medida que a palavra quebra.
Quanto isso realmente muda os sinais vitais da web do núcleo?
LCP (maior tinta de conteúdo): seu herói geralmente é o elemento LCP. Sirva-o nas dimensões certas, em WebP, na qualidade ~80, e - criticamente - faça não preguiçoso, carregue-o. Carregar preguiçoso O herói acima da dobra é um clássico próprio; ele atrasa o elemento exato que o LCP está medindo. Se for o herói, <link rel="preload" as="image"> em vez disso.
CLS (Transferência de layout acumulado): sempre colocar width e height no <img>. Esses dois atributos permitem que o navegador reserve o espaço antes da chegada da imagem, então o texto não salta quando é carregado. Esta é a única correção CLS mais barata que existe e ainda acho que não há sites que o façam.
INP (interação para a próxima pintura): As imagens não conduzem diretamente o INP, mas uma página sufocando em 3 MB de imagens não otimizadas está deixando o thread principal e a rede da capacidade que seu JavaScript precisa responder. Imagens mais leves, interações mais rápidas, indiretamente.
Algumas coisas que aprendi de uma maneira irritante
Audite antes de otimizar Execute a página através do PageSpeed Insights e corrija o arquivo mais pesado primeiro - o infrator de 1,2 MB importa mais do que raspar 4 KB de um ícone Nomear arquivos como um humano: wireless-headphones-matte-black.webp batidas IMG_4532.jpg na pesquisa de imagens porque o rastreador lê o nome do arquivo como um sinal de conteúdo Escreva o texto alternativo você e #39; na verdade, digamos descrevendo a foto para alguém no telefone - específico, natural, palavra-chaveincluído somente onde cabe, nunca recheado com palavras-chave. E don' esqueça o seu Gráfico aberto compartilhar imagem; um 1200×630 de tamanho correto que você fez Redimensionamento da imagem É o que aparece nas pré-visualizações sociais e, às vezes, na pesquisa.
Perguntas frequentes
A otimização de imagens realmente afeta os rankings de SEO?
Sim, através de Core Web Vitals. LCP e CLS são sinais de classificação do Google confirmados e ambos são fortemente orientados por imagens. As imagens otimizadas normalmente melhoram as pontuações da velocidade da página do celular com uma margem perceptível e no celular que podem se traduzir em movimento de classificação. Ele também desbloqueia o Google Images como uma fonte de tráfego separada.
Posso converter imagens para AVIF com uma ferramenta online gratuita?
Normalmente não, e o conversor de formato do Toolz.dev pode não. Os conversores de navegadores desenham para um <canvas>, e o codificador de tela browser' s apenas produz JPEG, PNG e WebP - there' s nenhum codificador AVIF disponível para ele Converta para WebP on-line durante a maior parte da vitória e gere AVIF em seu pipeline de construção com ferramentas como sharp ou avifenc, se precisar.
Devo usar o WebP ou o AVIF em 2026?
WebP é o padrão seguro e o que EU alcanço primeiro - suporte universal, grandes economias, e você pode fazê-lo no navegador AVIF comprime ainda mais e vale a pena adicionar para grandes imagens de heróis e galerias, mas gere-o em tempo de construção e sirva-o via <picture> com um fallback do WebP.
Para qual configuração de qualidade devo compactar JPEG e WebP?
Qualidade 80 é a resposta confiável para fotos. Geralmente é indistinguível do original na visualização normal, sendo dramaticamente menor. Visualize o zoom de 100% antes de se comprometer, pois os artefatos aparecem em gradientes e tons de pele. Abaixo de 60, a compressão se torna visível.
Por que meu PNG transparente ficou preto após a conversão para JPEG?
Porque JPEG não possui canal alfa. A especificação do Canvas HTML diz que os pixels transparentes são compostos em preto sólido quando você serializa para um formato não-alfa. É um comportamento esperado, não um bug. Mantenha a imagem como PNG ou WebP para preservar a transparência ou complique-a primeiro em um fundo branco se quiser branco.
Essas ferramentas carregam minhas imagens para um servidor?
Não. As ferramentas de imagem no Toolz.dev processam tudo localmente em uma tela do seu navegador - o arquivo nunca sai do seu dispositivo. Um efeito colateral que vale a pena saber: cada recodificação retira metadados EXIF e GPS, o que é bom para a privacidade, mas significa que os dados da câmera incorporados e os perfis de cores também são descartados.
Qual é o tamanho ideal de arquivo para uma imagem da web?
Como alvo aproximado: imagens de heróis com menos de 200 KB, imagens no conteúdo abaixo de 100 KB e miniaturas abaixo de 30 KB. Esses são muito alcançáveis quando você redimensiona para a largura real da tela e atende WebP. O número exato importa menos do que o hábito de redimensionar e depois comprimir-converter.
Leituras e ferramentas relacionadas:
- imagem compactar- corte o tamanho do arquivo após o redimensionamento
- Redimensionamento da imagem- faça tamanhos responsivos e imagens sociais
- conversor de formato- exporte PNG, JPEG ou WebP
- Guia de ferramentas de imagem do desenvolvedor
- Compressão de imagem explicada
