Otimize imagens para a web no Windows

Otimize imagens para a web no Windows com um fluxo de trabalho focado em redimensionamento, comparação de formatos, variantes responsivas, verificações visuais e entrega medida em produção.

Comece pela requisição de rede, não pela exportação do design. Uma foto de produto de 3000 pixels pode parecer correta em um card de 640 pixels porque o CSS a reduz, mas o navegador ainda transfere a fonte grande. O fluxo de trabalho no Windows abaixo encontra essa inconsistência, cria variantes sensatas e verifica a página após a implantação.

Encontre as imagens que mais custam

Abra a página no Microsoft Edge, pressione F12, selecione Network (Rede), recarregue e filtre por Img. Ordene pelo tamanho transferido. Registre três fatos para cada requisição cara:

As dimensões em pixels do arquivo.
Sua largura renderizada no painel Elements.
Se está acima da dobra ou carregada posteriormente.

Um banner principal renderizado a 1200 pixels pode precisar de uma fonte de 1920 ou 2400 pixels para telas densas. Raramente precisa da exportação original de câmera de 6000 pixels. Um card renderizado a 360 pixels não deve solicitar o mesmo arquivo do banner principal.

Redimensione uma imagem no Paint

O Paint é suficiente para corrigir uma única fonte grande demais:

Abra a imagem e escolha Redimensionar e inclinar.
Mantenha Manter proporção ativado.
Insira a largura em pixels necessária, não uma porcentagem estimada pelo tamanho do arquivo.
Use Salvar como para que a versão original permaneça intacta.

Para um card de 640 pixels, crie um candidato padrão de 800 pixels e um candidato para telas densas de 1280 pixels. Verifique textos pequenos e bordas finas de produtos após o redimensionamento. Se a fonte contiver transparência, não a salve como JPEG.

Redimensionamento em lote com PowerToys

O Microsoft PowerToys inclui Image Resizer , que adiciona comandos de redimensionamento ao Explorador de Arquivos. Defina larguras que correspondam aos pontos de interrupção reais do site, como 480, 960 e 1600 pixels, e crie cópias em vez de substituir os originais.

O PowerToys é útil para dimensões, mas não é um pipeline de entrega completo. Nomeação de arquivos, conversão de formato, marcação responsiva e revisão visual ainda importam. Coloque os candidatos gerados em uma pasta separada para que não sejam confundidos com a arte-fonte.

Escolha entre JPEG, PNG, WebP ou AVIF

Ativo	Formato de entrega sensato	Verifique de perto
Foto de produto ou editorial	WebP, AVIF ou JPEG	Textura, gradientes, tons de pele
Captura de tela com texto pequeno	PNG ou WebP de alta qualidade	Bordas dos glifos e linhas finas
Logotipo ou ícone	SVG quando a fonte é vetorial	View box correto e rótulo acessível
Transparência com sombras suaves	WebP ou PNG	Halos em fundos claros e escuros

Não converta todos os PNGs para JPEG. Isso pode remover a transparência e criar anéis ao redor do texto. Não converta uma foto JPEG para PNG também; geralmente aumenta o tamanho do arquivo sem restaurar os detalhes perdidos. Veja compressão com perdas e sem perdas para entender o tradeoff subjacente.

Entregue imagens responsivas corretamente

A compressão sozinha não torna uma imagem responsiva. Forneça candidatos de largura e deixe o navegador selecionar um:

<img
  src="product-960.webp"
  srcset="product-480.webp 480w, product-960.webp 960w, product-1600.webp 1600w"
  sizes="(max-width: 720px) 100vw, 50vw"
  width="960"
  height="640"
  alt="Black travel bag open to show the interior compartments"
>

O Google recomenda elementos de imagem padrão, texto alt útil, candidatos responsivos e um fallback src em seu guia de SEO de imagens . Largura e altura reservam espaço de layout. O texto alt deve descrever o propósito da imagem, não repetir uma lista de palavras-chave.

Verifique o resultado no Edge

Recarregue com o cache desativado nas larguras de desktop e mobile. Confirme que o navegador escolhe o candidato srcset esperado, que o banner não desloca o layout e que o texto permanece legível. Em seguida, use o PageSpeed Insights ou dados de campo para determinar se as alterações nas imagens melhoraram a página real. O Google trata as Core Web Vitals como uma parte da experiência da página, não como substituto para conteúdo útil.

Para imagens de produtos não lançados, mantenha a conversão local até a publicação. Veja riscos de privacidade de compressores online no Windows antes de enviar ativos sob embargo para um serviço de terceiros.

Quando o GetCompress se encaixa na preparação de ativos web

Paint e PowerToys são suficientes para redimensionamentos ocasionais. O GetCompress é a melhor opção quando uma equipe do Windows recebe repetidamente fontes mistas de PNG, JPEG, HEIC, TIFF e outras que precisam de dimensões consistentes, variantes de formato e revisão visual. Presets salvos e filas em lote preparam cópias de entrega locais antes que entrem no repositório ou CMS.

Ele não substitui a marcação responsiva, configuração de CDN, cache ou medição de desempenho. Teste a página implantada e mantenha as mestres-fonte separadas dos ativos web gerados.