Dear Ionic Forum Members,
i am currently planing to optimise our image formats to use in our app. All our pictures will be in a 16:9 format.
Our app depends heavily on remote images loaded by $http. We currently have 2 layouts to display them: 1 column layout and 2 column layout in combination with collection-repeat. As I have read on various posts here and on other websites displaying many images in ionic is really affecting performance and memory usage.
Our final app will only support portrait size and I came up with the following image sizes to use:
As seen in the screenshot I have 100% screen width (purple) and 50% screen width (green) representing the corresponding layout (1 column or 2 columns) for each device type. I plan to use a responsive image switcher like picturefill.js or something similar to show the correct image to the correct device.
Now my question:
What images resolutions are you using in your apps? Do you deliver full retina optimised images to each device type or do you use non retina images to gain further performance?
Would really love to hear how you handle remote images on large lists. For example if I would serve retina optimised images to an iPhone 6 plus I would need 20 cards with 621x349 pixel images in a 2 column layout. By using load-more the list could grow up to 100 items. Is this overkill for a non native app?
I think this is an important topic interesting for many people who plan to serve remote images using ionic framework.
What are your best practices?
Looking forward to hear from you 