In mobilen Apps kann die Größe von Artikeldateien und Bildern Auswirkungen auf die Leistung haben. Sie sollten nach Möglichkeit keine großen Artikeldateien verwenden und den optimalen Kompromiss zwischen Bildgröße und Darstellungsqualität finden.

Video zur Bildoptimierung

Video zur Bildoptimierung
In diesem Video werden vier Methoden zur Verbesserung der Leistung von AEM Mobile-Apps beschrieben. (Im Januar 2017 aufgezeichnet.)

Optimieren von Hintergrundbildern von Sammlungen

Sie sollten das Hintergrundbild mit den Abmessungen des primären Zielgeräts erstellen, z. B. ein JPG-Bild mit 1536 x 2048 für eine iPad-App im Hochformat, und die Qualitätsstufe für JPG-Bilder auf eine mittlere Einstellung festlegen.

Das Hintergrundbild wird skaliert, um es an den Bildschirm anzupassen, und zentriert. Die Ränder des Bilds werden daher zugeschnitten, wenn die Abmessungen des Hintergrundbilds nicht der Größe des Geräts entsprechen.

Sie können für Hintergrundbilder das JPG- oder PNG-Format verwenden. In den meisten Fällen erhalten Sie mit dem JPG-Format kleinere Bilddateien mit guter Qualität.  

In den folgenden Fällen sollten Sie allerdings PNG statt JPG in Betracht ziehen:

  • Wenn das Bild Transparenz enthält (z. B. wenn die Hintergrundfarbe durchscheinen soll).
  • Bei Bildern mit einer kleineren Farbpalette werden PNG-Bilder in der Regel besser komprimiert als JPG-Bilder.
  • Wenn das Bild in Text- oder Vektorobjekte enthält, werden PNG-Bilder normalerweise präziser als JPG-Bilder angezeigt.

 

Suchen Sie nach dem richtigen Verhältnis von Größe und Qualität. Ein Standardhintergrundbild sollte z. B. eine Größe von ca. 200 KB haben, nicht 5 MB.

Durchsuchen-Seite mit Hintergrundbild

Optimieren von Kartenbildern und Bannern

Sie sollten die Karten- und Banner-Bilder auf Grundlage der größten Abmessungen des Bildanzeigebereichs der Karte erstellen und die Qualität mit einer mittleren Einstellung anpassen. Suchen Sie nach dem richtigen Verhältnis von Größe und Qualität.

Tests haben ergeben, dass die Verwendung von JPG-Bildern mit größeren Abmessungen und einer geringeren Qualitätseinstellung zum effektivsten Verhältnis von Größe zu Qualität bei mobilen Apps führt. Verwenden Sie PNG-Bilder, wenn das Bild Transparenz oder Text enthält.

Kartenbilder werden skaliert, zentriert und zugeschnitten, wenn sie auf einer Karte verwendet werden. Das Bild kann daher von dem geplanten Design abweichen. Platzieren Sie Bildmaterial mit auffälligen Motiven in der Mitte des Bilds. Änderungen der Kartengröße, der Kartenabmessungen und des Bildseitenverhältnisses auf der Karte haben Auswirkungen darauf, wie das Bild auf der Karte angezeigt wird.

Durchsuchen-Seite mit Karten mit voller Breite

Richtlinien zum Verwenden von HTML-Inhalten in Artikeln und dynamischen Bannern

Achten Sie auf die Größe der Bilddateien in HTML-Artikeln. Große Bilder werden möglicherweise problemlos in einem Webbrowser angezeigt, sie können jedoch die Downloadgeschwindigkeit von Artikeln in mobilen Apps beeinträchtigen. Komprimieren Sie die Bilder. Ermitteln Sie die passenden Komprimierungseinstellungen, mit denen noch präzise Bilder auf den Zielgeräten angezeigt werden.

Wenn Sie mit AEM Mobile Article Packager HTML-Artikel oder dynamische Banner erstellen und den Ordner mit den HTML-Dateien per Drag & Drop im Packager hinzufügen, beachten Sie, dass die Artikeldatei alle Dateien in diesen Ordnern enthält – auch Elemente, die nicht verwendet werden. Stellen Sie sicher, dass Sie die HTML-Dateien optimieren, bevor Sie die Artikeldatei generieren. Wenn Sie beispielsweise mehrere Instanzen desselben Bildes einschließen, z. B. PSD-, JPG- und PNG-Bilder, stellen Sie sicher, dass Sie alle Bilder entfernen, die nicht in der HTML-Datei verwendet werden.

Wenn Sie die Artikeldateien mit einem Content Management System (CMS) erstellen, achten Sie darauf, dass die Artikeldateien keine sehr großen Bilder oder nicht verwendete Elemente enthalten.

Weitere Informationen finden Sie unter Erstellen von HTML-Artikeln für AEM Mobile.

In InDesign-basierten Artikeln verwendete Bilder

Ändern Sie die Größe oder optimieren Sie eingebettete Videodateien oder streamen Sie Videos, anstatt sie einzubetten.

Wenn Sie mit InDesign Artikel mit festem Layout erstellen, werden alle nicht interaktiven Elemente automatisch neu berechnet, wenn Sie den Artikel exportieren. Sie müssen sich daher keine Gedanken über die Verwendung von großen Bildern in InDesign-Layouts machen.

Bei interaktiven Überlagerungen ist es wichtig, den Unterschied zwischen Pass-through-Überlagerungen und neu aufgelösten Überlagerungen zu verstehen.

  • Neu aufgelöste Überlagerungen – Diashows, Schaltflächen und durchlaufbare Rahmen – werden wie nicht interaktive Inhalte komprimiert.
  • Pass-through-Überlagerungen werden nicht komprimiert, wenn Sie den Artikel exportieren. Sie werden in der Größe übergeben, die beim Erstellen der Überlagerung angegeben wurde. Pass-through-Überlagerungen umfassen Video- und Audiodateien, Bildsequenzen, schwenk- und zoombare Bilder sowie Audio-Steuerelementdateien. Achten Sie bei Pass-through-Überlagerungen auf die Größe und Qualität der Dateien.

Weitere Informationen finden Sie unter Interaktive Überlagerungen.

Verwenden von Schriftarten in mehreren HTML-Artikeln

Statt für jeden HTML-Artikel denselben Schriftartensatz hochzuladen, können Sie das On-Demand-Dienste-Portal verwenden, um die Schriftarten anzugeben, die Ihre App enthalten soll. Dann können Sie auf eine Option klicken, um eine Liste der verwendeten Schriftarten zu kopieren und diese Liste in Ihre CSS- oder HTML-Dateien einzuschließen. Durch Verweisen auf freigegebene Schriftarten können Sie die Downloadzeiten von HTML-Artikeln in Ihrer App verkürzen. Weitere Informationen finden Sie in den folgenden Artikeln:

Anpassen von AEM Mobile-Apps: Benutzerdefinierte Schriftarten verwenden

Erstellen von HTML-Artikeln für AEM Mobile: Verwenden von freigegebenen Schriftarten für HTML-Artikel

Freigeben von Elementen in HTML-Artikeln

Wenn Sie zum Erstellen von Artikeln für AEM Mobile ein Content-Management-System (CMS) verwenden, können Sie mit der Shared Content API Inhalte bündeln, die in allen diesen Artikeln verwendet werden. Das Freigeben von Bildern sowie von JavaScript- und CSS-Dateien ist eine hervorragende Möglichkeit, die App-Leistung zu verbessern und Konsistenz sicherzustellen. Siehe Arbeiten mit gemeinsamen Inhalten mit der On-Demand Services API.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie