Bij mobiele ontwikkeling is performance essentieel, vooral bij het maken van een Flutter app. Prestatieproblemen komen vaak voor als apps complexer worden, vooral met widgets en lijsten. Hoewel er veel bronnen zijn voor het optimaliseren van Flutter apps, zoals de Flutter performance documentatie, is een vaak over het hoofd gezien gebied hoe afbeeldingen worden gerenderd. Beeldformaten, grootte en caching kunnen een significante impact hebben op de prestaties van je app.

In dit artikel bekijken we hoe je het juiste afbeeldingsformaat kiest en efficiënte renderpraktijken gebruikt om je Flutter app soepel te laten draaien.

1. Afbeeldingen de juiste grootte geven in Flutter

Een van de eenvoudigste manieren om de prestaties van afbeeldingen te optimaliseren is om afbeeldingen te gebruiken die de juiste grootte hebben voor hun schermcontext. Vermijd het laden van te grote afbeeldingen die onnodig geheugen verbruiken. Je kunt de weergaveafmetingen van een afbeelding in Flutter regelen door cacheWidth en cacheHeightop te geven in de widgetImage:

De widgetResizeImage

Voor vergelijkbare resultaten kande ResizeImage widget de grootte van afbeeldingen ook on the fly aanpassen:

Houd rekening met de pixelverhoudingen van apparaten

Houd er rekening mee dat verschillende apparaten verschillende pixelverhoudingen hebben. Het instellen van vaste afmetingen kan leiden tot pixelvorming op schermen met een hoge dichtheid. Test je afbeeldingsformaten op verschillende apparaten om de kwaliteit te garanderen.

2. Te grote afbeeldingen opsporen met debugInvertOversizedImages

Te grote afbeeldingen kunnen geheugen in beslag nemen en de prestaties verminderen. Flutter's debugInvertOversizedImages tool maakt het makkelijk om afbeeldingen te identificeren die te groot zijn voor hun container door hun kleuren om te keren.

Dit is een globale eigenschap die je direct in je code of via Flutter DevTools kunt inschakelen. Als je deze eigenschap op true zet, worden te grote afbeeldingen visueel omgekeerd weergegeven, zodat je snel kunt zien welke afbeeldingen moeten worden aangepast. Het is aan te raden om deze functie in te schakelen in de hoofdmethode van je app, en zorg ervoor dat je het uitschakelt voor de release build. Je kunt dit eenvoudig beheren met kDebug:

Dit hulpprogramma moet alleen worden ingeschakeld tijdens ontwikkeling en debuggen om je te grote afbeeldingen te helpen vangen en de grootte ervan aan te passen voordat ze de productie bereiken.

3. Het beste afbeeldingsformaat kiezen voor prestaties

Het kiezen van het juiste afbeeldingsformaat is cruciaal voor de prestaties, vooral in mobiele applicaties. Elk formaat heeft voor- en nadelen die het geschikt maken voor verschillende soorten afbeeldingen:

• JPG: het beste voor gedetailleerde afbeeldingen met lossy compressie. Decompressie kan echter langzamer zijn, wat invloed heeft op de renderingssnelheid.
• PNG: Ideaal voor afbeeldingen met uniforme achtergronden en maakt gebruik van verliesvrije compressie. Hoewel het een grotere bestandsgrootte heeft, is het sneller te renderen door eenvoudigere decompressie.
• WebP: Combineert lossy en lossless compressie, ondersteunt transparantie met kleinere bestandsgroottes en snellere rendering.
• SVG: Perfect voor pictogrammen en logo's. Omdat het een vectorindeling is, schaalt het zonder kwaliteitsverlies, maar het kan traag zijn om te renderen als de SVG veel complexe elementen bevat.

4. Prestatievergelijking: JPG, PNG en WebP in Flutter

Om de impact van verschillende afbeeldingsformaten aan te tonen, hebben we een test uitgevoerd met een lijst met afbeeldingen met een hoge resolutie. Hier zijn de bevindingen:

JPG

JPG was het langzaamste formaat om te renderen, wat verrassend kan lijken omdat JPG-afbeeldingen meestal een kleinere bestandsgrootte hebben in vergelijking met PNGs. Echter, het complexere decompressieproces voor JPG afbeeldingen leidt tot langzamere rendertijden.

PNG

PNG afbeeldingen leveren iets betere prestaties dan JPG, omdat ze sneller renderen door een eenvoudiger decompressieproces. Echter, hun grotere bestandsgrootte kan leiden tot prestatieproblemen, in het bijzonder met downloadtijden. In een andere toepassing zagen we een verschil van ±10 fps in het voordeel van PNG ten opzichte van JPG.

WebP

WebP bleek het best presterende formaat te zijn, waardoor onze toepassing consistent 120 fps kon behouden. De efficiënte compressie-algoritmes bieden zowel kleinere bestandsgroottes als snellere rendering, waardoor WebP de ideale keuze is voor optimale prestaties.

5. Bestandsgrootte en de invloed op prestaties

Hoewel de prestatieverschillen tussen afbeeldingsindelingen duidelijk zijn, kan de impact variëren per gebruikssituatie. WebP presteert consequent beter dan andere formaten in termen van efficiëntie, waardoor het in de meeste scenario's de voorkeur geniet.

De bestandsgrootte is echter vaak een belangrijkere factor die de prestaties beïnvloedt. Of afbeeldingen nu worden gedownload of gebundeld met de app, het is essentieel om de bestandsgrootte zo klein mogelijk te houden. Grotere afbeeldingen verlengen de downloadtijd en maken de app groter, wat niet ideaal is.

Afbeeldingen met uniforme achtergrond

Bij het vergelijken van bestandsgroottes in verschillende formaten, springt WebP eruit als de meest efficiënte. Voor afbeeldingen met een uniforme achtergrond, zoals logo's, kan PNG ook goed werken, maar WebP biedt nog steeds een kleinere bestandsgrootte.

Complexe afbeeldingen

Voor complexe afbeeldingen worden de verschillen nog groter. PNG behoudt meer details door het gebrek aan compressie, maar WebP bereikt de kleinste bestandsgrootte met behoud van kwaliteit, waardoor het een uitstekende keuze is voor deze gevallen.

6. Best practices voor afbeeldingsformaten in Flutter

Het kiezen van het juiste formaat hangt af van het type inhoud dat je weergeeft:

• Fotografische afbeeldingen: Gebruik WebP voor kleinere bestanden en snellere rendering. Als WebP niet beschikbaar is, kies dan voor een afweging tussen PNG (voor de grootte) en JPG (voor de prestaties).
• Pictogrammen en logo's: Gebruik SVG voor eenvoudige pictogrammen. Als een SVG complex is, overweeg dan om WebP te gebruiken om mogelijke renderproblemen te voorkomen.

Door het volgen van deze praktijken en het maken van doordachte keuzes over afbeeldingsformaten, grootte en caching, kun je de prestaties van je Flutter app aanzienlijk verbeteren en gebruikers een soepelere ervaring bieden.

Conclusie

Het optimaliseren van afbeeldingen voor prestaties lijkt misschien een kleine stap, maar het kan leiden tot grote verbeteringen in de reactiesnelheid en gebruikerservaring van je Flutter app. Van het kiezen van het juiste formaat tot het aanpassen van de grootte en caching, het implementeren van deze strategieën kan een significant verschil maken.