Image Processing/Serving to improve page speed

Using Django
1

Hi All

I am building a site that has a piece of functionality that is pulling images from the Instagram API and they are being flagged up as the main issue in pagespeed insights.

The site is here:
http://demo.emmawedgwoodaesthetics.co.uk/

and the problematic page speed is here

image
image1512×600 112 KB

If I hover on one of the images in devtools it shows me this:

image
image770×504 72.1 KB

Okay so my understanding is that the files size is too big and I need to serve a smaller file. Facebooks/Instagram Documentation is super bad and I cant find a way there to ask for a smaller image.

My template has this:

            <div class="carousel ml-10p" x-ref="carousel">
              {% for post in instafeed%}
              <div class="w-3/5 h-10v pr-5 "><img class="rounded-3xl shadow-xl w-40 h-40 " src="{{ post.media_url}}" alt=""></div>
              {% endfor %}
            </div>

The w-40 h-40 are what is rendering the 160x160.

So how do I solve this problem?

I am thinking I need to use an image processing third party package? Do I need to?
I am thinking the minimum requirement is take a set of image_urls from instagram(1440 x 1440) convert them to smaller images on the server and then serve those in the view.

I have been looking at sorl-thumbnail, django-imagekit and easy-thumbnails and they all look neck and neck. What would people recommend if I went down this route?

I am also using wagtail in this project and they have and image tag that may be useful but only seems to apply to images in a page model. I haven’t ruled out a solution there.

Is there something that I don’t know about that could help me solve my problem?

Thanks
Chris

2

I think resizing makes a lot of sense, since the original size is almost 10x of what is rendered. Keep in mind that device’s DPI also matters. I think you ideally need at least 3x so the images appear crisp on a iPhones.

You can also experiment with the loading="lazy" on the img which tells the browser to load the image only when it gets visible. If you use this, set width and height on the img elements to prevent “jumping” of content as it gets loaded

3

I’ve used both sorl and django-imagekit. I preferred imagekit for a long time, but sorl seems to have a bit more attention these days in regards to maintenance, so I’d advocate for sorl.