In mobiele apps kunnen de grootte van artikelbestanden en afbeeldingen van invloed zijn op de prestaties. We raden u aan indien mogelijk geen grote artikelbestanden te gebruiken en de juiste balans te zoeken tussen de afbeeldingsgrootte en de weergavekwaliteit.

Video over optimalisatie van afbeeldingen

Video over optimalisatie van afbeeldingen
In deze video worden vier methoden beschreven om de prestaties van AEM Mobile-apps te verbeteren. (Opgenomen in januari 2017)

Achtergrondafbeeldingen van collecties optimaliseren

We raden u aan de achtergrondafbeelding te maken met de afmetingen van het primaire doelapparaat, zoals een 1536x2048 JPG-afbeelding voor een staande iPad-app, en het kwaliteitsniveau van een JPG-afbeelding op Normaal in te stellen.

De achtergrondafbeelding wordt geschaald om het scherm te vullen en gecentreerd, zodat de randen van de afbeelding worden bijgesneden als de achtergrondafbeeldingdimensies niet overeenkomen met de afmetingen van het apparaat.

U kunt een JPG- of PNG-indeling voor achtergrondafbeeldingen gebruiken. In de meeste gevallen leiden JPG-resultaten tot kleinere afbeeldingsbestanden met een goede kwaliteit.  

U kunt echter overwegen in de volgende situaties PNG te gebruiken in plaats van JPG:

  • Als de afbeelding transparantie bevat (bijvoorbeeld als u wilt dat de achtergrondkleur doorkomt).
  • Als de afbeelding een kleiner kleurenpalet bevat, kunnen PNG-bestanden gewoonlijk beter worden gecomprimeerd dan JPG-afbeeldingen.
  • Als de afbeelding tekst of vectorobjecten bevat, worden PNG-afbeeldingen meestal scherper dan JPG-afbeeldingen.

 

Zoek de juiste combinatie van grootte en kwaliteit. Zo moet een standaardachtergrondafbeelding bijvoorbeeld circa 200 KB zijn, niet 5 MB.

Bladerpagina met een achtergrondafbeelding

Kaartafbeeldingen en banners optimaliseren

We raden u aan de kaart- en bannerafbeeldingen te maken op basis van de grootste afmetingen van het weergavegebied van de afbeelding van de kaart en het kwaliteitsniveau op een gemiddelde instelling te zetten. Zoek de juiste combinatie van grootte en kwaliteit.

Bij onze test kwam naar voren dat JPG-afbeeldingen met grotere afmetingen en een lagere kwaliteit tot de meest effectieve grootte leiden voor een goede balans tussen grootte en kwaliteit voor mobiele apps. Gebruik PNG-afbeeldingen als de afbeelding transparantie of tekst heeft.

Kaartafbeeldingen worden geschaald, gecentreerd en bijgesneden als u ze in een kaart gebruikt. De afbeelding kan dus anders zijn dan uw ontwerpdoel. Ontwerp de illustraties met sterke functies in het midden van de afbeelding. Wijzigingen in kaartgrootte, afmetingen en de hoogte-breedteverhouding zijn allemaal van invloed op de manier waarop de afbeelding op de kaart wordt weergegeven.

Bladerpagina met kaarten op volledige breedte

Richtlijnen voor het gebruik van HTML-inhoud in artikelen en dynamische banners

Let goed op de grootte van afbeeldingsbestanden die u in HTML-artikelen gebruikt. Hoewel grote afbeeldingen mogelijk prima in een webbrowser worden weergegeven, hebben ze wel invloed op de downloadsnelheid van artikelen in mobiele apps. Comprimeer afbeeldingen. Zoek de juiste compressie-instellingen die nog steeds scherpe afbeeldingen op uw doelapparaten weergeven.

Als u de AEM Mobile Article Packager gebruikt om HTML-artikelen of dynamische banners te maken en de map met HTML-bestanden naar de Packager sleept, moet u onthouden dat de hieruit voortgekomen artikelen alle bestanden in die mappen bevatten, zelfs als de middelen niet worden gebruikt. Zorg ervoor dat u uw HTML-bestanden stroomlijnt voordat u het artikelbestand genereert. Als u bijvoorbeeld meerdere instanties van dezelfde afbeelding insluit, zoals PSD-, JPG- en PNG-afbeeldingen, moet u ervoor zorgen dat u elke afbeelding verwijdert die niet in de HTML wordt gebruikt.

Als u een contentmanagementsysteem (CMS) gebruikt om artikelbestanden te maken, moet u ervoor zorgen dat de artikelbestanden geen extreem grote afbeeldingen of niet-gebruikte middelen bevatten.

Zie HTML-artikelen maken voor AEM Mobile voor meer informatie.

Afbeeldingen die worden gebruikt in artikelen op basis van InDesign

Geef ingesloten videobestanden een andere grootte of optimaliseer de bestanden. U kunt ook overwegen om video's te streamen in plaats van deze in te sluiten.

Als u InDesign gebruikt om artikelen met een vaste lay-out te maken, worden alle niet-interactieve middelen automatisch opnieuw berekend als u het artikel exporteert. U hoeft zich dus geen zorgen meer te maken over het gebruik van grote afbeeldingen in uw InDesign-lay-outs.

Voor interactieve overlays is het belangrijk dat u het verschil begrijpt tussen passthrough- en opnieuw berekende overlays.

  • Opnieuw berekende overlays (presentaties, knoppen en schuifbare frames) worden gecomprimeerd, net als niet-interactieve inhoud.
  • Passthroughoverlays niet worden gecomprimeerd als u het artikel exporteert. Ze worden doorgegeven in de grootte die u gebruikte toen u ze hebt gemaakt. Passthroughoverlays bevatten video- en audiobestanden, afbeeldingsreeksen, pan- en zoomafbeeldingen en audiocontrollerbestanden. Let bij passthroughoverlays op de grootte en de kwaliteit van de bestanden.

Zie Overzicht van interactieve overlays voor meer informatie.

Lettertypen delen in HTML-artikelen

In plaats van dezelfde reeks lettertypen voor elk HTML-artikel te laden, kunt u de portal voor on-demandservices gebruiken om lettertypen op te geven die in uw app moeten worden opgenomen. U kunt vervolgens op een optie klikken om een lijst met gebruikte lettertypen te kopiëren en deze lijst op te nemen in uw CSS- of HTML-bestanden. Door naar gedeelde lettertypen te verwijzen, kunt u de downloadtijd van HTML-artikelen in uw app verbeteren. Raadpleeg deze artikelen:

AEM Mobile-apps aanpassen: Aangepaste lettertypen gebruiken

HTML-artikelen maken voor AEM Mobile: Gedeelde lettertypen gebruiken

Middelen delen in HTML-artikelen

Als u een inhoudsbeheersysteem (CMS) gebruikt om artikelen voor AEM Mobile te maken, kunt u de Shared Content API gebruiken om inhoud te bundelen die tussen deze artikelen wordt gedeeld. Afbeeldingen, JavaScript en CSS-bestanden delen is een uitstekende manier om de prestaties van apps te verbeteren en consistentie te waarborgen. Zie Werken met gedeelde inhoud via de On-Demand Services API's.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid