I guess I'll have to go back to putting all the images base64 encoded into the html :-(
Instead of pushing the images just set headers for the images above the fold:
Link: </img/1.jpg>; rel=preload; as=image
The browser will then request the images it doesn't have cached already.The advantage to this method is that the browser can look up the images in its cache first and avoid transferring unnecessary data.
The downside is that it will take at least one round trip for the browser to request them. So if your HTML is short and quick to generate the connection might go idle before your receive these requests.
Link: </img/1.jpg>; rel=preload; as=image; nopush
Or it's likely that the web server will transform this hint in a Server Push (it's supported out of the box by Apache, NGINX, CloudFlare...).I wonder if the proxies would consider some sort of hybrid mode where they proactively fetch the link header and cache it (if it isn't already cached) but don't push it to the client. I can't find any indication that this has been implemented or considered anywhere. Of course if your edge was much closer to the user the the origin it wouldn't have much benefit. But it would still be nice.