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

Otimizar imagens usando o Dynamic Media com recursos OpenAPI Optimize-images-using-Dynamic-Media-with-OpenAPI-Capabilities

Dynamic Media with OpenAPI capabilities oferece recursos de otimização de imagem, como Smart Crop, Image Presets e Smart Imaging. Esses recursos ajudam a fornecer imagens responsivas de alta qualidade que são carregadas rapidamente em diferentes dispositivos e redes.

Corte inteligente smart-crop-using-dynamic-media-with-openapi-capabilities

Recorte inteligente é uma capacidade de dimensionamento dinâmico de Dynamic Media with OpenAPI capabilities. Smart Crop é uma técnica avançada de processamento de imagens que usa o recorte com reconhecimento de conteúdo habilitado por IA para cortar imagens de forma inteligente para vários tamanhos de tela, preservando o contexto visual em versões cortadas. A IA analisa a imagem para identificar o ponto focal ou ponto de interesse pretendido e, em seguida, corta automaticamente a imagem para manter o ponto focal em todas as versões cortadas. Smart Crop, um elemento-chave de design responsivo, fornece uma maneira econômica e eficiente de cortar imagens.

Consulte o artigo Perfis de Imagem de Mídia Dinâmica para saber como criar representações de Recorte Inteligente em Admin View, aplicá-las a pastas ou editar representações já aplicadas a uma imagem ou pasta. Saiba como criar um Smart Crop passo a passo neste vídeo.

O parâmetro Smart Crop espera que perfis de smartcrop nomeados existam e tenham sido aplicados ao ativo. Consulte Perfis de corte inteligente para saber mais sobre o parâmetro Smart Crop e como perfis nomeados Smart Crop são aplicados.

IMPORTANT
Você pode criar Smart Crop representações somente no modo de exibição de Administração.

Predefinições de imagem image-presets-using-dynamic-media-with-openapi-capabilities

Transforme imagens em tempo real usando o recurso Predefinições de Imagem em Dynamic Media with OpenAPI capabilities. Um image preset é um conjunto predefinido de regras de dimensionamento e formatação para uma imagem de saída.

O Dynamic Media with OpenAPI capabilities usa nomes predefinidos para transformar uma imagem em tempo real e gerar sua representação instantaneamente. Quando você solicita uma imagem por meio de uma URL de entrega do Dynamic Media with OpenAPI que inclui um parâmetro predefinido, o DM with OpenAPI aplica as transformações da predefinição, cria a representação sob demanda e a entrega ao usuário.

É possível aplicar uma única predefinição a várias imagens por meio das URLs de entrega de Dynamic Media with OpenAPI. Isso garante uma formatação consistente entre os ativos sem editar manualmente cada um.

Consulte o artigo gerenciando predefinições de imagens para saber como criar predefinições de imagens no Modo de Exibição de Administração e como criar predefinições de imagens responsivas que adaptam ativos automaticamente para se ajustarem a diferentes tamanhos de tela.

Benefícios do uso de predefinições de imagem benefits-of-image-presets

O Image Presets oferece várias vantagens para gerenciar e fornecer imagens no Dynamic Media with OpenAPI. Alguns dos principais benefícios incluem:

  • As predefinições encurtam os URLs de entrega de imagens. Em vez de adicionar vários modificadores de imagem que tornam o URL de entrega mais longo, use uma única predefinição. URLs mais curtos são mais fáceis de gerenciar e garantem uma entrega consistente de imagens em sites, aplicativos móveis, emails e outros canais.
  • As predefinições de imagem criam representações just-in-time de um arquivo de imagem de origem. Esse recurso de geração de representação sob demanda elimina a necessidade de criar e armazenar várias representações estáticas do mesmo arquivo, economizando tempo e armazenamento.
  • Aplique uma única predefinição a um grande conjunto de ativos de uma só vez, evitando edições manuais em cada ativo individualmente, garantindo uma formatação consistente e permitindo escalabilidade.
  • Ao atualizar os parâmetros de uma predefinição, todas as imagens que usam essa predefinição são reformatadas automaticamente. Isso simplifica a edição centralizando as atualizações de formatação, eliminando a necessidade de reeditar ativos individuais ou código da Web.
  • Melhora a eficiência e o desempenho com representações dinâmicas armazenadas em cache pela CDN, resultando em carregamento mais rápido e desempenho otimizado em dispositivos e redes.

Usar predefinições de imagem use-image-presets-using-dynamic-media-with-openapi-capabilities

Depois de criar o Image Presets, você pode usá-los para os seguintes fluxos de trabalho:

Usar predefinições no URL de entrega da imagem use-presets-in-delivery-urls

As predefinições tornam os URLs de entrega mais curtos e fáceis de usar. Cada nome predefinido serve como um identificador exclusivo no URL de entrega. Em vez de adicionar vários modificadores ao URL de entrega de um ativo, faça referência ao nome predefinido para gerar sua representação instantaneamente. Saiba como aplicar Predefinições de Imagem do Dynamic Media à sua imagem.
O exemplo a seguir compara um URL com uma predefinição a um URL sem uma predefinição.

URL sem uma predefinição (URL longa):

https://delivery-p30902-e145436-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:393d5579-5be2-49a5-ac5f-8fed72bfb614/as/AdobeStock_63266433.avif?width=400&height=300&fit=crop&qualit=85&sharpen=true

