在行動應用程式中,文章檔案和影像的大小可能會影響效能。我們建議您盡可能避免使用大型文章檔案,並且在影像大小與顯示品質之間找出適當的平衡。

影像最佳化影片

影像最佳化影片
這段影片將會說明改善 AEM Mobile 應用程式效能的 4 個方法 (2017 年 1 月錄製)。

最佳化系列背景影像

我們建議您使用主要目標裝置的尺寸來建立背景影像 (例如 1536x2048 JPG 影像適用於縱向 iPad 應用程式),並且將 JPG 影像的品質等級設定為中度設定。

背景影像會縮放以填滿螢幕並置於正中央,因此如果背景影像尺寸與裝置尺寸不符,影像的邊緣將會遭到裁切。

您可以針對背景影像使用 JPG 或 PNG 格式。在大多數情況下,JPG 會產生品質良好的小型影像檔。 

不過,在下列情況中,請考慮使用 PNG 而非 JPG:

  • 如果影像包含透明度 (例如,如果您希望背景顏色能夠穿透)。
  • 如果影像包含小型調色盤,PNG 影像的壓縮效果通常會比 JPG 影像更好。
  • 如果影像包含文字或向量物件,PNG 影像通常會比 JPG 影像更清晰。

 

請找出適當的大小與品質組合。例如,標準的背景影像應該大約為 200 KB,而非 5 MB。

含有背景影像的瀏覽頁

最佳化卡片影像和橫幅

我們建議您根據卡片影像顯示區域的最大尺寸來建立卡片和橫幅影像,並且將品質等級調整為中度設定。請找出適當的大小與品質組合。

在測試過程中,我們發現使用尺寸較大但品質設定較低的 JPG 影像會在行動應用程式中產生最有效的大小與品質平衡。如果您的影像具有透明度或文字,請使用 PNG 影像。

卡片影像用於卡片時,影像會進行縮放、置中和裁切。因此,影像可能會偏離您的設計原意。設計圖稿時,請將表達重點擺在影像中央附近的區域。只要變更卡片大小、卡片尺寸和卡片的影像外觀比例,都將影響影像在卡片上呈現的方式。

含有全寬卡片的瀏覽頁

在文章和動態橫幅中使用 HTML 內容的方針

請注意您在 HTML 文章中加入之影像檔的大小。雖然大型影像可以在網頁瀏覽器中正常顯示,不過大型影像可能會影響行動應用程式中文章的下載速度。請壓縮影像。找出仍可在目標裝置上顯示清晰影像的適當壓縮設定。

如果您使用 AEM Mobile Article Packager 來建立 HTML 文章或動態橫幅,請記住,當您將 HTML 檔案夾拖放到 Packager 時,產生的文章檔案會包含這些檔案夾中的所有檔案,即使並未使用這些資產也一樣。請務必先簡化您的 HTML 檔案,然後再產生文章檔案。例如,如果您加入相同影像的多個實例 (例如 PSD、JPG 和 PNG 影像),請務必移除任何沒有用於 HTML 的影像。

如果您使用內容管理系統 (CMS) 來建立文章檔案,請確定文章檔案沒有包含過大的影像或未使用的資產。

如需詳細資訊,請參閱「建立適用於 AEM Mobile 的 HTML 文章」。

用於 InDesign 文章的影像

調整內嵌影片檔案的大小或進行最佳化,或者考慮串流影片而非內嵌影片。

如果您使用 InDesign 來建立固定版面文章,所有非互動式資產都會在您匯出文章時自動重新取樣,因此您不需要擔心是否在 InDesign 版面中使用了大型影像。

對於互動式覆蓋,請務必了解「傳遞通過」與「重新取樣」覆蓋之間的差異。

  • 重新取樣覆蓋 (投影片、按鈕和可捲動影格) 的壓縮方式與非互動式內容完全一樣。
  • 傳遞通過覆蓋不會在您匯出文章時進行壓縮。它們會依照您建立時使用的大小傳遞通過。傳遞通過覆蓋包括影片和音訊檔案、影像序列、平移與縮放影像以及音訊控制器檔案。對於傳遞通過覆蓋,請注意檔案的大小和品質。

如需詳細資訊,請參閱「互動覆蓋簡介」。

在 HTML 文章中共用字體

您可以使用隨選服務入口網站來指定要包含在應用程式中的字體,而不必為每一篇 HTML 文章載入同一組字體。接著,您可以按一下選項來複製所使用的字體清單,並將此清單包含在 CSS 或 HTML 檔案中。透過參照共用字體,您可以改善應用程式中 HTML 文章的下載時間。請參閱這些文章︰

自訂 AEM Mobile 應用程式︰使用自訂字體

建立適用於 AEM Mobile 的 HTML 文章:使用共用字體

在 HTML 文章中共用資產

如果您使用內容管理系統 (CMS) 來撰寫適用於 AEM Mobile 的文章,您可以使用 Shared Content API 來包裹這些文章所共用的內容。共用影像、JavaScript 和 CSS 檔案,是改善應用程式效能和確保一致性的絕佳方式。請參閱「使用 On-Demand Services API 處理共用內容」。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策