Let me try to clarify a couple of things here:
There are in total two (web spoken) and three (Freeway spoken) methods to apply images in Freeway:
The “graphic” item. This is producing an Tag with fixed width and height.
The “pass-through” option. This is producing an Tag as well but with flexible width (100%) and an automatic height.
Both methods are creating a code string with inline attributes (which is normal in this case). So you can’t simply change this reference to this resource, neither by adding additional stuff in the @media by hand nor in Freeway itself. And even if you could, it won’t be very effective cause it would download ALL image alternatives - so no bandwidth win situation.
Applying an image as background-image to a DIV (HTML item). This is CSS, so the image is applied via css property.
The downside on this method:
You have to apply an extra property which is
This is forcing the browser to “fit” the image into its parent (the best he can) and may end in “different picture details” (depending on browser window width).
Such as full-background proportional action does.
But - and that’s what Walter referred to enables you to change the background-image on each breakpoint in order to serve smaller images on smaller devices.
But you need to adjust this by hand, cause it is not supported by Freeway natively.
The example is based on jQuery and uses picturefill.min.js, furthermore the srcset attribute.
And naturally it requires “different” resources for different situations.
I don’t want to go in detail here but that’s the result:
The trick here is, that a device is initially only loading its assigned resource.
I have to admit that I haven’t understood all of it so here is the related article:
I’m not aware if an action could do this job.
freewaytalk mailing list
Update your subscriptions at: