Как обслуживать уменьшенное изображение вместо полного изображения на странице листинга статей в Django?

Я сделал сайт на django вот он https://www.endustri.io. Когда вы смотрите на frontpage, я подаю изображение с изображением блога в оригинальном размере. И это приводит к увеличению времени загрузки. Поэтому я хочу использовать 300x180 пикселей для изображений постов. Как я могу автоматически сделать изображения размером 300x180 пикселей из моих оригинальных изображений и как я могу обслуживать эти изображения на главной странице. Когда я смотрю медиа файл, я хочу видеть два изображения, одно из которых оригинальное, а другое - 300x180 пикселей.

enter image description here

Вот мои коды... 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)])

и 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 %}
Вернуться на верх