As imagens importadas são renderizadas como estáticas em vez de ativos responsivos no AEM Edge Delivery Services

No Adobe Experience Manager (AEM) Edge Delivery Services, as imagens importadas para as páginas podem ser renderizadas como imagens estáticas em vez de ativos responsivos do Dynamic Media. Como resultado, as imagens não se beneficiam dos recursos do Dynamic Media, como a geração automática de vários tamanhos de imagem ou transformações. Para corrigir esse problema, gere uma marcação de imagem responsiva usando URLs de entrega compatíveis do AEM Assets.

Descrição description

Ambiente

  • Adobe Experience Manager (AEM) Edge Delivery Services
  • AEM Cloud Service

Problema/Sintomas

  • As imagens importadas para páginas são renderizadas como imagens estáticas em vez de ativos responsivos do Dynamic Media.
  • As imagens não se beneficiam dos recursos do Dynamic Media, como a geração automática de vários tamanhos de imagem ou transformações.
  • O problema geralmente ocorre durante as migrações automáticas em que as referências de imagem são preenchidas programaticamente.
  • Nenhuma mensagem de erro é exibida, mas as imagens não exibem comportamento responsivo.

Resolução resolution

Siga as etapas abaixo para resolver o problema.

  1. Certifique-se de que as imagens sejam carregadas ou resolvidas como AEM Assets aprovado na instância do AEM Cloud Service.

  2. Para cada imagem, obtenha o URL de entrega do AEM Assets compatível. Faça isso usando a OpenAPI do Assets ou resolvendo o ativo por meio de seu jcr:uuid e recuperando a URL de entrega.

  3. Atualize o importador ou a lógica de bloco EDS para gerar marcação de imagem responsiva usando o URL de entrega do AEM Assets. Inclua parâmetros para largura, recorte, formato e qualidade para ativar transformações do Dynamic Media.

    Exemplo de marcação de imagem responsiva:

    code language-none
    <img src="https://assets.example.com/asset-id.jpg?width=800&format=webp&quality=80"
    srcset="https://assets.example.com/asset-id.jpg?width=400&format=webp&quality=80 400w,
    https://assets.example.com/asset-id.jpg?width=800&format=webp&quality=80 800w,
    https://assets.example.com/asset-id.jpg?width=1200&format=webp&quality=80 1200w"
    sizes="(max-width: 800px) 100vw, 800px"
    alt="Description of image">
    
  4. Armazene a referência do URL de entrega no conteúdo importado para que o bloco EDS possa usá-lo para gerar a marcação responsiva no momento da renderização.

  5. Teste as páginas renderizadas para verificar se as imagens são entregues de forma responsiva e se as transformações do Dynamic Media são aplicadas.

Leitura relacionada

recommendation-more-help
experience-cloud-kcs-help-kbarticles