URL com uma predefinição (URL curta):

https://delivery-p30902-e145436-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:393d5579-5be2-49a5-ac5f-8fed72bfb614/as/AdobeStock_63266433.avif?preset=thumbnail

A miniatura predefinida agrupa as mesmas configurações do modificador de imagem.

Usar predefinições durante a criação no AEM Sites use-presets-during-authoring-in-aem-sites

Os autores podem selecionar Image Presets durante a edição da página na página de criação AEM Sites, quando o suporte para Dynamic Media estiver habilitado.
Execute as seguintes etapas para usar predefinições de imagem na página de criação:

  1. Navegue até a página de criação do Sites.
  2. Execute as etapas na seção Acessar ativos remotos no Editor de páginas do AEM para usar o painel Asset Selector para selecionar um ativo.
  3. No painel asset selector, role até Tipo de predefinição, especifique Preset=Preset Name no campo Modificadores de imagem e clique em Concluído.
    predefinição

Imagem inteligente use-smart-imaging-using-dynamic-media-with-openapi-capabilities

Quando você usa o Dynamic Media with OpenAPI capabilities para entrega de imagens, as imagens são otimizadas automaticamente por meio da Imagem inteligente. A entrega otimizada garante que as imagens sejam carregadas mais rapidamente, tenham qualidade visual máxima e tamanho mínimo de arquivo. Isso resulta em carregamentos de página mais rápidos e qualidade visual consistentemente alta em todos os dispositivos e redes, consumindo o mínimo de largura de banda, tornando seu site mais rápido e mais ágil.

Smart Imaging inclui os seguintes recursos:

Conversão automática de formatação auto-format-conversion

O Dynamic Media with OpenAPI converte automaticamente imagens em formatos modernos e otimizados para a Web, como AVIF ou WEBP. A conversão depende dos recursos do navegador e do direito-licença, independentemente do formato solicitado.

Os formatos AVIF e WEBP oferecem melhor compactação, tornando as imagens menores e mais rápidas de serem entregues e carregadas. O AVIF é usado como o formato padrão, pois lida com todos os recursos do navegador.

Dynamic Media with OpenAPI usa o parâmetro de consulta auto-format para controlar o comportamento do navegador para converter uma imagem em vários formatos para entrega otimizada. A conversão de formatação automática inclui promoção automática e rebaixamento automático. Quando o sistema promove um formato otimizado para a Web (AVIF ou WEBP) em JPEG ou PNG para entrega, ele é chamado de promoção automática.

Por padrão, o parâmetro de consulta auto-format está definido como true. Quando o auto-format está habilitado (true), o sistema ignora o formato solicitado e seleciona automaticamente um formato otimizado para a Web (AVIF ou WEBP) com base nas características da imagem, nos recursos do navegador e no direito de licença.

Quando auto-format é verdadeiro, o sistema fornece o formato de imagem na seguinte sequência:

  • AVIF: o AVIF será entregue se o navegador permitir e a licença permitir. Isso é chamado de promoção automática.
  • WEBP: o WEBP será entregue se o AVIF não tiver suporte ou licença. Também é uma promoção automática.
  • JPEG: o JPEG é entregue somente quando não há suporte para AVIF e WEBP e a imagem não tem um canal alfa (transparência). Isso é chamado de rebaixamento automático.
  • PNG: o PNG é entregue quando o navegador não oferece suporte a formatos modernos e a imagem tem um canal alfa (transparência). Isso também é chamado de rebaixamento automático.

Desabilite auto-format definindo o parâmetro de consulta como false e especifique o formato necessário para obter a imagem entregue nesse formato.

Otimização da largura de banda da rede network-bandwidth-optimisation

As imagens são otimizadas automaticamente com base nas condições de rede do cliente para garantir uma entrega mais rápida e um carregamento suave. Os parâmetros Quality e Max-quality ajustam automaticamente a qualidade controlando os níveis de compactação de imagem, com valores variando de 1 a 100.

Veja os seguintes comportamentos de chave de quality e max-quality parâmetros:

  • Se quality e max-quality forem especificados, quality terá prioridade.
  • Se apenas quality for especificado, a qualidade será entregue independentemente do tempo de carregamento com base na velocidade da rede.
  • Se apenas max-quality for especificado, a qualidade da imagem será ajustada automaticamente com base nas condições da rede, fornecendo a melhor qualidade possível até o valor max-quality especificado.
  • Se nenhum for especificado, o sistema aplicará a otimização dinâmica com um padrão max-quality de 85.

Parâmetro de qualidade quality-parameter

O parâmetro de qualidade prioriza a qualidade da imagem em relação à velocidade de carregamento. Ele corrige a qualidade da imagem de saída para o valor solicitado (entre 1 e 100) e ignora as condições da rede. Saiba mais sobre o parâmetro de qualidade.

Parâmetro de qualidade máxima max-quality-parameter

A qualidade máxima equilibra a qualidade da imagem e o tempo de carregamento com base na velocidade da rede do cliente. Ele prioriza tempos de carregamento mais rápidos ao reduzir a qualidade da imagem em redes mais lentas, ao mesmo tempo em que fornece a maior qualidade possível (1-100) para as condições de rede especificadas. Saiba mais sobre o parâmetro de qualidade máxima.

Consulte também

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