Biblioteca·SOP·SEO
Escolha imagens úteis, reduza arquivos grandes sem perder detalhes, escreva textos alternativos e confira a página no celular e no computador.
Última revisão: · Revisão editorial
Clareza, estrutura e referências revisadas nesta versão. Não equivale a um teste em uma conta real.
Escolha imagens que ajudem os leitores, redimensione e comprima arquivos grandes sem perder detalhes úteis, adicione-os no Editor de Blocos do WordPress, escreva textos alternativos úteis e confira a página final no celular e no computador.
Este SOP abrange:
Não abrange:
Revise uma imagem por vez. Mantenha, substitua ou adicione uma imagem apenas quando ela tornar a página mais clara ou útil.
Para cada imagem da página, decida o que o leitor deve aprender ou enxergar nela. Mantenha uma imagem que apoie uma explicação próxima, substitua uma que seja pouco clara ou desconectada do assunto e adicione uma imagem apenas quando ela ajudar com uma pergunta ou tarefa real.
Pergunte se a imagem mostra um detalhe, etapa, comparação ou resultado que seria mais difícil de entender apenas pelas palavras. Em um guia para cultivar tomates em vasos, uma foto clara dos furos de drenagem do vaso ao lado das instruções de drenagem pode ajudar; uma foto genérica de flores junto das mesmas instruções acrescenta pouco.
Mantenha uma imagem útil. Substitua-a se o assunto ou a qualidade não forem adequados. Adicione uma nova imagem somente quando ela ajudar a responder à pergunta do leitor. Se uma imagem for apenas decoração visual, ela pode permanecer, mas não precisa de texto alternativo descritivo.
Use uma imagem que pertença ao site ou para a qual exista permissão de uso. Antes de usar uma imagem de terceiros, confira a licença, os créditos obrigatórios e as restrições. Se a permissão não estiver clara, pergunte ao proprietário do site ou escolha uma fonte confirmada antes de fazer o upload.
Salve o arquivo de imagem no computador, preserve um original sem alterações e nomeie uma cópia de trabalho antes de editar.
Se a imagem já estiver no WordPress e você não tiver o arquivo, abra Media > Library. Clique na miniatura para abrir Attachment details e escolha Download file. Encontre a imagem baixada na pasta Downloads do computador.
Faça uma cópia do arquivo de imagem. Mantenha o original intacto e use a cópia para redimensionamento e compressão. Se a imagem já estiver no computador, comece com esse arquivo.
Renomeie a cópia de trabalho com uma descrição curta do que ela mostra, usando hífens entre as palavras. Por exemplo, tomato-pot-drainage-holes.jpg é mais claro que IMG17348.jpg. Não altere a extensão, como .jpg ou .png.
Prepare um arquivo menor somente quando o original for maior que o necessário para esta página. Preserve o original sem alterações e siga estas etapas antes de substituir a imagem no rascunho.
No rascunho do WordPress, selecione o bloco Image em que essa imagem será inserida. Se necessário, coloque o original ao lado do parágrafo que ele apoia. Em Settings > Block > Dimensions, use Width se houver um número. Se aparecer Auto, insira um valor de teste, como 800 px para uma imagem grande de artigo, mantenha Height em Auto e pré-visualize a página. Ajuste Width até a imagem caber na coluna de texto e seu detalhe importante ficar claro. Use a largura escolhida no Squoosh abaixo; não amplie o original.
Abra o Squoosh e escolha Drop OR Paste para carregar a cópia de trabalho. Mantenha o original intacto em um local seguro até conferir o resultado.
No Squoosh, habilite Resize, insira a largura anotada e preserve as proporções para não distorcer a imagem. Não amplie a origem. Para uma foto, escolha MozJPEG (JPEG) e reduza a qualidade aos poucos. Para uma imagem transparente ou desenho com linhas nítidas, mantenha PNG. Compare antes e depois no mesmo zoom e confira os dois tamanhos de arquivo; mantenha apenas um resultado menor que ainda mostre claramente os detalhes importantes.
Salve ou baixe o resultado. Na pasta de downloads, dê a ele um nome curto que descreva o conteúdo, como tomato-pot-drainage-holes.jpg, preservando a extensão correspondente ao tipo escolhido. Use a exportação apenas se for menor e continuar nítida. Se houver perda de detalhes, aumente a qualidade ou use o original. Preserve o original até que o WordPress mostre o novo arquivo com clareza.
Use o bloco Image do Editor de Blocos. Mantenha o texto alternativo focado na finalidade da imagem nesta página.
Abra o post ou a página no Editor de Blocos e adicione a imagem preparada perto do parágrafo que ela apoia. Se você colocou o original no rascunho para definir a largura de exibição, substitua essa imagem temporária pela exportação conferida.
Selecione o inseridor de blocos (+), escolha Image e envie o arquivo preparado ou selecione-o na Biblioteca de Mídia. Para substituir uma imagem, selecione-a e use Replace. Use uma imagem autorizada salva na Biblioteca de Mídia em vez de depender de uma URL de arquivo de terceiros que possa parar de funcionar.
Posicione a imagem junto ao texto que ela apoia. Uma foto de furos de drenagem deve ficar perto das instruções para conferir a drenagem, não em uma seção sem relação.
Selecione cada imagem e configure o texto alternativo nas opções do bloco. O texto alternativo é uma descrição curta para pessoas que não conseguem ver a imagem; o WordPress pode identificá-lo como Alt text ou Alternative text.
Para uma imagem que acrescente informação, escreva a descrição mais curta que transmita o detalhe importante no contexto. Por exemplo, Furos de drenagem sob um vaso de tomateiro é útil ao lado de uma verificação de drenagem. Se a imagem for um link, descreva seu destino ou ação. Não repita o texto próximo nem encha a descrição de palavras-chave.
Se a imagem não acrescentar informação e não for um link ou botão, marque-a como decorativa ou deixe o texto alternativo vazio. Para um gráfico ou diagrama detalhado, forneça também os dados ou a explicação importante no texto próximo da página; um texto alternativo longo não substitui a informação completa.
Adicione uma legenda abaixo da imagem apenas quando ela oferecer contexto útil ou o crédito obrigatório da foto. Não use a legenda para repetir o texto alternativo palavra por palavra.
Escolha um tamanho de exibição e alinhamento que combinem com o conteúdo ao redor e mantenham os detalhes importantes visíveis.
Use a configuração Resolution ou a alça de redimensionamento do bloco Image para escolher o tamanho disponível mais próximo do espaço. As opções variam conforme o arquivo enviado e o tema. Não estique uma imagem pequena até ficar borrada; se necessário, escolha o próximo tamanho disponível.
Preserve a parte da imagem que o leitor precisa ver. Use a largura padrão ou uma largura suportada, a menos que uma imagem mais larga melhore a compreensão. Evite envolver imagens grandes com texto, pois isso pode dificultar a leitura no celular.
Salvar uma alteração no editor não é a verificação final. Revise a página renderizada nos tamanhos que as pessoas usam.
Salve o trabalho e abra a pré-visualização. Confira a imagem em uma largura de computador e em uma largura estreita de celular.
Na largura de computador, confirme que a imagem está nítida, corretamente recortada e próxima do texto que explica. Confira se a legenda ou o crédito está legível.
Na largura de celular, confirme que a imagem cabe na tela, não sobrepõe o texto e continua mostrando o detalhe importante. Se o recorte ou o contorno de texto esconder esse detalhe, volte ao editor e ajuste o tamanho ou alinhamento.
Volte ao editor e selecione cada imagem alterada. Confirme que o arquivo, o texto alternativo específico da página ou a configuração decorativa, a legenda e o tamanho de exibição correspondem às escolhas feitas.
