Currently the same image is loaded regardless of screen width - and scaled in the browser AKA responsive images.
This is inefficient when the browser is narrow - wide images are not required.
We should load an image that is appropriate to the required width of the image..
We must add a set of image variations so that images of different sizes will be available.

I made a suggestion on implementation on branch MGNLDEMO-33-exp, based on the srcset attribute.
But, since then - based on consultation with developers and approaches learned in (https://jira.magnolia-cms.com/browse/MGNLDEMO-102) - the new recommendation is to use the lazySizes javascript library instead of the srcset attribute. The main reason is that it is easier to configure - you dont have to provide a "sizes" attribute.
(Info on srcset and sizes attributes: https://developer.mozilla.org/en/docs/Web/HTML/Element/img )

As lazysizes works on img tag - we probably need to replace the usage of background-image that we used to have images stretch nicely to fill their containers without distortion. A newish css value supports this behaviour in the image tag "object-fit: cover". A custom javascript helper is used (jquery.object-fit-cover-simple.js) to enable this feature on browsers that do not support this attribute.

Implementation Notes (for git branch MGNLDEMO-33-exp):
A collection of image variations is created to support this behaviour.
Unfortunatly, the srcset property requires explicit sizes to be declared in the html. For this reason I find it clearest to name the variations with their actual pixel sizes. ("small, medium, large" would just add obscurity in this use-case.)

The javascript resources should be added to the theme instead of directly to the main.ftl!

The carousel does not work with the object-fit property - therefore I recommend leaving it the way it is.

relatedTours.ftl should be updated to use this technique - probably very similar to the changes in tourTeaser.ftl