Imagem inteligente

O que é "Smart Imaging"?

A tecnologia Smart Imaging aplica os recursos do Adobe Sensei AI e funciona com "predefinições de imagens" existentes para aprimorar o desempenho do delivery de imagens, otimizando automaticamente o formato, o tamanho e a qualidade da imagem, com base nos recursos do navegador do cliente.

OBSERVAÇÃO

Esse recurso exige o uso da CDN (Content Delivery Network) pronta para uso que é fornecida com o Adobe Experience Manager Dynamic Media. Nenhum outro CDN personalizado é compatível com esse recurso.

O Smart Imaging também se beneficia do aumento de desempenho de ser totalmente integrado ao melhor serviço de CDN premium do Adobe. Esse serviço encontra a rota ideal da Internet entre servidores, redes e pontos de peering. Ele encontra uma rota que tem a latência mais baixa e a menor taxa de perda de pacotes em vez de usar a rota padrão na Internet.

Os seguintes exemplos de ativos de imagem representam a otimização adicionada da imagem inteligente:

Imagem
(URL)
Miniatura Size
(JPEG)
Tamanho (WebP)
(com Smart Imaging)
% redução
Imagem 1 picture1 73.75 KB 45.92 KB 38%
Imagem 2 picture2 191 KB 70.66 KB 63%
Imagem 3 picture3 96.64 KB 39.44 KB 59%
Imagem 4 picture4 315.80 KB 178.19 KB 44%
Média = 51%

Semelhante ao acima, o Adobe também executou um teste com URLs 7009 de sites de clientes ativos. Eles conseguiram atingir uma média de 38% mais de otimização do tamanho do arquivo para JPEG. Para PNG com formato WebP, eles conseguiram atingir uma média de 31% a mais de otimização no tamanho do arquivo. Esse tipo de otimização é possível por causa da capacidade de Smart Imaging.

Na Web móvel, os desafios são somados por dois fatores:

  • Grande variedade de dispositivos com diferentes formatos e telas de alta resolução.
  • Largura de banda de rede restrita.

Em termos de imagens, o objetivo é servir imagens de melhor qualidade da maneira mais eficiente possível.

Sobre a otimização da taxa de pixels do dispositivo

DPR (Device pixel ratio, proporção de pixel do dispositivo) - também conhecido como CSS pixel ratio - é a relação entre os pixels físicos e os pixels lógicos de um dispositivo. Especialmente com o advento das telas de retina, a resolução de pixels dos dispositivos móveis modernos está crescendo a um ritmo rápido.

Habilitar a otimização da taxa de pixels do dispositivo renderiza a imagem na resolução nativa da tela, o que a torna mais nítida.

Ativar a configuração do DPR do Smart Imaging ajusta automaticamente a imagem solicitada com base na densidade de pixels da exibição da qual a solicitação está sendo veiculada. Atualmente, a densidade de pixels da exibição vem dos valores do cabeçalho Akamai CDN.

Valores permitidos no URL de uma imagem Descrição
dpr=off Desative a otimização do DPR em um nível de URL de imagem individual.
dpr=on,dprValue Substitua o valor do DPR detectado pelo Smart Imaging, com um valor personalizado (como detectado por qualquer lógica do lado do cliente ou outros meios). O valor permitido para dprValue é qualquer número maior que 0. Valores especificados de 1,5, 2 ou 3 são típicos.
OBSERVAÇÃO
  • Você pode usar dpr=on,dprValue mesmo que a configuração do DPR no nível da empresa esteja desativada.
  • Devido à otimização do DPR, quando a imagem resultante é maior que a configuração MaxPix Dynamic Media , a largura MaxPix é sempre reconhecida pela manutenção da proporção da imagem.
Tamanho da imagem solicitada Valor do DPR Tamanho da imagem entregue
816x500 1 816x500
816x500 2 1632x1000

Consulte também Ao trabalhar com imagens e Ao trabalhar com o Recorte inteligente.

Sobre a otimização da largura de banda da rede

Ativar a Largura de Banda da Rede ajusta automaticamente a qualidade da imagem veiculada com base na largura de banda real da rede. Para uma largura de banda de rede fraca, a otimização do DPR é automaticamente desativada, mesmo que já esteja ativada.

Se desejar, sua empresa pode recusar a otimização da largura de banda da rede no nível de imagem individual ao anexar network=off ao URL da imagem.

Valor permitido no URL de uma imagem Descrição
network=off Desativa a otimização de rede em um nível de URL de imagem individual.
OBSERVAÇÃO

O DPR e os valores de largura de banda da rede são baseados nos valores detectados do lado do cliente do CDN empacotado. Esses valores às vezes são imprecisos. Por exemplo, iPhone5 com DPR=2 e iPhone12 com DPR=3, ambos mostram DPR=2. Ainda assim, para dispositivos de alta resolução, o envio de DPR=2 é melhor do que o envio de DPR=1. Em breve: O Adobe está trabalhando no código do lado do cliente para determinar com precisão o DPR de um usuário final.

Quais são os principais benefícios do último Smart Imaging?

Como as imagens constituem a maior parte do tempo de carregamento de uma página, a melhoria de desempenho pode ter um impacto profundo em um negócio, como conversão mais alta, tempo gasto no site e taxa de rejeição mais baixa do site.

Aprimoramentos na versão mais recente do Smart Imaging:

  • Melhoria na classificação de SEO do Google para páginas da Web que usam o Smart Imaging mais recente.
  • Atua conteúdo otimizado imediatamente (no tempo de execução).
  • Usa a tecnologia Adobe Sensei para converter de acordo com a qualidade (qlt) especificada na solicitação de imagem.
  • A Imagem inteligente pode ser desativada usando o parâmetro de URL "bfc".
  • TTL (Tempo de vida útil) independente. Anteriormente, um TTL mínimo de 12 horas era obrigatório para que a Smart Imaging funcionasse.
  • Anteriormente, as imagens original e derivada eram armazenadas em cache e era um processo de duas etapas para invalidar o cache. No último Smart Imaging, somente os derivados são armazenados em cache, permitindo um processo de invalidação de cache de uma única etapa.
  • Os clientes que usam cabeçalhos personalizados em seus conjuntos de regras se beneficiam do Smart Imaging mais recente, pois esses cabeçalhos não estão bloqueados, ao contrário da versão anterior do Smart Imaging. Por exemplo, "Timing Allow Origin", "X-Robot" conforme sugerido em Adicionar um valor de cabeçalho personalizado às respostas da imagem|Dynamic Media Classic.

Há algum custo de licenciamento associado à geração inteligente de imagens?

Não. O Smart Imaging está incluído em sua licença existente do Dynamic Media Classic ou do Adobe Experience Manager - Dynamic Media (no local, AMS e Adobe Experience Manager as a Cloud Service).

OBSERVAÇÃO

O Smart Imaging não está disponível para Dynamic Media - Clientes híbridos.

Como funciona a geração inteligente de imagens?

Quando uma imagem é solicitada por um consumidor, o Smart Imaging verifica as características do usuário e converte para o formato de imagem apropriado com base no navegador em uso. Essas conversões de formato são feitas de maneira que não degrade a fidelidade visual. A geração de imagens inteligentes converte automaticamente imagens em diferentes formatos com base na capacidade do navegador da seguinte maneira.

  • Converta automaticamente em WebP para os seguintes navegadores:

    • Cromo
    • Firefox
    • Microsoft® Edge
    • O Safari (em iOS, macOS, iPadOS), forneceu suporte à versão de navegador e SO da WebP
    • Android™
    • Opera
  • Suporte a navegador herdado para o seguinte:

    Navegador Versão do navegador/SO Formato
    Safari Anterior ao iOS/iPad 14.0 ou macOS BigSur JPEG2000
    Edge Anterior a 18 JPEGXR
    Internet Explorer 9+ JPEGXR
  • Para navegadores que não aceitam esses formatos, o formato de imagem solicitado originalmente é exibido.

Se o tamanho da imagem original for menor do que o produzido pela Imagem inteligente, a imagem original será veiculada.

Quais formatos de imagem são compatíveis?

Os formatos de imagem a seguir são compatíveis com a Smart Imaging:

  • JPEG
  • PNG

Como o Smart Imaging funciona com minhas predefinições de imagem existentes que já estão em uso?

O Smart Imaging funciona com suas "predefinições de imagem" existentes e observa todas as suas configurações de imagem, exceto qualidade (qlt) e formato (fmt), se o formato de arquivo solicitado for JPEG ou PNG. Para conversão de formato, o Smart Imaging mantém a fidelidade visual completa conforme definido pelas configurações predefinidas da imagem, mas em um tamanho de arquivo menor. Se o tamanho da imagem original for menor do que o produzido pela Imagem inteligente, a imagem original será veiculada.

Preciso alterar quaisquer URLs, predefinições de imagens ou implantar qualquer novo código no meu site para Smart Imaging?

O Smart Imaging funciona perfeitamente com seus URLs de imagem existentes e predefinições de imagem se você configurar o Smart Imaging em seu domínio personalizado existente. Além disso, o Smart Imaging não requer que você adicione qualquer código ao seu site para detectar o navegador de um usuário. Tudo é manipulado automaticamente.

Caso você precise configurar um novo domínio personalizado para usar a Smart Imaging, os URLs devem ser atualizados para refletir esse domínio personalizado.

Para entender os pré-requisitos para Smart Imaging, consulte Posso usar Smart Imaging?

O Smart Imaging funciona com HTTPS? E HTTP/2?

