Orçamentos de Qualidade de Imagem e Portões CI 2025 — Operações para Prevenir Falhas Proativamente

TL;DR

• Limiares definidos por aplicação (miniatura/herói/alta resolução) com configuração em estágios
• Métricas são auxiliares—estabelecer operação onde julgamento final é visual
• Fluxo automático para rollback/re-codificação quando orçamento excedido

Links internos: Guia Prático de Métricas de Qualidade de Imagem SSIM/PSNR/Butteraugli 2025, Estratégia Definitiva de Compressão de Imagem 2025 — Guia Prático para Otimizar Velocidade Percebida Preservando Qualidade, Consistência de Cores P3→sRGB Guia Prático 2025, Fluxo de Trabalho HDR para sRGB Tonemapping 2025, Otimização de Entrega de Imagens Era Edge Design CDN 2025

Contexto

Na prática, "degradação de qualidade/inchaço de tamanho passando despercebido" acontece frequentemente. Ao incorporar orçamentos e métricas no CI, paramos deterioração silenciosa.

Design de Escopo (Quais Ativos Proteger)

• Classificação: Miniaturas (listagem) / Herói (página de destino) / UI (logo/ícones) / Detalhes do produto (suporte zoom)
• Objetivos diferentes: Miniaturas priorizam volume de transferência/eficiência de cache, Herói prioriza qualidade visual, UI prioriza precisão de pixel
• Para cada um definir "Orçamento de Volume", "Portões de Qualidade", "Política de Gerenciamento de Cor"

Exemplos:

• Miniaturas: Média ≤ 25KB (AVIF/WebP), SSIM ≥ 0.98, LPIPS ≤ 0.08
• Herói: Média ≤ 180KB, Butteraugli ≤ 1.2, espaço de cor normalizado para sRGB
• UI/Logo: Sem perdas quando necessário (WebP/PNG), subsampling proibido (4:4:4)

Seleção de Métricas (Quando/Quais Usar)

• SSIM/MS-SSIM: Rápido/estável, forte em texturas mas às vezes perde diferenças sutis de cor
• LPIPS: Orientado à percepção, próximo à sensação em pequenas diferenças. Custo computacional aumenta
• Butteraugli: Forte na detecção de mudanças de cor. Eficaz para manifestação de diferenças ICC/espaço de cor
• PSNR: Apenas como valor de referência. Uso para julgamento de limiar não recomendado

Combinação com gerenciamento de cor:

• Respeitar ICC de entrada, unificar avaliação no espaço de cor de entrega (normalmente sRGB).
• Processo de conversão P3→sRGB com clipping/tonemap pode ser numericamente bom mas visualmente NG (artigos relacionados: Consistência de Cores P3→sRGB Guia Prático 2025, Fluxo de Trabalho HDR para sRGB Tonemapping 2025).

Design (Arquitetura)

• Versionar Golden Set (imagens representativas) com Git, caminhos fixos como /testdata/golden/
• Comparar outputs (/run/_/generated/...) em PRs, agregar métricas diff
• CI fail quando limiar excedido. Visualizar através de labels/comentários "qual imagem, qual métrica, quanto excesso"
• Permitir updates de baseline apenas com aprovação de Approver dedicado (Designer/Lead) (guard de permissão)

Operação

Operação do Golden Set

• Coleta: Cobrir pele/textura/linhas finas/gradientes/baixa luminosidade/alta saturação representativos
• Updates: Apenas em renovação de layout/branding. Manter baseline em discussões normais de qualidade
• Auditoria: Registrar em CHANGELOG quem/quando/por que atualizou baseline

Visualização/Alertas

• Exibir em dashboard séries temporais de cada classe (média/95º percentil) e desvios de PRs recentes
• Proximidade de limiar é Warning, excesso é Block. Warnings contínuos são sinal para revisão de "limiar ou preset"

Posicionamento do Olho Humano

• Mesmo com pass de métricas, pode perder desfoque de borda de logo/colapso de gradação de pele → tornar obrigatória apenas a inspeção visual de padrões representativos

Padrão de Implementação CI (Exemplo)

Exemplo GitHub Actions (pseudo):

name: image-quality-gates
on: [pull_request]
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm run build:images # Criar outputs
      - run: node scripts/ci/collect-metrics.mjs --golden ./testdata/golden --actual ./run/_/generated --out ./run/_/metrics.json
      - run: node scripts/ci/enforce-budgets.mjs --config ./scripts/ci/budgets.json --metrics ./run/_/metrics.json

Imagem de budgets.json:

{
  "thumbnail": { "sizeKB": 25, "ssim": 0.98, "lpips": 0.08 },
  "hero": { "sizeKB": 180, "butteraugli": 1.2 },
  "ui": { "lossless": true, "chroma": "4:4:4" }
}

Geração de Diff/Coleta de Métricas (Pseudo-código)

import { readFileSync } from 'node:fs';
// Enumerar pares de imagens e executar SSIM/LPIPS/Butteraugli (chamadas de ferramentas externas também OK)
type Pair = { golden: string; actual: string; class: 'thumbnail' | 'hero' | 'ui' };
function evaluate(pairs: Pair[]) {
  return pairs.map(p => ({
    ...p,
    sizeKB: bytes(readFileSync(p.actual)) / 1024,
    ssim: ssim(p.golden, p.actual),
    lpips: lpips(p.golden, p.actual),
    butteraugli: butter(p.golden, p.actual)
  }));
}

Conceito de Orçamento/Portão (Volume×Qualidade×Cor)

• Volume: Definir limite superior (total KB) por rota/página/listagem, bloquear em PRs quando diff sobre +X%
• Qualidade: Definir limiares SSIM/LPIPS/Butteraugli por classe de imagem
• Cor: Unificar para sRGB. Fontes P3 ou HDR têm procedimento fixo de conversão (incluindo tone mapping) antes da entrega

Rollback/Reparação Automática

• Em caso de falha, automaticamente "re-codificar para preset B", se diff for aceitável, anexar imagens de artefato em comentário de sugestão
• Regressões óbvias sugerem automaticamente candidatos como quality -5. Decisão final manual
• Issues dependentes de ambiente como quebra apenas em tema escuro verificar com design A/B (artigo relacionado: Design de Testes A/B de Imagens 2025 — Otimizando Qualidade, Velocidade e CTR Simultaneamente)

Governança/Divisão de Papéis

• Proprietário de Qualidade (Design/Conteúdo): Definir limiares e presets, aprovar baseline
• Proprietário de Entrega (Engenharia): Conversão/cache/fiação CI, processamento automático em falhas
• Segurança/Legal: Auditoria de copyright/permissões de edição (artigo relacionado: Direitos de Imagem Editorial e Entrega Segura 2025 — Rostos/Menores/Informações Sensíveis)

Lista de Verificação

• [ ] Baseline salva
• [ ] Limiares otimizados por ativo
• [ ] Portões CI ativos

Verificações adicionais:

• [ ] Unificação de gerenciamento de cor (sRGB) e tratamento ICC documentados
• [ ] Política UI/Logo 4:4:4/sem perdas estabelecida
• [ ] Orçamentos de volume específicos por rota/página definidos
• [ ] Fluxo de aprovação de update de baseline/log de auditoria presente

Perguntas Frequentes (FAQ)

• P. Valores de métrica estão bons mas sensação visual desconfortável
  • R. Suspeita de diferenças de espaço de cor/tone mapping ou influência de subsampling. Revisar avaliação P3→sRGB e 4:4:4
• P. Onde colocar limiares?
  • R. Começar rigoroso, afrouxar gradualmente se warnings contínuos ou falsos positivos. Priorizar cobertura do Golden Set
• P. Muitas imagens, cálculo pesado
  • R. Híbrido prático de N imagens representativas como Golden, resto como sampling + orçamento de volume

Artigos Relacionados

• Guia Prático de Métricas de Qualidade de Imagem SSIM/PSNR/Butteraugli 2025
• Consistência de Cores P3→sRGB Guia Prático 2025
• Fluxo de Trabalho HDR para sRGB Tonemapping 2025
• Estratégia Definitiva de Compressão de Imagem 2025 — Guia Prático para Otimizar Velocidade Percebida Preservando Qualidade
• Design de Testes A/B de Imagens 2025 — Otimizando Qualidade, Velocidade e CTR Simultaneamente