[AEM Assets]{class="badge positive" title="Aplicável ao AEM Assets)."}

Práticas recomendadas para otimização da qualidade de imagens best-practices-for-optimizing-the-quality-of-your-images

Última atualização: 29 de setembro de 2026

Aplica-se a:
Experience Manager as a Cloud Service

Criado para:

Usuário

TIP

Você é novo no Dynamic Media? Para obter uma visão geral rápida e de alto nível do Dynamic Media, consulte Trabalhar com Dynamic Media.

A Adobe Experience Manager fornece mais de 100 comandos de entrega de imagens do Dynamic Media para ajuste, otimização e renderização de imagens. Esse amplo conjunto de comandos permite controlar quase todos os aspectos de como uma imagem é processada e veiculada, desde a resolução e a compactação até a nitidez e a renderização de cores.

A otimização da qualidade da imagem é um processo iterativo, às vezes demorado, pois vários fatores distintos contribuem para resultados aceitáveis — incluindo resolução, nível de compactação, formato de arquivo, nitidez e precisão de cores. O resultado também é parcialmente subjetivo, uma vez que os indivíduos percebem a qualidade da imagem de forma diferente e as condições de visualização variam de uma exibição, navegador ou dispositivo para outra. Devido a essa variabilidade, a experimentação estruturada é essencial: ajustar metodicamente uma variável de cada vez e comparar a saída renderizada é o caminho mais confiável para obter qualidade consistente.

As práticas recomendadas a seguir simplificam o processo e fornecem resultados de alta qualidade com eficiência usando um conjunto de comandos principais e técnicas comprovadas. Aplicá-las é muito importante, além da estética: imagens otimizadas corretamente reduzem o tamanho do arquivo e o tempo de carregamento, o que melhora o desempenho da página, a experiência do usuário e a entrega em toda a variedade de dispositivos e condições de rede.

Principais Fatores Que Afetam A Qualidade Da Imagem

Resolução e dimensões — Combine as dimensões em pixels entregues com o tamanho de exibição real para evitar artefatos desnecessários de upscaling ou downscaling.
Compactação — Equilibre o tamanho do arquivo com a perda de qualidade visível, pois a compactação agressiva reduz a largura de banda, mas pode introduzir artefatos.
Formato de arquivo — Selecione o formato mais adequado ao conteúdo da imagem e ao dispositivo de destino para equilibrar a qualidade e a eficiência da entrega.
Nitidez — Aplique a nitidez para neutralizar a suavização que ocorre durante o redimensionamento, o que restaura os detalhes percebidos.
Renderização de cores — Preserve a cor precisa para que as imagens sejam exibidas de forma consistente em diferentes exibições e ambientes de exibição.

Abordagem recomendada

Estabelecer uma linha de base. Renderize uma imagem com as configurações padrão para que você tenha um ponto de referência para comparação.
Ajustar uma variável de cada vez. Altere um único comando ou parâmetro e avalie o resultado, pois o isolamento de variáveis deixa claro qual ajuste produziu qual efeito.
Comparar saída renderizada visualmente. Como a qualidade da imagem é parcialmente subjetiva, analise os resultados lado a lado em dispositivos e exibições representativos.
Equilibre qualidade e desempenho. Confirme se as melhorias de qualidade não aumentam o tamanho do arquivo a ponto de afetar o tempo de carregamento da página e o delivery.
Padronizar configurações com êxito. Depois de identificar as combinações de comando que produzem resultados consistentes, reutilize-as para simplificar a otimização futura.

Ao combinar esses comandos essenciais com a experimentação estruturada, você obtém uma entrega de imagens de alta qualidade e desempenho de forma rápida e repetitiva em seus ativos do Dynamic Media.

Ativar imagem inteligente no Dynamic Media bp-enable-smart-imaging

Imagens inteligentes:

