Serve smaller images in ACF image loop - php

Question

I have a product overview page with 1 image per product:
https://axces.be/nl/product/
You can add multiple images to a products. All these images are shown on the detail page. But on the product page, you only see the first image.
My template looks like this:
<a href="<?php the_permalink(); ?>" class="single-prod">
<div class="single-prod__image">
<?php
$productImages = get_field('product_images');
?>
<img src="<?php echo $productImages[0]['product_image']?>" />
</div>
</a>
But now the images are served on the size they are uploaded. This causes a slower load time. So I want to serve smaller images.
I've tried to add the image size thumbnail to it, in order to see if the load time is better. But that doesn't work:
<a href="<?php the_permalink(); ?>" class="single-prod">
<div class="single-prod__image">
<?php
$image_size = 'thumbnail';
$productImages = get_field('product_images');
?>
<img src="<?php echo $productImages[0]['product_image']['sizes'][$image_size]; ?>" />
</div>
<div class="single-prod__information">
<span class="single-prod__name">
<?php the_title(); ?>
</span>
<span class="single-prod__short">
<?php the_field('product_short'); ?>
</span>
</div>
</a>
So eventually, I want to achieve that the images are smaller. Not necessary the to see the thumbnail because that's probably going to crop the image.
Thanks in advance.