Nelle app mobili, le dimensioni dei file articolo e delle immagini possono influire sulle prestazioni. Evitate di utilizzare file di articolo di grandi dimensioni, se possibile, e trovate il giusto equilibrio tra dimensioni delle immagini e qualità di visualizzazione.

Video di ottimizzazione delle immagini

Video di ottimizzazione delle immagini
In questo video vengono descritti 4 metodi per migliorare le prestazioni delle app AEM Mobile (registrato a gennaio 2017)

Ottimizzazione delle immagini di sfondo della raccolta

È consigliabile creare l'immagine di sfondo utilizzando le dimensioni del dispositivo di destinazione principale, ad esempio un'immagine JPG 1536x2048 per un'app in formato verticale per iPad e impostare il livello di qualità dell'immagine JPG su un valore medio.

L'immagine di sfondo viene adattata allo schermo e centrata, pertanto i margini dell'immagine verranno ritagliati se le dimensioni dell'immagine di sfondo non corrispondono alle dimensioni del dispositivo.

Per le immagini di sfondo potete utilizzare sia il formato JPG che PNG. Nella maggior parte dei casi, il formato JPG darà luogo a file di immagine più piccoli con buona qualità.  

Tuttavia, prendete in considerazione l'utilizzo del formato PNG invece del formato JPG nelle seguenti situazioni:

  • Se l'immagine include la trasparenza (ad esempio, se desiderate che sia possibile vedere al di là del colore di sfondo).
  • Se l'immagine include una palette dei colori ridotta, le immagini PNG in genere si comprimono meglio delle immagini JPG.
  • Se l'immagine include testo oppure oggetti vettore, le immagini PNG in genere risultano più nitide delle immagini JPG.

 

Trovate la giusta combinazione di dimensioni e qualità. Ad esempio, le dimensioni di un'immagine di sfondo standard devono essere intorno ai 200 KB, non 5 MB.

Sfogliate la pagina con un'immagine di sfondo

Ottimizzazione delle immagini della scheda e banner

È consigliabile creare le immagini della scheda e del banner in base alle dimensioni maggiori dell'area di visualizzazione dell'immagine e regolare il livello di qualità su un'impostazione media. Trovate la giusta combinazione di dimensioni e qualità.

Durante i test abbiamo scoperto che utilizzando le immagini JPG di dimensioni maggiori e impostazioni di qualità inferiore, il rapporto tra dimensioni e qualità nelle app mobili risulta ottimale. Usate immagini PNG solo se l'immagine che usate dispone di trasparenza o testo.

Le immagini delle schede vengono centrate e ritagliate se utilizzate su una scheda. Pertanto, l'immagine può essere diversa dall'intenzione del progetto. Progettate la grafica con le funzioni principali accanto al centro dell'immagine. Le modifiche nelle dimensioni della scheda e nelle proporzioni dell'immagine sulla scheda influenzeranno il modo in cui l'immagine viene visualizzata sulla scheda.

Pagina di ricerca con schede a larghezza intera

Linee guida per utilizzare il contenuto HTML negli articoli e nei banner dinamici

Prestate attenzione alle dimensioni dei file di immagine che includete negli articoli HTML. Mentre le immagini di grandi dimensioni possono essere visualizzate correttamente in un browser Web, è possibile che al momento del download possano compromettere la velocità degli articoli nelle app mobili. Comprimete le immagini. Trovate le giuste impostazioni di compressione che consentiranno comunque di visualizzare immagini nitide sui dispositivi di destinazione.

Se utilizzate AEM Mobile Article Packager per creare articoli HTML o banner dinamici, ricordate che quando trascinate e rilasciate la cartella di file HTML su Packager, il file di articolo risultante include tutti i file di quelle cartelle, persino se le risorse non vengono utilizzate. Accertatevi di ottimizzare i file HTML prima di generare il file dell'articolo. Ad esempio, se includete più istanze della stessa immagine, ad esempio, immagini PSD, JPG e PNG, accertatevi di rimuovere eventuali immagini non utilizzate nell'HTML.

Se utilizzate CMS per creare file articolo, accertatevi che i file articolo non includano immagini sovrapposte di grandi dimensioni o risorse inutilizzate.

Per informazioni dettagliate, consultate Creazione di articoli HTML per AEM Mobile.

Immagini utilizzate negli articoli InDesign

Ridimensionate oppure ottimizzate i file video incorporati o prendete in considerazione lo streaming dei video invece di incorporarli.

Se utilizzate InDesign per creare articoli con layout fisso, tutte le risorse non interattive vengono automaticamente ricampionate quando esportate l'articolo, pertanto non dovete preoccuparvi di utilizzare immagini grandi nei layout InDesign.

Per le sovrapposizioni interattive, è importante comprendere la differenza tra sovrapposizioni passthrough e ricampionate.

  • Le sovrapposizioni ricampionate, presentazioni, pulsanti e cornici scorrevoli, vengono compresse in modo identico al contenuto non interattivo.
  • Le sovrapposizioni passthrough non vengono compresse quando esportate l'articolo. Vengono trasmesse nella dimensione originaria utilizzata al momento della creazione. Le sovrapposizioni passthrough includono file video e audio, sequenze di immagini, immagini scorrimento e zoom e file di controller audio. Per le sovrapposizioni passthrough, prestate attenzione alle dimensioni e alla qualità dei file.

Per informazioni dettagliate, consultate Panoramica delle sovrapposizioni interattive.

Condivisione dei font negli articoli HTML

Invece di caricare lo stesso set di font per ogni articolo HTML, potete utilizzare il portale di servizi su richiesta per specificare i font da includere nella vostra app. Potete quindi fare clic su un'opzione per copiare un elenco dei font utilizzati e includere questo elenco nei file CSS o HTML. Facendo riferimento ai font condivisi, potete migliorare i tempi di download degli articoli HTML nell'app. Consultate questi articoli:

Personalizzazione di app AEM Mobile: Utilizzo di font personalizzati

Creazione di articoli HTML per AEM Mobile: Utilizzo di font condivisi.

Condivisione delle risorse negli articoli HTML

Se utilizzate un sistema di gestione dei contenuti (CMS) per creare articoli per AEM Mobile, potete utilizzare l'API Shared Content per creare un bundle di contenuto che viene condiviso tra questi articoli. La condivisione di immagini, file JavaScript e CSS è un modo eccellente per migliorare le prestazioni delle app e garantire l'uniformità. Consultare Utilizzo del contenuto condiviso tramite On-Demand Services API.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online