A habilitação de Imagem Inteligente no Dynamic Media permite a otimização automática do formato, tamanho e qualidade da imagem com base nos recursos do navegador do cliente. O Smart Imaging executa essa negociação de formato em cada solicitação, fornecendo a imagem mais eficiente que um determinado navegador suporta para que as páginas carreguem mais rápido e consumam menos largura de banda.
Para obter mais informações, vá para Smart Imaging.
Ele melhora o desempenho do delivery de imagens ajustando dinamicamente esses parâmetros, pois fornecer o menor arquivo adequado para cada navegador reduz o conteúdo transferido e melhora os tempos de carregamento de página.
Os administradores e desenvolvedores podem avaliar o Smart Imaging usando a ferramenta de autoavaliação Snapshot.

Formatos de imagem:

Evite usar comandos explícitos fmt=webp (WebP) ou fmt=avif (AVIF) em uma URL, a menos que especificamente necessário para um caso de uso. A codificação rígida de um formato no URL substitui a negociação automática e pode impedir que o Smart Imaging forneça o formato ideal para navegadores que oferecem suporte a uma alternativa mais eficiente.
A Imagem inteligente seleciona automaticamente o melhor formato para cada solicitação. Isso reduz os bytes transferidos e produz ganhos ideais de largura de banda.

Comportamento padrão:

Quando nenhum comando format é especificado na URL e o Smart Imaging não está habilitado, a entrega da imagem do Dynamic Media é padronizada para o formato JPEG. Como resultado, formatos de próxima geração, como WebP e AVIF, não serão fornecidos automaticamente até que a Imagem inteligente seja habilitada.

Ao fazer escolhas informadas sobre formatos de imagem e ativar a Criação inteligente de imagens, você melhora diretamente o desempenho do delivery e a experiência do usuário.

Práticas recomendadas para selecionar a imagem de origem bp-select-source-image

Considerações essenciais para trabalhar com imagens de origem:

Formato de imagem do Source:
- O uso de formatos sem perda — PNG (Portable Network Graphics), TIFF (Tagged Image File Format) ou PSD (Photoshop Document) — mantém a qualidade da imagem alta e elimina artefatos de compactação, as distorções visíveis introduzidas por formatos com perdas, como o JPEG.
- Esses formatos preservam todos os dados de pixel originais. Isso os torna ideais para edição, retoque e salvamento repetido, pois nenhuma qualidade é perdida sempre que o arquivo é processado.
Tamanho da imagem do Source:
- Começar com uma imagem de alta resolução fornece mais detalhes e maior flexibilidade, pois o upscaling de uma imagem pequena não pode recuperar detalhes que nunca foram capturados.
- Quando as imagens precisam ser exibidas em tamanhos diferentes (por exemplo, em dispositivos ou resoluções de tela), uma imagem de origem maior permite um melhor dimensionamento e resultados mais nítidos em cada dimensão de destino.
- Para imagens que oferecem suporte ao zoom, como fotos de produtos nas quais os clientes inspecionam os detalhes, direcione para dimensões de cerca de 2.000 pixels ou mais no lado maior.
- Os logotipos ou banners que não exigem zoom podem ser carregados no maior tamanho necessário para o uso a que se destinam.

Fazer essas opções no nível da origem determina diretamente a qualidade do conteúdo visual final, já que cada etapa de redimensionamento, corte e compactação de downstream herda os pontos fortes e fracos do arquivo original.

Práticas recomendadas para tamanho de imagem best-practices-for-image-size

Reduzir dinamicamente o tamanho da imagem é uma das tarefas mais comuns na entrega de imagens. Envolve a especificação das dimensões de destino e, opcionalmente, a seleção do modo de redução da resolução usado para reduzir a escala da imagem. O padrão de URL recomendado é &wid=<value>&hei=<value>&resMode=sharp2 (ou &hei=<value>&resMode=sharp2 quando apenas a altura é definida), o que fornece a maior qualidade visual para imagens redimensionadas.

Parâmetros de dimensionamento

Para dimensionamento de imagem, use &wid=<value> e &hei=<value>:

&wid=<value> define a largura da imagem.
&hei=<value> define a altura da imagem.
Quando apenas uma dimensão é especificada, esses parâmetros calculam automaticamente a outra dimensão de acordo com a proporção da imagem, preservando as proporções originais e evitando distorções.

Modo de redução de resolução (resMode)

&resMode=<value> controla o algoritmo usado para redução da resolução — o processo de redução das dimensões em pixels de uma imagem. A escolha do algoritmo afeta diretamente a nitidez e a qualidade da imagem dimensionada final.

