Can't get different sizes of the same image to output

Hi,

I'm trying to get a number of different image sizes generated from a single image upload to output on different templates but I'm only getting the master image outputting each time.

The code from my master template for the 4 image sizes is below:

<perch:content id="work-background-image" type="image" label="Work Background Image" help="This is the image shown on the work summary section for the case study" density="2" divider-before="Work Page Case Study Boxes" / >
<!-- Additional image sizes for different case study modules -->
<perch:content id="work-background-image" type="image" label="Work Background Image" width="600" height="400" density="2" crop="true" suppress="true" />
<perch:content id="work-background-image" type="image" label="Work Background Image" width="600" height="300" density="2" crop="true" suppress="true" />
<perch:content id="work-background-image" type="image" label="Work Background Image" width="600" height="800" density="2" crop="true" suppress="true" />

And I then have a few different templates that should use the different image sizes but are only outputting the master image:

Template 1:

<figure class="project thumb u-4-12 mp-12-12 ml-6-12" style="background:rgba(57, 1, 112,0.8);" data-filter="all design development support">
    <img src="<perch:content id="work-background-image" type="image" width="600" height="400" />" alt="{title}" width="100%">
    <figcaption>
        <div class="center">
            <div class="content">
                <h2><perch:content id="work-sub-title" /></h2>
                <h3><perch:content id="work-title" />   </h3>
                <p><perch:content id="work-summary" />  </p>
                <a class="button" href="/work/case-study/<perch:content id="url_postslug" type="slug" />">See project</a>
            </div>
        </div>
    </figcaption>
</figure>

Template 2

<figure class="project thumb u-4-12 mp-12-12 ml-8-12 t-8-12" style="background:rgba(236, 1, 140,0.8);" data-filter="all design strategy">
    <img src="<perch:content id="work-background-image" type="image" width="600" height="300" />" alt="{title}" />
    <figcaption>
        <div class="center">
            <div class="content">
                <h2><perch:content id="work-sub-title" /></h2>
                <h3><perch:content id="work-title" />   </h3>
                <p><perch:content id="work-summary" />  </p>
                <a class="button" href="/work/case-study/<perch:content id="url_postslug" type="slug" />">See project</a>
            </div>
        </div>
    </figcaption>
</figure>

So template 1 should output an image of 600x400 and template 2 should output an image of 600x300.

I can't see what I'm doing wrong. To test, I've edited the images that were generated by perch on upload and have added text to all of them denoting the image size. The only image that is output is the master / full size image in all instances.

Have I made an incorrect assumption about how to output the different image sizes??

Thanks,

Alex