Google PageSpeed Service - Compressing images with AngularJS

Question

TL;DR QUESTION: Are the Angular and PageSpeed compatible at all? I can't find any information anywhere on this.

---

I have an application that uses AngularJS to load in images from external websites. These images are often quite large (~500kb, ~1200x900px) but are served in my application at a lower resolution (~800x500px). I have no control over the image size or level of compression.

I've signed up for Google PageSpeed service and have everything up and running. However, these images are not being touched in any way. I'm wondering if this is because I'm using AngularJS to serve them up (the images are despite being in Angular, I'm serving the images with src="{{img}}" rather than ng-src).

Any ideas on what I can do to get this working? It really seems like an ideal service for me, proper compression and scaling of images would make my page loads go from ~2mb to ~100kb!

Are there any other services which do a similar thing? I need some sort of middleware to compress and scale images before serving them to my user.

EDIT: For clarity, my server is running on Heroku using NodeJS/ExpressJS/AngularJS/MongoDB. Don't know if this affects anything.

Answer 1

After doing a bit of research, it seems that PageSpeed works similar to the Google search, in that it indexes your page and looks for images to compress. Seeing as Angular needs to load scripts before pages are loaded, the two just won't work together.

There is a possible solution found here:

http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

For me this won't really work, as I have dynamic search pages that I can't really pre-render with PhantomJS. But for others, this might be useful.

Please alert me here if this ever changes!