O Smart Imaging funciona com imagens entregues por HTTP ou HTTPS. Além disso, também funciona por HTTP/2.

Posso usar a geração inteligente de imagens?

Para usar a Smart Imaging, a conta do Dynamic Media Classic ou Dynamic Media no Experience Manager de sua empresa deve atender aos seguintes requisitos:

  • Use a CDN (Content Delivery Network) fornecida pelo Adobe como parte de sua licença.
  • Use um domínio dedicado (por exemplo, images.company.com ou mycompany.scene7.com), não um domínio genérico (por exemplo, s7d1.scene7.com, s7d2.scene7.com ou s7d13.scene7.com).

Para encontrar seus domínios, abra o aplicativo de desktop do Dynamic Media Classic e faça logon em sua conta ou contas da empresa.

Navegue até Configuração > Configuração do Aplicativo > Configurações Gerais Procure o campo rotulado Nome do Servidor Publicado. Se você estiver usando um domínio genérico no momento, poderá solicitar a mudança para seu próprio domínio personalizado como parte dessa transição ao enviar um tíquete de suporte técnico.

Seu primeiro domínio personalizado não tem custo adicional com uma licença do Dynamic Media.

Qual é o processo para ativar a Smart Imaging na minha conta?

Você inicia a solicitação para usar a geração inteligente de imagens; ele não é ativado automaticamente.

Por padrão, o DPR de Smart Imaging e a otimização de rede estão desativadas (desativadas) em uma conta de empresa do Dynamic Media. Se quiser ativar (ativar) um ou ambos os aprimoramentos prontos para uso, crie um caso de suporte, conforme descrito abaixo.

  1. Use o Admin Console para criar um caso de suporte.

  2. Forneça as seguintes informações no caso de suporte:

    1. Nome do contato principal, email, telefone.

    2. Todos os domínios a serem ativados para geração inteligente de imagens (ou seja, images.company.com ou mycompany.scene7.com).

      Para encontrar seus domínios, abra o aplicativo de desktop do Dynamic Media Classic e faça logon em sua conta ou contas da empresa.

      Navegue até Configuração > Configuração do Aplicativo > Definições Gerais.

      Procure o campo rotulado Nome do Servidor Publicado.

    3. Verifique se você está usando a CDN por meio do Adobe e não é gerenciada com uma relação direta.

    4. Verifique se você está usando um domínio dedicado, como images.company.com ou mycompany.scene7.com, e não um domínio genérico, como s7d1.scene7.com, s7d2.scene7.com, s7d13.scene7.com.

      Para encontrar seus domínios, abra o aplicativo de desktop do Dynamic Media Classic e faça logon em sua conta ou contas da empresa.

      Navegue até Configuração > Configuração do Aplicativo > Definições Gerais.

      Procure o campo rotulado Nome do Servidor Publicado. Se você estiver usando um domínio genérico do Dynamic Media Classic, poderá solicitar a mudança para seu próprio domínio personalizado como parte dessa transição.

    5. Indique se você também precisa de Smart Imaging para funcionar via HTTP/2.

  3. O Atendimento ao cliente do Adobe adiciona você à Lista de espera do cliente de Smart Imaging com base na ordem em que as solicitações foram enviadas.

  4. Quando o Adobe estiver pronto para lidar com sua solicitação, o suporte entrará em contato para coordenar e definir uma data de destino.

  5. Opcional - você pode, opcionalmente, testar a geração inteligente de imagens na Preparação antes do Adobe colocar o novo recurso em produção.

  6. Você é notificado após a conclusão pelo Atendimento ao cliente.

  7. Para maximizar os aprimoramentos de desempenho do Smart Imaging, o Adobe recomenda definir o Time To Live (TTL) para 24 horas ou mais. O TTL define quanto tempo os ativos são armazenados em cache pela CDN. Para alterar essa configuração:

    1. Se você usa o Dynamic Media Classic, navegue até Configuração > Configuração do aplicativo > Publicar configuração > Servidor de imagem. Defina o valor Default Client Cache Time To Live como 24 ou mais.
    2. Se você usar o Dynamic Media, siga estas instruções. Defina o valor Expiration 24 horas ou mais.

Quando posso esperar que minha conta seja ativada com a Smart Imaging?

As solicitações são processadas na ordem em que são recebidas pelo Atendimento ao cliente, de acordo com a Lista de espera.

OBSERVAÇÃO

Pode haver um longo lead time, pois a ativação da Imagem inteligente envolve a limpeza do cache pelo Adobe. Portanto, apenas algumas transições de clientes podem ser tratadas a qualquer momento.

Quais são os riscos ao mudar para usar a Smart Imaging?

Não há risco para uma página da Web do cliente. No entanto, a transição para a Smart Imaging limpa o cache na CDN, pois envolve mudar para uma nova configuração do Dynamic Media Classic ou Dynamic Media no Experience Manager.

