Использование Assetic для оптимизации изображений

Среди многочисленных фильтров Assetic есть 4 фильтра, которые могут оптимизировать изображения на лету. Это позволяет уменьшить размер файлов изображений без применение графических редакторов для каждого отдельного изображения. Результаты кешируются и могут быть сохранены для использования в production режиме без влияния на производительность для конечных пользователей.

Использование Jpegoptim

Jpegoptim - инструмент для оптимизации JPEG файлов. Перед использованием его в Assetic нужно убедиться в его наличии в системе.

Пример установки для Ubuntu:

$ sudo apt-get install jpegoptim

Далее нужно добавить в конфигурацию его расположение, используя bin параметр jpegoptim фильтра.

YAML

# app/config/config.yml
assetic:
    filters:
        jpegoptim:
            bin: path/to/jpegoptim

XML

<!-- app/config/config.xml -->
<assetic:config>
    <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim" />
</assetic:config>

PHP

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

Теперь его можно использовать в шаблоне:

Twig

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

PHP

<?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 фильтр удаляет лишь некоторые мета данные, сохраненные в изображении. Для удаления всех EXIF данных и комментарий нужно установить strip_all равным true:

YAML

# app/config/config.yml
assetic:
    filters:
        jpegoptim:
            bin: path/to/jpegoptim
            strip_all: true

XML

<!-- app/config/config.xml -->
<assetic:config>
    <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim"
            strip_all="true" />
</assetic:config>

PHP

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

Уменьшение максимального качества

По умолчанию jpegoptim фильтр не изменяет качество JPEG изображения. Использование параметра конфигурации max позволяет задать уровень качества (в процентах от 0 до 100). Уменьшение размера изображения происходит за счет качества:

YAML

# app/config/config.yml
assetic:
    filters:
        jpegoptim:
            bin: path/to/jpegoptim
            max: 70

XML

<!-- app/config/config.xml -->
<assetic:config>
   <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim"
            max="70" />
</assetic:config>

PHP

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

Короткий синтаксис: фунции Twig

При использовании Twig можно сократить объем кода, используя специальные функции Twig. Для этого нужно добавить конфигурацию:

YAML

# app/config/config.yml
assetic:
    filters:
        jpegoptim:
            bin: path/to/jpegoptim
    twig:
        functions:
            jpegoptim: ~

XML

<!-- app/config/config.xml -->
<assetic:config>
    <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim" />
    <assetic:twig>
        <assetic:twig_function
                name="jpegoptim" />
    </assetic:twig>
</assetic:config>

PHP

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

Теперь можно сделать изменения в шаблоне:

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

Вы также можете указать выходной каталог для изображений в файле Assetic конфигурации:

YAML

# app/config/config.yml
assetic:
    filters:
        jpegoptim:
            bin: path/to/jpegoptim
    twig:
        functions:
            jpegoptim: { output: images/*.jpg }

XML

<!-- app/config/config.xml -->
<assetic:config>
    <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim" />
    <assetic:twig>
        <assetic:twig_function
                name="jpegoptim"
                output="images/*.jpg" />
    </assetic:twig>
</assetic:config>

PHP

// 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'
             ),
         ),
     ),
));

Использование Jpegtran

Jpegtran — это командная утилита пакета libjpeg Она позволяет проводить манипуляции с JPEG файлами, но самой полезной ее функцией является оптимизация.

Для Linux эта утилита обычно есть в пакетах:

$ sudo apt-get install libjpeg-progs

Исходный код для линуксов, а также версию для Windows можно скачать тут. Описание установки под Mac есть тут.

YAML

# app/config/config.yml
assetic:
    filters:
        jpegtran:
            bin: path/to/jpegtran
            copy: none #убирает все метаданные из исходного файла
            optimize: true #оптимизирует изображение
            progressive: true #изменяет формат на jpg

Twig

{% image '@AppBundle/Resources/public/images/example.jpg'
    filter='jpegtran' output='/images/example.jpg' %}
    <img src="{{ asset_url }}" alt="Example"/>
{% endimage %}

Использование OptiPNG

OptiPNG — свободная программа для уменьшения размера файлов в формате Portable Network Graphics путём их сжатия различными методами с игнорированием ненужных для данного изображения функций PNG, таких как полноцветность для чёрно‐белого изображения. Также программа преобразует файлы других форматов (BMP, GIF, PNM и TIFF) в оптимизированный PNG.

Пример установки для Ubuntu:

$ sudo apt-get install optipng

YAML

# app/config/config.yml
assetic:
    filters:
        optipng:
            bin: path/to/optipng
            level: 3 #уровень оптимизации (0-7), по умолчанию: 2

Twig

{% image '@AppBundle/Resources/public/images/example.png'
    filter='optipng' output='/images/example.png' %}
    <img src="{{ asset_url }}" alt="Example"/>
{% endimage %}

Использование PNGOUT

PNGOUT — бесплатный оптимизатор PNG-изображений, разработанный Кеном Сильверманом. Работает в режиме командной строки. Программа применяет к изображениям сжатие без потерь, то есть качество изображения после сжатия точно такое же как и до сжатия.

Пример установки на Ubuntu 14.04 Server.

YAML

# app/config/config.yml
assetic:
    filters:
        pngout:
            bin: path/to/pngout
            color: #0,2,3,4,6
            filter: #0,1,2,3,4,5
            strategy: #0(default),1,2,3,4
            block_split_threshold: #Это значение используется специальный алгоритм сжатия, который использует PNGOUT. Значение по умолчанию, как правило, очень хорошо

Twig

{% image '@AppBundle/Resources/public/images/example.png'
    filter='pngout' output='/images/example.png' %}
    <img src="{{ asset_url }}" alt="Example"/>
{% endimage %}

Попробовать сжатие можно, перевключившись в prod окружение. Но прежде не забудьте очистить кеш и сделать дамп файлов:

$ php app/console cache:clear --env=prod --no-debug

$ php app/console assetic:dump --env=prod --no-debug

Не забудьте о сжатии JS/CSS файлов и проверке кода.

Теги: Google page speed, Css, Javascript, Images, Uglifyjs, Uglifycss, Jpegoptim, Optipng