Shopware 6 sectionBgImg背景图缩略图加载优化咨询

现有代码 #

{% block page_content_section %}<div class="cms-section {{ sectionClasses|join(' ') }}" style="{% if sectionBgColor %}background-color: {{ sectionBgColor }};{% endif %}{% if sectionBgImg %}background-image: url({{ sectionBgImg }});background-size: {{ section.backgroundMediaMode }};{% endif %}">

问题描述 #

当前区块背景图在移动端仍加载原图，无法利用Shopware的sw_thumbnails机制加载优化后的缩略图，导致页面性能损耗，需要实现背景图按设备尺寸加载对应缩略图。

优化方案 #

1. 基础方案：直接生成指定尺寸缩略图

Shopware Twig模板内置thumbnail过滤器，可直接对媒体对象生成预设尺寸的缩略图。

首先在Shopware后台设置 > 媒体 > 缩略图中创建适配移动端/桌面端的缩略图配置（比如命名为cms_bg_mobile和cms_bg_desktop，设置合适的宽高），然后修改模板代码：

{% block page_content_section %}
<div class="cms-section {{ sectionClasses|join(' ') }}" 
     style="{% if sectionBgColor %}background-color: {{ sectionBgColor }};{% endif %}
            {% if sectionBgImg %}
                background-image: url({{ sectionBgImg|thumbnail('cms_bg_desktop') }});
                background-size: {{ section.backgroundMediaMode }};
            {% endif %}">

2. 响应式方案：区分设备加载不同缩略图

如果需要针对移动端和桌面端加载不同尺寸的缩略图，推荐两种实现方式：

方式一：CSS媒体查询配合内联样式

修改模板代码，添加data属性存储移动端缩略图地址：

{% block page_content_section %}
<div class="cms-section {{ sectionClasses|join(' ') }}" 
     data-mobile-bg="{{ sectionBgImg|thumbnail('cms_bg_mobile') }}"
     style="{% if sectionBgColor %}background-color: {{ sectionBgColor }};{% endif %}
            {% if sectionBgImg %}
                background-image: url({{ sectionBgImg|thumbnail('cms_bg_desktop') }});
                background-size: {{ section.backgroundMediaMode }};
            {% endif %}">

在对应的CSS文件中添加媒体查询：

@media (max-width: 768px) {
    .cms-section[data-mobile-bg] {
        background-image: url(attr(data-mobile-bg)) !important;
    }
}

方式二：使用picture元素实现原生响应式（更推荐）

将背景图改为通过picture元素实现，利用source标签匹配不同设备加载对应缩略图，同时保证兼容性：

{% block page_content_section %}
<div class="cms-section {{ sectionClasses|join(' ') }}" 
     style="{% if sectionBgColor %}background-color: {{ sectionBgColor }};{% endif %}">
    {% if sectionBgImg %}
        <picture class="cms-section-bg">
            <source media="(max-width: 768px)" srcset="{{ sectionBgImg|thumbnail('cms_bg_mobile') }}">
            <source media="(min-width: 769px)" srcset="{{ sectionBgImg|thumbnail('cms_bg_desktop') }}">
            <img src="{{ sectionBgImg|thumbnail('cms_bg_desktop') }}" alt="" class="cms-section-bg-img">
        </picture>
    {% endif %}
    {# 保留原区块内容 #}
</div>
{% endblock %}

添加配套CSS：

.cms-section {
    position: relative;
    overflow: hidden;
}
.cms-section-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.cms-section-bg-img {
    width: 100%;
    height: 100%;
    object-fit: {{ section.backgroundMediaMode }};
}

3. 验证效果

修改完成后，上传新的区块背景图，Shopware会自动生成对应配置的缩略图。在浏览器开发者工具的网络面板中切换移动端模式，即可看到加载的是尺寸更小的缩略图，有效降低页面加载体积。

内容的提问来源于stack exchange，提问作者adversarius