MGNLDEMO-101 should be considered or completed first.

By "Ad-hoc" images - I mean images that a user can add anywhere (not those "managed" in specific tour components). When a user places a textimage or teaser - in this responsive layout - ideally the site should not always load the same variation of an image. It should load an image with roughly the size that the element takes on the page.

This can be achieved using the srcSet attribute of the image tag - as is done for the tour images (see related ticket) But this is configuration intensive - and better suited to situations where we know the actual likely sizes.

For the ad-hoc images I recommend a lighter approach based on the "lazySizes" javascript library. (https://github.com/aFarkas/lazysizes )
The key benefit is that no-one has to configure which size of image should be used based on browser-width as one must do with the srcSet attribute. The library uses the actual size of the element on the page - you must only specify the URL's of the images to use at different sizes of that image.
The benefit of "lazySizes" over the popular "Imager.js" is that it falls back gracefully where no javascript is available.

Notes:

See working example of proposed implementation on branch MGNLDEMO-102-ex.
Create image variations for typical bootstrap widths, 1920, 1366, 960, 480, 320, 240. (variations should not define heights)
Add the lazySizes.min.js to the theme.
Add the polyfill for srcSet attribute, respimage.min.js to the theme.
Create a new ftl include based on mte's image.ftl, maybe called imageResponsive.ftl in travel-demo module. Which contains methods to easily generate the lazySizes syntax (lazyload css class, data-sizes="auto" attribute, data-srcset attribute.
Use the 240 variation as the src of the image tag. So this image will be loaded first when the page loads, but then when the image is scrolled into view, then the proper sized image will be loaded and displayed.

An important improvement over what is on the branch for non-javascript AND ie8:
Is to follow the "noscript pattern" mentioned on this page: https://github.com/aFarkas/lazysizes with a large image for the noscript case.
If using this pattern, than the img tag with the lazysizes markup no longer requires a src attribute. Which is an improvement because we only load one image per img tag.