How to serve thumbnail image instead of full image on the articles listing page in Django?

I made a django powered website here it is https://www.endustri.io When you look the frontpage i serve the blog post feautered image in original size. And it causes the increase loading time. So i wanna serve 300x180 pixels the featured images of the posts. How can i make automatically 300x180 pixels images from my original images and how can i serve these images on the frontpage. When i looked the media file, i wanna see two images, one of is original and other image is 300x180 pixels.

enter image description here

Here is my codes... views.py

def frontpage(request):
    posts = Post.objects.order_by('-id')
    most = Post.objects.order_by('-num_reads')[:10]
    kat = Category.objects.all()
    f = Firma.objects.all().order_by('-id')[:15]
    p = Paginator(posts, 10)
    page = request.GET.get('page')
    sayfalar = p.get_page(page)

    context = {
        'posts': posts,
        'most': most,
        'kat': kat,
        'sayfalar': sayfalar,  
        'f': f,
        
    }

    return render(request, 'blog/frontpage.html', context)

models.py

class Post(models.Model):
    category = models.ForeignKey(Category, related_name="posts", on_delete=models.CASCADE)
    title = models.CharField(max_length=300)
    slug = models.SlugField(max_length=300)
    intro = models.TextField()
    body = tinymce_models.HTMLField()
    description = models.TextField()
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    featured_photo = models.ImageField(null=True, blank=True, upload_to="blog/")
    date_added = models.DateTimeField(auto_now_add=True)
    num_reads = models.PositiveIntegerField(default=0)

    def __str__(self):
        return str(self.title)

    def get_absolute_url(self):
        return reverse('detail', args=[str(self.slug)])

and frontpage.html

{% for post in sayfalar %}
    <div class="card mb-3" style="max-width: 75%px;">
        <div class="row g-0">
          <div class="col-md-4">
            <img src="{{ post.featured_photo.url }}" width="300" height="180"  alt="...">
          </div>
          <div class="col-md-8">
            <div class="card-body">
                 
              <h5 class="card-title">{{ post.title }}</h5>
              <p class="card-text">{{ post.intro |safe  }}</p>
            
              </br></br>
              
            <small class="text-muted">Yazar: {{ post.author.first_name }} {{ post.author.last_name }} - Kategori: {{ post.category }} - Okunma: {{ post.num_reads}} </small><a href="{% url 'detail' post.slug %}" class="btn btn-primary float-end">Devam覺</a>
            </div>
          </div>
        </div>
    </div>
    {% endfor %}
Back to Top