Em aplicativos para dispositivos móveis, o tamanho dos arquivos e das imagens do artigo podem afetar o desempenho. Recomendamos que você evite usar arquivos de artigos grandes, se possível, e encontrar o equilíbrio certo entre o tamanho da imagem e a qualidade da exibição.

Vídeo Otimização da imagem

Vídeo Otimização da imagem
Este vídeo descreve quatro métodos para melhorar o desempenho do aplicativo AEM Mobile. (Gravado em janeiro de 2017)

Otimizar imagens de fundo da coleção

Recomendamos que você crie a imagem de fundo usando as dimensões do dispositivo de destino principal, como uma imagem JPG de 1536 x 2048 pixels para um aplicativo iPad em retrato, e ajuste o nível de qualidade de uma imagem JPG para uma configuração média.

A imagem de fundo será redimensionada para preencher a tela e será centralizada, de modo que as bordas da imagem serão cortadas se as dimensões da imagem de fundo não corresponderem às dimensões do dispositivo.

Você pode usar os formatos JPG ou PNG para imagens de fundo. Na maioria dos casos, o JPG resulta em arquivos de imagem menores com boa qualidade.  

No entanto, considere usar PNG em vez de JPG nas seguintes situações:

  • Se a imagem contiver transparência (por exemplo, se você desejar que a cor de fundo transpareça).
  • Se a imagem contiver uma paleta de cores menor. As imagens em PNG geralmente são compactadas mais facilmente do que as imagens em JPG.
  • Se a imagem contiver texto ou objetos de vetor. As imagens em PNG geralmente são mais nítidas do que as imagens em JPG.

 

Encontre a combinação certa entre tamanho e qualidade. Por exemplo, uma imagem de fundo padrão deve ter aproximadamente 200 KB, e não 5 MB.

Página de navegação com uma imagem de fundo

Otimizar imagens de cartões e banners

Recomendamos que você crie imagens de cartões e banners com base nas maiores dimensões da área de exibição de imagem do cartão e ajuste o nível de qualidade para uma configuração média. Encontre a combinação certa entre tamanho e qualidade.

Em nossos testes, descobrimos que o uso de imagens em JPG com dimensões maiores e configurações de qualidade mais baixas resulta no tamanho mais eficiente para o equilíbrio de qualidade nos aplicativos para dispositivos móveis. Use imagens em PNG se a imagem contiver transparência ou texto.

As imagens de cartão são dimensionadas, centralizadas e cortadas quando são usadas em um cartão. Logo, as imagens podem ser exibidas de forma diferente do que você pretendia. Crie a arte com recursos proeminentes perto do centro da imagem. As alterações no tamanho e na dimensão do cartão, bem como na proporção da imagem no cartão, influenciarão a forma como a imagem será exibida no cartão.

Página de navegação com cartões de largura completa

Diretrizes para usar conteúdo HTML em artigos e banner dinâmicos

Preste atenção ao tamanho dos arquivos de imagem que incluir nos artigos HTML. Embora as imagens grandes possam ser exibidas corretamente em um navegador, elas podem afetar a velocidade de download dos artigos em aplicativos para dispositivos móveis. Compacte as imagens. Encontre as configurações de compactação corretas para que as imagens sejam exibidas nitidamente nos dispositivos de destino.

Se você usa o AEM Mobile Article Packager para criar artigos HTML ou banners dinâmicos, lembre-se de que quando você arrasta e solta a pasta de arquivos HTML no Packager, o arquivo de artigo resultante inclui todos os arquivos dessas pastas, mesmo que os ativos não sejam usados. Certifique-se de simplificar os arquivos HTML antes de gerar o arquivo de artigo. Por exemplo, se você incluir várias instâncias da mesma imagem, como imagens em PSD, JPG e PNG, remova qualquer imagem que não seja usada no HTML.

Se você usar um sistema de gerenciamento de conteúdo (CMS) para criar arquivos de artigo, certifique-se de que os arquivos dos artigos não incluam imagens excessivamente grandes ou ativos não usados.

Para obter detalhes, consulte Criar artigos HTML para o AEM Mobile.

Imagens usadas em artigos baseados no InDesign

Redimensione ou otimize os arquivos de vídeo incorporados ou considere a transmissão dos vídeos, em vez de incorporá-los.

Se você usa o InDesign para criar artigos de layout fixo, todos os ativos não interativos são rasterizados automaticamente quando você exporta o artigo. Portanto, você não precisa se preocupar com o uso de imagens grandes nos layouts do InDesign.

Para sobreposições interativas, é importante compreender a diferença entre sobreposições de pass-through e rasterizadas.

  • As sobreposições rasterizadas (apresentações de slides, botões e conteúdo com rolagem) são compactadas da mesma forma que o conteúdo não interativo.
  • As sobreposições de pass-through não são compactadas quando você exporta o artigo. Elas são transmitidas no tamanho que você usou quando as criou. Sobreposições de pass-through incluem arquivos de vídeo e áudio, sequências de imagens, imagens de panorama e zoom e arquivos de controlador de áudio. No caso de sobreposições de pass-through, preste atenção ao tamanho e à qualidade dos arquivos.

Para obter detalhes, consulte Visão geral de sobreposições interativas.

Compartilhar fontes em artigos HTML

Em vez de carregar o mesmo conjunto de fontes para cada artigo HTML, você pode usar o portal de serviços sob demanda para especificar as fontes a serem incluídas em seu aplicativo. Em seguida, você pode clicar em uma opção para copiar uma lista de fontes usadas e incluir essa lista em seus arquivos CSS ou HTML. Ao fazer referência às fontes compartilhadas, você pode melhorar os tempos de download de artigos HTML em seu aplicativo. Consulte estes artigos:

Personalizar aplicativos AEM Mobile: usando fontes personalizadas

Criar artigos HTML para o AEM Mobile: usar fontes compartilhadas.

Compartilhar ativos em artigos HTML

Se você usar um sistema de gerenciamento de conteúdo (CMS) para criar artigos para o AEM Mobile, poderá usar a Shared Content API para agrupar o conteúdo que é compartilhado entre esses artigos. Compartilhar arquivos de imagens, JavaScript e CSS é uma excelente maneira de melhorar o desempenho do aplicativo e garantir a consistência. Consulte Trabalhar com conteúdo compartilhado usando On-Demand Services APIs.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online