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 %}

With any performance issue, the first step is to measure the current situation. Have you looked to see that images are really the culprit here? This looks like a good article: https://www.debugbear.com/blog/image-formats#how-to-test-if-images-are-slowing-down-your-website If image loading really is the problem, how are serving your images? from the file system or cloud storage? Have you optimized their sizes? We need a lot more detail of how you are handling your images before we can help beyond offering general advice. — cnk, Feb 13 '23 at 16:05
The images currently loads from the static folder i.e. file system (using the collectstatic --no-post-process for cloud server to store the static files in another folder) and I'm trying to cache first with filebased cache. But whenever I have to change a statically loaded image, I have to delete the cache despite implementing a save() to delete the cache. Note that I'm doing template fragmenting cache here. — Imthiaz Muhassin, Feb 14 '23 at 06:11
Update: I want to use CDN to store the static and the image uploads instead, and I was thinking of using Cloudinary. Any tutorials on how to implement it into our website and how to backup existing files in the system? @cnk — Imthiaz Muhassin, Feb 16 '23 at 04:51
Sorry, I don't know anything about Cloudinary. My only advice is make sure you have a plan for how to clear the cache if you get new static files, etc. such as when you make a new release — cnk, Feb 16 '23 at 23:56

score 0 · Answer 1 · answered Mar 23 '23 at 22:54

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.

score 0 · Answer 2 · answered Apr 26 '23 at 05:38

0

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

answered Apr 26 '23 at 05:38

Ihor

1
2

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

2 Answers2

Using resizing methods

Changing image format

Compressing images