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

3.4 版本
维护中的版本

从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 选项来配置最大质量设定 (可以是 0100 区间中的某个值)。图片尺寸的缩减自然要牺牲其质量:

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 发表评论或留下问题(我们会尽量回复)