How to decrease an image size when loading the page in Django backed web application?

Question

My classic Django application is a simple blog post website showing the posted images line on a start page.
I allow users to upload images to their posts up to 100 Mb to have the ability to download the image if someone likes it.
But I encountered a significant loading time on the start page due to image sizes.
I use CSS object-fit feature to make images small for good fitting on a common start page, but the image size in Mb doesn't change.
It is still downloading full-sized images and after just shaping them with CSS.
As a result, I have very slow page loading.
I used a standard model pattern in the Django backend: image = models.ImageField...and then just render it on a page template with post.image.url tag.
So I want the original-sized image loads if users click on the image only.
Please advise how to fix that.

Answer 1

First of all, I'd like to say that 100Mb for an image is really a lot. It maybe the data needed for uncompressed high resolution images, but even a small amount of compression would help with the size.

You could simply decrease the limit of image size to force users to use more compressed/smaller images, but other than that you also need to compress images yourself and serve this compressed copy if you want to show them not in full quality on your page. (Download button would then serve the full quality version) For that I'll refer you to another question: How to reduce the image file size using PIL