Wagtail - Image Optimisation ( How to do it with static and dynamically added image files?)

Question

so I want to run my site with my images displayed as quickly as possible and the images are added either by giving the {% static "path/to/image.jpg" %} or by rendering the image tag for wagtail image uploads {% image image_name original as img %}. Currently, the site has considerably slowed down with lots of images, especially loading time for the images. Any possible options to optimise those images through Wagtail? It would be of great help. Thanks

An example with images loading by static tag as well as image tag in wagtail.

{% extends "base.html" %} {% load static wagtailcore_tags wagtailimages_tags %} {% block extra_css %}
<link rel="stylesheet" href="{% static 'css/technologies.css' %}"> {% endblock %} {% block nav_projects %} class="active" {% endblock %}{% block content %}
<div class="inner-page project-page">


    <div class="inner-hero" style="background-image: url(/static/images/banner_a/project_bg.png);background-attachment: fixed;">
        <div class="container-fluid inner-top-section mt-0 px-5">
            <div class="row flex-lg-row-reverse align-items-center g-5 py-5 p-4">
                <div class="col-10 col-sm-8 col-lg-6">
                </div>
                <div class="col-lg-6">
                    <h1 class="display-5 fw-bold lh-1 mb-3">{{self.header_title}}</h1>
                    <p class="lead">{{self.meta_content}}</p>
                    <!-- <div class="d-grid gap-2 d-md-flex justify-content-md-start">
                        <a href="#" class="btn-two"><span class="txt">Know more</span></a>
                    </div> -->
                </div>
            </div>
        </div>
    </div>

    {% if page.dblock_content %}
    <div class="d-block sub-hero position-relative" style="background-color: #4A4A4A">
        <div class="bg-set-wrp">
            <div class="left-bg-set">
                <img class="zoom-fade" src="{% static 'images/project-elm/elm-1.png' %}" alt="">
            </div>
            <div class="bottom-bg-set">
                <img class="zoom-fade" src="{% static 'images/project-elm/elm-4.png' %}" alt="">
            </div>
            <div class="right-bg-set">
                <img class="zoom-fade" src="{% static 'images/project-elm/elm-3.png' %}" alt="">
            </div>
            <div class="center-bg-set">
                <img class="zoom-fade" src="{% static 'images/project-elm/elm-3.png' %}" alt="">
            </div>
            <div class="top-bg-set">
                <img class="zoom-fade" src="{% static 'images/project-elm/elm-3.png' %}" alt="">
            </div>
            <div class="right-top-bg-set">
                <img class="zoom-fade" src="{% static 'images/project-elm/elm-2.png' %}" alt="">
            </div>
        </div>
        <div class="container px-4 py-5 position-relative" style="z-index: 11">
            <div class="row align-items-center" style="padding: 6rem 0;">
                <div class="col-lg-12 text-white">
                    <p class="lead1">
                        <span class="qte1">"</span> {% for block in page.dblock_content %} {% include_block block %} {% endfor %}
                        <span class="qte2">"</span>
                    </p>
                </div>
            </div>

        </div>
    </div>
    {% endif %}



    <div class="project-display px-5 project-box">
        {% if posts.paginator.num_pages > 1 %}
        <div class="d-flex justify-content-end blog-item">
            <nav aria-label="...">
                <ul class="pagination">
                    {% if posts.has_previous %}
                    <li class="page-item">
                        <a class="page-link" style="color: #000;" href="?page={{ posts.previous_page_number }}" tabindex="-1" aria-disabled="true">Previous</a>
                    </li>
                    {% endif %} {% for page_num in posts.paginator.page_range %}
                    <li class="page-item {% if page_num == posts.number %} active{% endif %}"><a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a></li>
                    {% endfor %} {% if posts.has_next %}
                    <li class="page-item">
                        <a href="?page={{ posts.next_page_number }}" class="page-link">
                    Next
                </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        <div class="container-fluid">

            {% endif %} {% for post in posts %}
            <div class="align-items-center pt-5 row {% if forloop.counter|divisibleby:2 %} flex-lg-row-reverse {% endif %}">
                <div class="col-10 col-lg-5 col-sm-8 m-0 popannime">
                    {% image post.project_image original as pr_img %}
                    <img src="{{pr_img.url}}" class="d-block mx-lg-auto img-fluid" alt="" width="700" height="500" loading="lazy" style="width: 290px;">
                </div>
                <div class="col-lg-7 m-0">
                    <h1 class="lh-2 mb-3">{{ post.project_list_title }} </h1>
                    <p class="lead">{{post.project_list_subtitle}} </p>
                    <div class="d-grid d-md-flex gap-2">

                        <a href="{{ post.url }}" class="btn btn-lg btn-outline-light knowmore-btn mb-5 p-0 position-relative me-4"><span class="txt">Know more</span><span class="arrow"></span></a>

                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% if posts.paginator.num_pages > 1 %}
        <div class="d-flex justify-content-end blog-item">
            <nav aria-label="...">
                <ul class="pagination">
                    {% if posts.has_previous %}
                    <li class="page-item">
                        <a class="page-link" style="color: #000;" href="?page={{ posts.previous_page_number }}" tabindex="-1" aria-disabled="true">Previous</a>
                    </li>
                    {% endif %} {% for page_num in posts.paginator.page_range %}
                    <li class="page-item {% if page_num == posts.number %} active{% endif %}"><a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a></li>
                    {% endfor %} {% if posts.has_next %}
                    <li class="page-item">
                        <a href="?page={{ posts.next_page_number }}" class="page-link">
                    Next
                </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>

</div>

{% endblock %}

Answer 1

Image optimisation in Wagtail is done via image renditions, documented on How to use images in templates in the official docs. Here are the specific things you can do that will help:

Using resizing methods

This is so the loaded image dimensions are only as big as they need to be for the usage. Example with width-290:

{% image post.project_image width-290 as pr_img %}
<img src="{{pr_img.url}}" class="d-block mx-lg-auto img-fluid" alt="" width="700" height="500" loading="lazy" style="width: 290px;">

This can also be done multiple times for one image, to create a <picture> element or srcset img attribute with multiple sizes of one image, so browsers load the best based on the viewport size.

Changing image format

Wagtail supports WebP conversion out of the box. For example:

{% image post.project_image format-webp as pr_img %}
<img src="{{pr_img.url}}" class="d-block mx-lg-auto img-fluid" alt="" width="700" height="500" loading="lazy" style="width: 290px;">

Compressing images

For WebP and JPEG, there is also jpegquality-70 and webpquality-70 filters, for lossy compression. This is in addition to global WAGTAILIMAGES_JPEG_QUALITY and WAGTAILIMAGES_WEBP_QUALITY Django settings.

---

For static files – static is part of Django itself, so there is nothing in Wagtail that will process those images. Your best route here is to compress them manually with the best tools possible (see for example Squoosh) if the images don’t change often.

Answer 2

The best solution which I've found was using cache for renditions.

You can find explanation and description in docs

https://docs.wagtail.org/en/stable/advanced_topics/performance.html#caching-image-renditions