Durante a transição inicial, as imagens não armazenadas em cache acessam diretamente os servidores de origem do Adobe até que o cache seja recriado. Como resultado, o Adobe planeja lidar com algumas transições de clientes de cada vez, para que o desempenho aceitável seja mantido ao puxar solicitações da origem. Para a maioria dos clientes, o cache é totalmente criado novamente na CDN dentro de 1 a 2 dias.

Como posso verificar se a geração inteligente de imagens está funcionando como esperado?

  1. Depois que sua conta for configurada com geração inteligente de imagens, carregue um URL de imagem do Dynamic Media Classic ou Adobe Experience Manager - Dynamic Media no navegador.

  2. Abra o painel do desenvolvedor do Chrome navegando até Exibir > Desenvolvedor > Ferramentas do desenvolvedor no navegador. Ou escolha qualquer ferramenta de desenvolvedor de navegador de sua escolha.

  3. Certifique-se de que o cache esteja desativado quando as ferramentas do desenvolvedor estiverem abertas.

    • No Windows®, navegue até as configurações no painel de ferramentas do desenvolvedor e selecione a caixa de seleção Desativar cache (enquanto as ferramentas do dispositivo estão abertas).
    • No macOS, no painel do desenvolvedor, na guia Rede, selecione desativar cache.
  4. Observe que o Tipo de conteúdo é transformado no formato apropriado. A captura de tela a seguir mostra uma imagem PNG sendo convertida dinamicamente em WebP no Chrome.

  5. Repita esse teste em navegadores e condições de usuário diferentes.

OBSERVAÇÃO

Nem todas as imagens são convertidas. O Smart Imaging decide se a conversão pode melhorar o desempenho. Às vezes, onde não há ganho de desempenho esperado ou o formato não é JPEG ou PNG, a imagem não é convertida.

image2017-11-14_15398

A Smart Imaging pode ser desativada para qualquer solicitação?

Sim. Você pode desativar a Imagem inteligente adicionando o modificador bfc=off ao URL.

Posso solicitar que o DPR e a otimização de rede sejam desativados no nível da empresa?

Sim. Para desativar o DPR e a otimização de rede em sua empresa, crie um caso de suporte conforme descrito anteriormente neste tópico.

Que "ajuste" está disponível? Existem configurações ou comportamentos que podem ser definidos? (#tuning-settings)

Atualmente, você pode ativar ou desativar o Smart Imaging. Nenhum outro ajuste está disponível.

Se o Smart Imaging gerenciar as configurações de qualidade, há mínimos e máximos a serem definidos? Por exemplo, é possível definir "no lower than 60" e "no greater than 80 quality"? (#Minimum-maximum)

Não há essa capacidade de provisionamento no Smart Imaging atual.

Às vezes, uma imagem JPEG é retornada ao Chrome em vez de uma imagem WebP. Por que essa mudança acontece? (#jpeg-webp)

O Smart Imaging determina se a conversão é benéfica ou não. Ele retorna a nova imagem somente se a conversão resultar em um tamanho de arquivo menor com qualidade comparável.

Como a otimização do DPR do Smart Imaging funciona com componentes do Adobe Experience Manager Sites e visualizadores do Dynamic Media?

  • Os Componentes principais dos sites do Experience Manager são configurados por padrão para otimização do DPR. Para evitar imagens com tamanho excessivo devido à otimização do DPR de imagem inteligente do lado do servidor, dpr=off é sempre adicionado às imagens Dynamic Media dos Componentes principais do Experience Manager Sites .
  • Dado que o Dynamic Media Foundation Component é configurado por padrão para otimização de DPR, para evitar imagens com tamanho excessivo devido à otimização de DPR de imagem inteligente do lado do servidor, dpr=off é sempre adicionado às imagens do Dynamic Media Foundation Component. Mesmo que o cliente desmarque a otimização do DPR no Componente de base do DM, o DPR de imagem inteligente do lado do servidor não inicia. Em resumo, no Componente de base do DM, a otimização do DPR entra em vigor com base apenas na configuração de nível do Componente de base do DM.
  • Qualquer otimização de DPR do lado do visualizador funciona em conjunto com a otimização de DPR de imagem inteligente do lado do servidor e não resulta em imagens muito grandes. Em outras palavras, sempre que o DPR for manipulado pelo visualizador, como a exibição principal somente em um visualizador habilitado para zoom, os valores do DPR de imagem inteligente do lado do servidor não serão acionados. Da mesma forma, sempre que elementos do visualizador, como amostras e miniaturas, não tiverem tratamento com DPR, o valor do DPR de Smart Imaging do lado do servidor será acionado.

Consulte também Ao trabalhar com imagens e Ao trabalhar com o Recorte inteligente.

Nesta página