Images in Nav Groups via page attributes not cropping or scaling.

Hi, I've got a site set up where the clients can create pages for their courses and whenever a new course group is added they can select an image and the the image and link is outputted on the homepage via a nav group.

I've got this set up via an attributes template (default.html)

<perch:template path="pages/attributes/seo.html" />

<perch:pages type="image" id="thumb" label="Image" width="250" height="190" crop="true" suppress="true" divider-before="Thumbnail Content & Styling"/>
<perch:pages id="link-colour" type="select" label="Homepage Link Colour" textile="true" editor="markitup" required="true" options="blue, green, orange, red, blue2, green2" suppress="true"/>

And my nav group template

<perch:before>
<ul class="courses">
</perch:before>
            <li><a href="<perch:pages id="pagePath"/>"><img src="<perch:pages id="thumb" width="250" height="190" type="image"/>"</a>
            <a href="<perch:pages id="pagePath"/>" class="link <perch:pages id="link-colour"/>"><perch:pages id="pageNavText" /></a>
            </li>
<perch:after>
        </ul>
</perch:after>

And here is the <php> I'm using to display the nav group on the homepage

            <?php perch_pages_navigation(
    array(
        'navgroup' => 'courses',
        'template' => 'home-courses.html',
        'from-path' => '/'
    )); ?>

As you'll see, I've got the image set to 250x190 and Perch scales down the image and adds it to the database and assets... but it defaults to using the original, uncropped and unscaled image instead... this is causing a very slow page load as it drags in 8 images at over 1000px wide each.

How can I get it use the scaled image instead of the original?

All answers appreciated