I'm currently experimenting with http/2 and server push rules. It's quite easy to implement the push rules for js and css files, but, there seems to be no way to effectively use the push feature with responsive images, like the picture tag and/or the srcset attribute. Of course, I can push every version of an image to the client, but that would be a traffic disaster, especially on mobile devices with limited traffic.
As far as I know, the browser gets a promise for each file push. The promise is used to interrupt that push, when the fileis already cached. I hope that this statement is correct.
Is there a way to tell the browser, that an image is just for a special screen size or pixel ratio?
Of course, I can push every version of an image to the client, but that would be a traffic disaster, especially on mobile devices with limited traffic.
Yes that would defeat the point of using different versions (which is primarily done as a bandwidth saving).
As far as I know, the browser gets a promise for each file push. The promise is used to interrupt that push, when the fileis already cached. I hope that this statement is correct.
Yes it is, however, if you are thinking you can make the browser cancel the request, then you need to realise that 1) the browsers will typically only do this for requests they already have in the cache and 2) cancelling takes time, by which point some (or perhaps even all) of the pushed resource may have been needlessly downloaded.
Is there a way to tell the browser, that an image is just for a special screen size or pixel ratio?
You don't push images to the screen, but to the browser cache, so the pushed resources will only be used if appropriate according to the page (e.g. the correct srcset value). However, as mentioned above, you don't want them to be needlessly pushed or you are wasting bandwidth.
The key to successfully using Server push is to be reasonably certain that the resources are needed - or you will actually cause a performance bottleneck. I would honestly suggest NOT pushing everything but only pushing the critical, render blocking, resources that will almost certainly be needed (CSS, JavaScript). Images are not typically render blocking so they is not usually a massive need to push them.
This could be handled with cookies. If no cookies are set, then it's likely a fresh session so push the critical CSS file and set a "cssLoaded" cookie. If a page is requested, and that cookie is set, then don't push the CSS file. I've blogged about a simple implementation of this in Apache here: https://www.tunetheweb.com/performance/http2/http2-push/. This could still lead to over pushing - if client didn't allow cookies for example - but for most users it would be fine.
You could extended this further, by having JavaScript set a cookie with the screen size and then for subsequent page loads, the server can read that cookie, know the screen size, and push the appropriately sized images. This won't help the initial page load, but would help other page loads if your visitor visits several pages on your site in same session. But honestly it sounds like overkill and I would just not push the images.