Iniciar com &resMode=sharp2. Esse valor oferece a melhor qualidade de imagem porque preserva os detalhes da borda e a textura fina ao dimensionar imagens para baixo, produzindo resultados nítidos e sem artefatos.
&resMode=bilin (bilinear) é mais rápido, mas como calcula a média de pixels de maneira mais simples, geralmente produz artefatos de suavização — bordas irregulares visíveis, padrões moiré e perda de detalhes finos. Como resultado, bilin troca a qualidade da imagem pela velocidade de processamento.

Ao contrário bilin, o modo sharp2 prioriza a fidelidade visual, tornando-o a escolha preferencial para fornecer imagens redimensionadas de alta qualidade.

Prática recomendada

Como prática recomendada para dimensionamento de imagem, use &wid=<value>&hei=<value>&resMode=sharp2 ou &hei=<value>&resMode=sharp2. Essa combinação define as dimensões de destino, mantém a taxa de proporção correta e aplica o algoritmo de redução de resolução de maior qualidade.

Práticas recomendadas para nitidez de imagem best-practices-for-image-sharpening

A nitidez de imagem é o aspecto mais complexo de controlar imagens no seu site e no qual muitos erros são cometidos. Para saber mais sobre como a nitidez e o mascaramento sem nitidez funcionam no Experience Manager, consulte os seguintes recursos úteis:

White paper de práticas recomendadas As práticas recomendadas de qualidade e nitidez de imagens da Adobe Dynamic Media Classic também se aplicam ao Experience Manager.
Assista Usar nitidez de imagem com o Experience Manager - Dynamic Media.

No Experience Manager, você pode ajustar a nitidez das imagens durante a assimilação, a entrega ou ambas. Como prática recomendada, ajuste a nitidez de imagens usando apenas um método, não ambos. A nitidez de imagens na entrega por meio de um URL fornece os melhores resultados na maioria dos fluxos de trabalho, pois permite ajustar a nitidez ao tamanho renderizado final em vez de fixá-la no ativo assimilado.

Há dois métodos de nitidez de imagem que podem ser usados:

Nitidez simples (&op_sharpen) - Semelhante ao filtro de nitidez do Adobe Photoshop, ele aplica nitidez básica após o redimensionamento dinâmico. Este método não é configurável pelo usuário; evite usar &op_sharpen, a menos que seja necessário.
Tirar nitidez da máscara (&op_USM) - Tirar nitidez da máscara é um filtro de nitidez padrão do setor que aumenta o contraste da borda para fazer com que uma imagem pareça mais nítida. A prática recomendada é tornar mais nítidas as imagens com mascaramento sem nitidez, seguindo as diretrizes abaixo. O mascaramento sem nitidez permite controlar os três parâmetros a seguir:
- &op_sharpen=valor,raio,limite
  - valor (0-5, intensidade do efeito.)
  - raio (0-250, largura das “linhas de nitidez” desenhadas ao redor do objeto com nitidez, medida em pixels.)
  Os parâmetros radius e amount têm efeitos opostos: como a redução do raio enfraquece o efeito, você pode compensar aumentando o valor. O raio permite um controle mais fino porque um valor mais baixo aplica nitidez apenas aos pixels da borda, enquanto um valor mais alto aplica nitidez a uma faixa mais ampla de pixels, produzindo um halo mais pronunciado.
  - limite (0-255, sensibilidade de efeito.)
  Esse parâmetro determina como deve ser a diferença dos pixels com nitidez em relação à área ao redor antes de serem considerados pixels de borda e o filtro ajuste a nitidez deles. O parâmetro threshold ajuda a evitar áreas de nitidez excessiva com cores semelhantes, como tons de pele. Por exemplo, um valor limite de 12 ignora pequenas variações no brilho do tom da pele para evitar a adição de “ruído”, enquanto ainda adiciona o contraste da borda a áreas de alto contraste, como onde as pálpebras tocam a pele.
  
  Para obter mais informações sobre como você define esses três parâmetros, incluindo as práticas recomendadas para usar com o filtro, consulte os seguintes recursos:
  - White paper de práticas recomendadas As práticas recomendadas de qualidade e nitidez de imagens da Adobe Dynamic Media Classic também se aplicam ao Experience Manager.
  - Assista Usar nitidez de imagem com o Experience Manager - Dynamic Media.
  - O Experience Manager também permite controlar um quarto parâmetro: monochrome (0,1). Este parâmetro determina se a máscara de nitidez é aplicada separadamente a cada componente de cor usando o valor 0 ou ao brilho/intensidade da imagem usando o valor 1.

