Comece pela imagem que o leitor realmente vê
Analise as dimensões renderizadas, o recurso selecionado, os bytes transferidos e o papel da imagem na página. Um diagrama com rótulos pequenos precisa de um tratamento diferente de uma fotografia. Um arquivo de origem grande não precisa ser entregue sem alterações a todos os visitantes.
Identifique o elemento Largest Contentful Paint real em um trace. Ele pode ser um texto, e não uma imagem. Otimizar uma miniatura abaixo da dobra não vai resolver uma folha de estilo que bloqueia a renderização e não tem relação com ela.
Escolha formato e qualidade para cada arquivo
Compare AVIF e WebP com o seu JPEG ou PNG atual nos tamanhos que as pessoas vão usar. Confira bordas, degradês, tons de pele, transparência e texto. A economia de tamanho depende do conteúdo e das configurações do codificador; uma porcentagem universal não é uma meta de qualidade útil.
Use SVG para diagramas e ícones adequados, para que rótulos e linhas continuem nítidos, e mantenha uma versão rasterizada para plataformas de compartilhamento quando necessário. A explicação essencial também deve aparecer em HTML. Não chame de “sem perdas” uma imagem com perdas só porque ela atinge uma alta pontuação de similaridade perceptual.
Escreva uma marcação responsiva que corresponda ao layout
O exemplo a seguir supõe uma imagem de largura total dentro de uma coluna de conteúdo de 48rem, com margens de 1rem em telas pequenas. Ajuste sizes ao seu layout real. O navegador usa as larguras candidatas, o tamanho do espaço e as condições do dispositivo para escolher um recurso.
<picture>
<source type="image/avif"
srcset="/media/diagram-480.avif 480w,
/media/diagram-960.avif 960w,
/media/diagram-1440.avif 1440w"
sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem">
<img src="/media/diagram-960.webp"
srcset="/media/diagram-480.webp 480w,
/media/diagram-960.webp 960w,
/media/diagram-1440.webp 1440w"
sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem"
width="1440" height="900"
loading="eager" fetchpriority="high" decoding="async"
alt="Public requests pass through a cache before the origin">
</picture>Para uma imagem de apoio fora da tela, use carregamento lento e prioridade de busca normal. Largura e altura reservam a proporção; o CSS ainda pode deixar a imagem fluida. Mantenha as variantes com a mesma proporção, a menos que você esteja usando direção de arte de propósito.
Use o fluxo de imagens do WordPress sempre que possível
Para imagens da Biblioteca de Mídia, use as funções de imagem de anexo do WordPress para que os tamanhos disponíveis e os atributos responsivos sejam gerados a partir dos metadados do anexo. Verifique a saída: marcação personalizada ou variantes ausentes podem anular essas vantagens. As ilustrações do tema podem usar um conjunto de tamanhos explícito e versionado.
O texto alternativo deve transmitir a informação que a imagem acrescenta. Repetições decorativas do título ao lado podem usar um atributo alt vazio. Não transforme o texto alternativo em uma lista de palavras-chave.
Valide a entrega e o comportamento do cache
- Confira as URLs de imagem selecionadas em telas estreitas e largas, incluindo densidades de pixels maiores.
- Garanta que a imagem principal possa ser detectada sem esperar pelo JavaScript.
- Verifique a qualidade da imagem no tamanho real de exibição, não apenas em uma pré-visualização pequena.
- Confirme que as mídias fora da tela não dominam a transferência inicial.
- Se uma CDN negocia formatos, verifique se as chaves de cache distinguem as respostas corretamente.
- Versione os arquivos alterados ou limpe os caches relevantes para que os leitores recebam a atualização.
Perguntas frequentes
Você precisa de uma CDN de imagens?
Uma CDN com transformações pode simplificar uma biblioteca de mídia grande e que muda com frequência. Um blog pequeno pode ser bem atendido por algumas variantes geradas e um cache estático comum. Compare o custo contínuo, a complexidade operacional e a economia real de transferência antes de adicionar outro serviço.
A imagem principal do hero deve usar carregamento lento?
Normalmente não, quando ela aparece de imediato ou é o elemento LCP da página. Deixe a URL detectável no HTML inicial, ofereça candidatas responsivas adequadas e considere a prioridade de busca alta de forma seletiva. Use carregamento lento nas imagens de apoio que começam abaixo da área visível inicial.
AVIF é sempre melhor que WebP?
Nenhum formato ou configuração de qualidade vence em todas as imagens. Compare o tamanho resultante e a qualidade visual no arquivo real, incluindo rótulos finos, degradês e transparência. Mantenha um fallback adequado e verifique o arquivo que o navegador escolhe.
Por que as imagens precisam de largura e altura se o layout é responsivo?
Esses atributos estabelecem uma proporção intrínseca para que o navegador reserve espaço antes que a imagem chegue. O CSS ainda pode deixá-la fluida. Use dimensões corretas e fontes responsivas e depois verifique o layout real em busca de deslocamentos. O guia de velocidade para WordPress situa a entrega de imagens no fluxo de trabalho de desempenho mais amplo.
Fontes e leituras recomendadas
Continue explorando
Continue com o diagnóstico das Core Web Vitals ou com o checklist completo de desempenho.
Leave a Reply