Lazy-initialization vs preprocessing in image-based iOS app

Question

I am making an iOS app which contains museum gallery: user can look through exhibits and then select info about it, etc.
On the exhibit screen I have two ScrollViews that are different, but are being fed by common data source. Each view is a set of images. Two top grey squares are the previews and the bottom one (where you can see the picture) is the main view. All scrollviews are lazy-loaded.
The question is, do I need to transform preview images to proper size on-the-go, or somehow pre-process them to make loading faster and use that pre-processed and resized images in previews? The benefit of lazy-initialisation here is lower waste of resources, but slower loading, compared to ready images. On the other side, preprocessed images will waste storage and network (images will be loaded only once and then will be stored locally). What would be better from performance point of view, taking in account that app has to run smoothly down to iPhone 4 (oldest with iOS 7)? Is it good idea to combine two methods and cache lazy-loaded images?

Answer 1

I am sure you are familiar with this idea, but as I was reading your question, this quote from Donald Knuth popped into my head:

Programmers waste enormous amounts of time thinking about, or worrying about, the speed of noncritical parts of their programs, and these attempts at efficiency actually have a strong negative impact when debugging and maintenance are considered. We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.

This very may well be a case that falls within the critical 3% mentioned, but you should probably try the easiest of the approaches you mentioned and make sure. Then, if you can measure a problem, you can optimize for it.