3 min read · 817 words
Dicas Práticas / Gestão de Blog / Python e Automação de Imagens
Cerca de 2.500 caracteres
Em artigos de instruções (how-to) ou tutoriais, uma única captura de tela (screenshot) é mais poderosa do que mil palavras. No entanto, ao analisar os artigos do nosso site, percebemos que a maioria dos concorrentes apenas insere capturas de tela sem nenhuma anotação. Eles não usam caixas vermelhas para indicar onde clicar, nem setas para guiar o olhar do leitor. Por isso, automatizamos o processo para garantir que todos os nossos guias tenham capturas de tela devidamente anotadas. Explicamos a seguir como criamos essa solução, como ela funciona, quais foram os resultados e como a validamos.
Por que criamos isso
O erro mais comum em artigos de "como fazer" é ter o texto "clique neste botão" ao lado de uma captura de tela onde não dá para saber qual é o botão. O leitor perde de 1 a 2 segundos varrendo a tela com os olhos, e esse pequeno atraso pode levá-lo a abandonar a página.
Além disso, o grande diferencial de SEO para artigos de guia é o sinal de que "este artigo realmente ajuda passo a passo". Capturas de tela sem anotações transmitem esse sinal de forma fraca. Já imagens com caixas vermelhas, números e setas dão a impressão imediata de que "este é um guia de verdade".
O problema é que fazer isso manualmente em todos os artigos leva de 1 a 2 horas por post. Usar ferramentas como Photoshop, Figma ou Snagit para desenhar caixas -> setas -> números -> texto -> salvar consome de 10 a 20 horas para cada 10 artigos. Por isso, decidimos automatizar.
Como funciona
O fluxo completo consiste em 4 etapas.
1. Coleta de capturas de tela
Extraímos palavras-chave de dentro das seções H2 (por exemplo, "Configuração do Google Search Console") e usamos a API de Pesquisa de Imagens do Bing para obter 5 candidatas. Escolhemos o Bing porque ele possui filtros robustos de SafeSearch e licença, além de oferecer um limite generoso para chaves de API gratuitas.
import httpx
import os
BING_API_KEY = os.environ["BING_API_KEY"]
def search_screenshot(keyword: str, count: int = 5) -> list[dict]:
r = httpx.get(
"https://api.bing.microsoft.com/v7.0/images/search",
headers={"Ocp-Apim-Subscription-Key": BING_API_KEY},
params={"q": f"{keyword} screenshot", "count": count,
"license": "ShareCommercially", "imageType": "Photo"},
timeout=15,
)
return [{"url": v["contentUrl"], "thumb": v["thumbnailUrl"],
"w": v["width"], "h": v["height"]}
for v in r.json().get("value", [])]
2. Filtragem automática de candidatas
Das 5 imagens recebidas, eliminamos as que são muito pequenas (menos de 600px de largura), muito grandes (mais de 5MB) ou que provavelmente contêm marcas d'água (detecção múltipla de logotipos de fornecedores). Apenas as 1 ou 2 restantes passam para a próxima etapa.
3. Inserindo anotações com PIL
Esta é a etapa principal. Usamos a biblioteca Pillow para desenhar caixas, setas, números e textos.
from PIL import Image, ImageDraw, ImageFont
def annotate(img_path: str, boxes: list[dict], out_path: str) -> None:
"""Exemplo de boxes: [{'rect': (x,y,w,h), 'label': '1', 'text': 'Clique aqui'}]"""
im = Image.open(img_path).convert("RGB")
draw = ImageDraw.Draw(im)
font_big = ImageFont.truetype("fonts/pretendard/Pretendard-Bold.ttf", 28)
font_small = ImageFont.truetype("fonts/pretendard/Pretendard-Medium.ttf", 18)
for b in boxes:
x, y, w, h = b["rect"]
# Caixa vermelha (borda de 3px)
draw.rectangle([x, y, x + w, y + h], outline="#dc2626", width=3)
# Emblema numérico no canto superior esquerdo
draw.ellipse([x - 14, y - 14, x + 28, y + 28], fill="#dc2626")
draw.text((x + 7, y - 8), b["label"], fill="#fff", font=font_big)
# Uma linha de descrição abaixo da caixa
if b.get("text"):
draw.text((x, y + h + 8), b["text"], fill="#dc2626", font=font_small)
im.save(out_path, "JPEG", quality=88, optimize=True)
Para obter as coordenadas das caixas, perguntamos ao LLM "onde nesta captura de tela devemos dar destaque" e convertemos as coordenadas proporcionais recebidas (no intervalo de 0 a 1) em pixels.
4. Upload para o ImgBB e inserção no corpo do texto
Fazemos o upload do JPG anotado usando a API do ImgBB para obter uma URL permanente. Em seguida, inserimos a tag
Isso é chamado como uma das etapas da cadeia de hooks de publish_post. É acionado apenas quando se trata de um artigo de guia (post_type=howto), sendo ignorado em artigos de comparação ou de notícias.
Resultados reais
- Tempo médio de permanência nos artigos de guia: 1m30s -> 2m25s (+60%)
- Taxa de entrada na primeira página para artigos de guia (GSC): 18% -> 34%
- Economia de tempo de trabalho manual: 1 a 2 horas por artigo -> 0 segundos
- Capturas de tela anotadas automaticamente publicadas: cerca de 240 imagens (
Category Coverage Notice
This article follows our label-specific editorial criteria. Details: