Merge pull request #31 from Xpirix/optimize_images

Optimize images size and use webp format

Author: Xpirix

django_project/changes/templates/entry/includes/entry_detail.html

@@ -63,22 +63,22 @@ <h3><span>Feature:</span> {{ entry.title }}</h3>
                     <img id="{{ entry.image_file.url }}" class="image"
                          data-gifffer="{{ entry.image_file.url }}"
                          src="{{ entry.image_file.url }}"
-                         gifffer-alt=""/>
+                         gifffer-alt="" loading="lazy"/>
                     <a href="#" class="pop-gif">
                         Click here for bigger size animation.
                     </a>
                 {% else %}
                     <a href="{{ entry.image_file.url }}">
                         <img class="image"
-                             src="{{ entry.image_file.url }}"
-                             alt=""/>
+                            src="{{ entry.image_file.url }}"
+                            alt="" loading="lazy"/>
                     </a>
                 {% endif %}
             {% else %}
                 <a href="#" class="pop-image">
-                    <img id="{{ entry.image_file.url }}" class="image"
-                         src="{{ entry.image_file.url }}"
-                         alt=""/>
+                    {% thumbnail entry.image_file "1000x500" crop="center" format="WEBP" as im %}
+                        <img id="{{ entry.image_file.url }}" class="image is-rounded" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="Version image" loading="lazy">
+                    {% endthumbnail %}
                 </a>
             {% endif %}
         </div>

django_project/changes/templates/layouts/page-title.html

@@ -9,7 +9,7 @@
                     <div class="is-flex" style="gap: 1rem;">
                         <div class="label">Free and Open Source</div>
                         <a class="badge-image" href="https://blog.qgis.org/2025/02/08/qgis-recognized-as-digital-public-good/" target="_blank">
-                            <img src="{% static "images/badges/dpg-badge.png" %}">
+                            <img src="{% static "images/badges/dpg-badge.png" %}" loading="lazy">
                         </a>
                     </div>
                     <h1 class="title hero-title pr-3">
@@ -23,7 +23,7 @@ <h1 class="title hero-title pr-3">
             </div>
             <div class="logo column is-justify-content-center">
                 <figure class="image">
-                    <img src="{% static "images/large-logo.svg" %}">
+                    <img src="{% static "images/large-logo.svg" %}" loading="lazy">
                 </figure>
             </div>
         </div>

django_project/changes/templates/version/detail-content.html

@@ -11,9 +11,10 @@ <h1>
 <div class="columns">
     <div class="column">
         {% if not rst_download %}
-            <a href="{{ version.image_file.url }}">
-                <img class="image is-rounded"
-                    src="{{ version.image_file.url }}"/>
+        <a href="{{ version.image_file.url }}">
+                {% thumbnail version.image_file "1000x500" crop="center" format="WEBP" as im %}
+                    <img class="image is-rounded" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="Version image" loading="lazy">
+                {% endthumbnail %}
             </a>
         {% else %}
             <img class="image is-rounded"

django_project/changes/templates/version/includes/version-list-rich-item.html

@@ -36,7 +36,7 @@ <h3 name="titlePreview">
 
     <div class="rich-right" name="imagePreview">
         {% thumbnail version.image_file "400x200" crop="center" as im %}
-            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="Version image" style="border-radius:10px;">
+            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="Version image" style="border-radius:10px;" loading="lazy">
         {% endthumbnail %}
     </div>
 </div>