Suggestions for image optimisation strategies?

Hi there,

I've recently created my first MVP, shuzzle.me is the name of the app. It is somewhat of a challenging tile sliding game
and a new way to have fun with your Instagram pictures.

You can try it out here -- >>

Note: you will need to login with your Instagram credentials in order to access the app

Anyhow's the reason for my post is I'm struggling to find a way to optimise the delivery of images to the end users in particular mobiles users on first load with a 3G connection. I need an approach or strategy that will scale if my application see's an increase in users and drastically reduce the size of images being pushed to the end user's device.

The Problem
My problem is that the images returned via the Instagram Basic Display & Graph API are super large in file size and dimension.

For example, upon first load of a profile view, 28 images are pulled from the API. The image size per picture pulled into the shuzzle users profile is between 500kb and 750kb. This could be an initial load of 14Mb to 21Mb which on a 3G mobile connection is dire and renders a poor overall UX.

In addition to that, the IG Graph API does not provide a way to call an image resource of a smaller size.

Possible Approaches
I've tried lazy loading the images into the browser, various PHP image optimisation libraries / frameworks but alas to no increase in performance and reduction in per picture file size or dimension.

I suspect I need to save or cache the images then process / resize them and then delivery them to the end user.

Constraints
As this is a side hobby, I have a very limited budget so hoping to achieve this with a solution or approach that is very wallet friendly / cost effective, therefore I wish to avoid using a third party image optimising service or something of that nature.

Any suggestions or best approach to my problem would be greatly appreciated?

Thanks
R