Wagtail - 图像优化（如何处理静态和动态添加的图像文件？）

问题描述 投票：0回答：1

所以我想运行我的网站并尽快显示我的图像，并通过提供 {% static "path/to/image.jpg" %} 或渲染 wagtail 图像上传的图像标签来添加图像 { % image image_name original as img %}.目前，该站点已经因大量图像而显着变慢，尤其是图像的加载时间。通过 Wagtail 优化这些图像的任何可能选项？这会有很大的帮助。谢谢

通过静态标签加载图像的示例以及 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 %}
django wagtail image-optimization
1个回答
0
投票

Wagtail 中的图像优化是通过 image renditions 完成的，记录在 How to use images in templates in the official docs。以下是您可以做的具体事情：

使用调整大小的方法

这样一来，加载的图像尺寸仅与使用所需的尺寸一样大。 

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;">

这也可以对一张图片进行多次，以创建一个 

<picture>
元素或 
srcset
img 属性，具有一张图片的多种尺寸，因此浏览器会根据视口尺寸加载最佳效果。

改变图像格式

Wagtail 支持开箱即用的 WebP 转换。例如：

{% 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;">

压缩图片

对于 WebP 和 JPEG，还有 

jpegquality-70
和 
webpquality-70
过滤器，用于有损压缩。这是全局
WAGTAILIMAGES_JPEG_QUALITY
和
WAGTAILIMAGES_WEBP_QUALITY
Django设置的补充。

对于静态文件——

static
是 Django 本身的一部分，所以 Wagtail 中没有任何东西可以处理这些图像。如果图像不经常更改，最好的方法是使用尽可能最好的工具手动压缩它们（例如 Squoosh）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.