CleanSlate: Randomize the hero image and generate variables for different sizes based on a label:

_random-image-loop--different-sizes.html

<r:comment><!-- Randomize the hero image and generate variables for different sizes based on a label: --></r:comment>
<r:files:each labels="random-image-collection" limit="1" types="image" random="true">
  <r:set_var name="image_small"><r:file:image_url size="500x400" /></r:set_var>
  <r:set_var name="image_large"><r:file:image_url size="1000x800" /></r:set_var>
</r:files:each>

<style>
  .wvu-hero {
    background-image: url(<r:var name="image_small" />);
  } /* /.wvu-hero */
  @media (min-width: 501px) {
    .wvu-hero {
      background-image: url(<r:var name="image_large" />);
    } /* /.wvu-hero */
  } /* /mq */
</style>