Como prática recomendada, comece com o parâmetro Tirar nitidez do raio da máscara. As configurações de raio com as quais você pode começar são as seguintes:

Site: 0.2-0.3 pixels
Impressão fotográfica (250-300 ppi): 0.3-0.5 pixels
Impressão deslocada (266-300 ppi): 0.7-1.0 pixels
Impressão da tela de desenho (150 ppi): 1.5-2.0 pixels

Siga estas etapas para refinar a nitidez:

Aumente gradualmente o valor de 1,75 para 4.
Se a nitidez ainda não for satisfatória, aumente o raio em uma casa decimal.
Executar o valor novamente de 1.75 para 4.
Repita conforme necessário até que o resultado seja satisfatório.

Deixe a configuração de parâmetro monocromático em 0.

Práticas recomendadas para compactação JPEG (`&qlt=`) best-practices-for-jpef-compression-qlt

A configuração de prática recomendada para a compactação JPG é &qlt=85,0. Esse valor equilibra a alta qualidade visual com um tamanho de arquivo controlado para a maioria das imagens.
Esse parâmetro controla a qualidade da codificação do JPG. Um valor maior significa uma imagem de qualidade superior, mas um tamanho de arquivo maior; um valor menor significa uma imagem de qualidade inferior, mas um tamanho de arquivo menor. O intervalo válido é 0-100.
Para otimizar a qualidade, não defina o valor do parâmetro para 100. A diferença entre uma configuração de 90 ou 95 e 100 é quase imperceptível para o olho humano. Por causa disso, uma configuração de 100 infla desnecessariamente o tamanho do arquivo de imagem sem um ganho visual perceptível. Portanto, para otimizar a qualidade e, ao mesmo tempo, evitar arquivos muito grandes, defina o qlt= value como 90 ou 95.
Para otimizar um tamanho de arquivo pequeno, mantendo a qualidade da imagem em um nível aceitável, defina qlt= value como 80. Valores abaixo de 70-75 introduzem degradação significativa e visível, como bloqueio de artefatos, faixas e perda de detalhes finos, de modo que não são recomendados para imagens de produção.
Como prática recomendada, defina o qlt= value como 85, o que fornece um meio-termo confiável entre a qualidade e o tamanho do arquivo em uma grande variedade de conteúdos de imagem.
Usando o sinalizador chroma emqlt=
- O parâmetro qlt= tem uma segunda configuração que controla redução de resolução de cromaticidade de RGB — uma técnica de compactação que reduz a resolução das informações de cor (croma), preservando os detalhes de luminosidade. Desative a redução de resolução on usando o valor ,1 ou off usando o valor ,0.
- Para a maioria dos fluxos de trabalho, comece com a redução de resolução de cromaticidade do RGB desativada desativada (,0). Essa configuração oferece melhor qualidade de imagem porque preserva dados de cores com resolução total, o que é mais importante para imagens sintéticas com bordas nítidas, alto contraste e transições de cores finas em que a redução da resolução de artefatos seria visível.

Como prática recomendada para a compactação JPG, use &qlt=85,0.

Práticas recomendadas para dimensionamento do JPEG (`&jpegSize=`) best-practices-for-jpeg-sizing-jpegsize

O parâmetro &jpegSize= garante que uma imagem entregue não exceda um tamanho máximo especificado, tornando-a essencial para a entrega de imagens do JPEG para dispositivos com memória limitada. Impondo um limite superior no tamanho do arquivo, evita que imagens superdimensionadas sobrecarreguem a memória disponível em clientes restritos.

Como o `&jpegSize=` funciona

Defina &jpegSize= em quilobytes usando a sintaxe jpegSize=<size_in_kilobytes>. Este valor define o tamanho máximo de arquivo permitido para a entrega de imagens.
&jpegSize= funciona em combinação com o parâmetro de qualidade (compactação) do JPEG &qlt=. Quando a resposta do JPEG no valor &qlt= especificado não excede o limite jpegSize, a imagem é retornada com &qlt= exatamente como definido, preservando a qualidade solicitada.
Se a imagem excede o limite jpegSize no &qlt= especificado, o sistema diminui incrementalmente &qlt= até que a imagem se ajuste ao tamanho máximo permitido. Como resultado, a qualidade é reduzida apenas na medida do necessário para atender à restrição de tamanho, garantindo a compatibilidade com o dispositivo de destino.
Se o sistema determinar que a imagem não pode ser reduzida para se ajustar ao tamanho máximo permitido, retornará um erro em vez de fornecer uma imagem não compatível.

Prática recomendada para dispositivos de memória limitada

Como prática recomendada, defina &jpegSize= e emparelhe-o com&qlt= ao entregar imagens do JPEG para dispositivos com memória limitada. Essa combinação permite especificar a qualidade pretendida e o teto de tamanho fixo, para que o sistema forneça a maior qualidade possível que ainda se ajuste dentro dos limites de memória do dispositivo.

Resumo de práticas recomendadas best-practices-summary

Para obter alta qualidade de imagem com um tamanho de arquivo pequeno, comece com a seguinte combinação recomendada de parâmetros do Servidor de Imagens do Dynamic Media:

fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0

Essa combinação produz excelentes resultados na maioria das circunstâncias e serve como uma linha de base confiável para a maioria das imagens. O valor op_usm aplica a nitidez unsharp mask (USM), na qual os parâmetros controlam a quantidade, o raio, o limite e o comportamento monocromático do efeito.

Ajuste da nitidez (mascaramento sem nitidez)

Se uma imagem exigir otimização adicional, ajuste os parâmetros unsharp mask (USM) gradualmente usando o seguinte procedimento:

Defina o radius como 0.2 ou 0.3 como ponto de partida.
Aumente o valor de de 1,75 para no máximo 4 — equivalente a 400% no Adobe Photoshop.
Revise a imagem renderizada para confirmar se o resultado desejado foi atingido.
Se o resultado da nitidez ainda não for satisfatório, aumente o raio em incrementos decimais.
Para cada incremento decimal do raio, reinicie o valor em 1.75 e aumente gradualmente para 4.
Repita as etapas 4 e 5 até que o resultado desejado seja alcançado.

Embora os valores acima representem uma abordagem validada pelos estúdios de criação, é possível começar com outros valores e seguir outras estratégias. Se os resultados são satisfatórios é uma questão subjetiva, portanto, experimentação estruturada e iterativa é essencial para chegar ao melhor equilíbrio entre nitidez, qualidade e tamanho de arquivo para cada imagem.

Dicas de otimização de fluxo de trabalho

À medida que você experimenta, as seguintes sugestões gerais ajudam a otimizar o fluxo de trabalho:

Testar parâmetros em tempo real em uma URL. Ajustar valores diretamente no URL permite visualizar o efeito imediatamente e iterar rapidamente.
Agrupar comandos em uma predefinição de imagem. Os comandos do Dynamic Media Image Serving podem ser agrupados em uma predefinição de imagem. Uma predefinição de imagem é um conjunto de macros de comando de URL às quais é atribuído um nome de predefinição personalizado, como $thumb_low$ e &product_high$. Fazer referência ao nome da predefinição personalizada em um caminho de URL chama essas predefinições. Essa funcionalidade ajuda você a gerenciar comandos e configurações de qualidade para diferentes padrões de uso de imagem em seu site, promove configurações consistentes por meio da reutilização e reduz o comprimento geral dos URLs.
Usar opções avançadas de ajuste no Experience Manager. O Experience Manager também oferece maneiras mais avançadas de ajustar a qualidade da imagem, como aplicar nitidez na assimilação. Para ajustar e otimizar os resultados de renderização, os serviços de consultoria da Adobe podem fornecer insight personalizados e práticas recomendadas.

recommendation-more-help

experience-manager-cloud-service-help-main-toc