SymfonyChinaSF中国 SFC
4.2翻译中 Symfony 4.2版技术博客翻译中 本月内将对Symfony 4.2技术博客翻译完毕
注册/登录
  1. Home
  2. 中文文档
  3. 资源
  4. 如何配合Twig函数使用Assetic来对图片进行优化

如何配合Twig函数使用Assetic来对图片进行优化

3.4 版本
维护中的版本
4.2 master 2.8 LTS

从Symfony 2.8开始，Assetic已不再是Symofny标准版框架的自带内容。参考这篇文章以了解如何在你的程序中安装和开启Assetic。

在诸多调节器中，Assetic有四个可以用于“一步到位”图片优化的。这可令你得益于更小的图片尺寸，却毋须使用图片编辑器逐图编辑。（图片的处理）结果还可以缓存住，并且能为生产环境剥离出它们，以便对末级用户来说“全无性能损失”。

使用Jpegoptim 

Jpegoptim 是一个优化JPEG文件的工具。要和Assetic一起使用，确保它已经安装在你的系统上，然后，使用 jpegoptim 调节器的 bin 选项来配置它的位置:

1
2
3
4
5

# app/config/config.yml
assetic:
    filters:
        jpegoptim:
            bin: path/to/jpegoptim
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- app/config/config.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:assetic="http://symfony.com/schema/dic/assetic"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://symfony.com/schema/dic/services
        http://symfony.com/schema/dic/services/services-1.0.xsd
        http://symfony.com/schema/dic/assetic
        http://symfony.com/schema/dic/assetic/assetic-1.0.xsd">
 
    <assetic:config>
        <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim" />
    </assetic:config>
</container>
1
2
3
4
5
6
7
8

// app/config/config.php
$container->loadFromExtension('assetic', array(
    'filters' => array(
        'jpegoptim' => array(
            'bin' => 'path/to/jpegoptim',
        ),
    ),
));

现在它可以在模板中使用了：

1
2
3
4

{% image '@AppBundle/Resources/public/images/example.jpg'
    filter='jpegoptim' output='/images/example.jpg' %}
    <img src="{{ asset_url }}" alt="Example"/>
{% endimage %}
1
2
3
4
5
6

<?php foreach ($view['assetic']->image(
    array('@AppBundle/Resources/public/images/example.jpg'),
    array('jpegoptim')
) as $url): ?>
    <img src="<?php echo $view->escape($url) ?>" alt="Example"/>
<?php endforeach ?>

删除全部Exif信息 

默认时，jpegoptim 调节器会删除图片中的一些元数据（meta data）。要删除全部EXIF信息和注释，设置 strip_all 选项为 true:

1
2
3
4
5
6

# app/config/config.yml
assetic:
    filters:
        jpegoptim:
            bin: path/to/jpegoptim
            strip_all: true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!-- app/config/config.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:assetic="http://symfony.com/schema/dic/assetic"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://symfony.com/schema/dic/services
        http://symfony.com/schema/dic/services/services-1.0.xsd
        http://symfony.com/schema/dic/assetic
        http://symfony.com/schema/dic/assetic/assetic-1.0.xsd">
 
    <assetic:config>
        <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim"
            strip_all="true" />
    </assetic:config>
</container>
1
2
3
4
5
6
7
8
9

// app/config/config.php
$container->loadFromExtension('assetic', array(
    'filters' => array(
        'jpegoptim' => array(
            'bin'       => 'path/to/jpegoptim',
            'strip_all' => 'true',
        ),
    ),
));

缩减最高质量 

默认时，jpegoptim 调节器不改变JPEG图片的质量等级。使用 max 选项来配置最大质量设定 (可以是 0 到 100 区间中的某个值)。图片尺寸的缩减自然要牺牲其质量:

1
2
3
4
5
6

# app/config/config.yml
assetic:
    filters:
        jpegoptim:
            bin: path/to/jpegoptim
            max: 70
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!-- app/config/config.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:assetic="http://symfony.com/schema/dic/assetic"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://symfony.com/schema/dic/services
        http://symfony.com/schema/dic/services/services-1.0.xsd
        http://symfony.com/schema/dic/assetic
        http://symfony.com/schema/dic/assetic/assetic-1.0.xsd">
 
    <assetic:config>
        <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim"
            max="70" />
    </assetic:config>
</container>
1
2
3
4
5
6
7
8
9

// app/config/config.php
$container->loadFromExtension('assetic', array(
    'filters' => array(
        'jpegoptim' => array(
            'bin' => 'path/to/jpegoptim',
            'max' => '70',
        ),
    ),
));

简化语法：Twig函数 

如果你使用Twig，可以通过开启和使用一个特殊的Twig函数以一个简化语法来实现上述全部。先添加下列配置：

1
2
3
4
5
6
7
8

# app/config/config.yml
assetic:
    filters:
        jpegoptim:
            bin: path/to/jpegoptim
    twig:
        functions:
            jpegoptim: ~
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!-- app/config/config.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:assetic="http://symfony.com/schema/dic/assetic"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://symfony.com/schema/dic/services
        http://symfony.com/schema/dic/services/services-1.0.xsd
        http://symfony.com/schema/dic/assetic
        http://symfony.com/schema/dic/assetic/assetic-1.0.xsd">
 
    <assetic:config>
        <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim" />
        <assetic:twig>
            <assetic:twig_function
                name="jpegoptim" />
        </assetic:twig>
    </assetic:config>
</container>
1
2
3
4
5
6
7
8
9
10
11
12

// app/config/config.php
$container->loadFromExtension('assetic', array(
    'filters' => array(
        'jpegoptim' => array(
            'bin' => 'path/to/jpegoptim',
        ),
    ),
    'twig' => array(
        'functions' => array('jpegoptim'),
        ),
    ),
));

Twig模板现在可以改为下面这样：

1

<img src="{{ jpegoptim('@AppBundle/Resources/public/images/example.jpg') }}" alt="Example"/>

你也可以在Assetic配置文件中指定图片的输出目录：

1
2
3
4
5
6
7
8

# app/config/config.yml
assetic:
    filters:
        jpegoptim:
            bin: path/to/jpegoptim
    twig:
        functions:
            jpegoptim: { output: images/*.jpg }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- app/config/config.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:assetic="http://symfony.com/schema/dic/assetic"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://symfony.com/schema/dic/services
        http://symfony.com/schema/dic/services/services-1.0.xsd
        http://symfony.com/schema/dic/assetic
        http://symfony.com/schema/dic/assetic/assetic-1.0.xsd">
 
    <assetic:config>
        <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim" />
        <assetic:twig>
            <assetic:twig_function
                name="jpegoptim"
                output="images/*.jpg" />
        </assetic:twig>
    </assetic:config>
</container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// app/config/config.php
$container->loadFromExtension('assetic', array(
    'filters' => array(
        'jpegoptim' => array(
            'bin' => 'path/to/jpegoptim',
        ),
    ),
    'twig' => array(
        'functions' => array(
            'jpegoptim' => array(
                output => 'images/*.jpg'
            ),
        ),
    ),
));

上传图片时，使用 LiipImagineBundle 社区bundle，你可以压缩和操作它们。

本文，包括例程代码在内，采用的是 Creative Commons BY-SA 3.0 创作共用授权。

登录symfonychina 发表评论或留下问题（我们会尽量回复）