Documentação do Symfony - versão 3.4
Renderizada do repositório symfony-docs-pt-BR no Github

Como usar o Assetic para otimização de imagem com funções do Twig

Dentre os seus vários filtros, o Assetic possui quatro que podem ser utilizados para a otimização de imagens on-the-fly. Isso permite obter os benefícios de tamanhos menores dos arquivos sem ter que usar um editor de imagens para processar cada imagem. Os resultados são armazenados em cache e pode ser feito o dump para produção de modo que não há impacto no desempenho para seus usuários finais.

Usando o jpegoptim

Jpegoptim é um utilitário para otimizar arquivos JPEG. Para usá-lo com o Assetic, adicione o seguinte na configuração do Assetic:

  • YAML
    1
    2
    3
    4
    5
    # app/config/config.yml
    assetic:
        filters:
            jpegoptim:
                bin: path/to/jpegoptim
    
  • XML
    1
    2
    3
    4
    5
    6
    <!-- app/config/config.xml -->
    <assetic:config>
        <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim" />
    </assetic:config>
    
  • PHP
    1
    2
    3
    4
    5
    6
    7
    8
    // app/config/config.php
    $container->loadFromExtension('assetic', array(
        'filters' => array(
            'jpegoptim' => array(
                'bin' => 'path/to/jpegoptim',
            ),
        ),
    ));
    

Note

Observe que, para usar o jpegoptim, você deve instalá-lo em seu sistema. A opção bin aponta para a localização do binário compilado.

Ele agora pode ser usado em um template:

  • Twig
    1
    2
    3
    4
    5
    {% image '@AcmeFooBundle/Resources/public/images/example.jpg'
        filter='jpegoptim' output='/images/example.jpg'
    %}
    <img src="{{ asset_url }}" alt="Example"/>
    {% endimage %}
    
  • PHP
    1
    2
    3
    4
    5
    <?php foreach ($view['assetic']->images(
        array('@AcmeFooBundle/Resources/public/images/example.jpg'),
        array('jpegoptim')) as $url): ?>
    <img src="<?php echo $view->escape($url) ?>" alt="Example"/>
    <?php endforeach; ?>
    

Removendo todos os dados EXIF

Por padrão, a execução desse filtro remove apenas algumas das informações meta armazenadas no arquivo. Os dados EXIF ​​e comentários não são removidos, mas você pode removê-los usando a opção strip_all:

  • YAML
    1
    2
    3
    4
    5
    6
    # app/config/config.yml
    assetic:
        filters:
            jpegoptim:
                bin: path/to/jpegoptim
                strip_all: true
    
  • XML
    1
    2
    3
    4
    5
    6
    7
    <!-- app/config/config.xml -->
    <assetic:config>
        <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim"
            strip_all="true" />
    </assetic:config>
    
  • PHP
    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',
            ),
        ),
    ));
    

Diminuindo a qualidade máxima

Por padrão, o nível de qualidade do JPEG não é afetado. Você pode ganhar reduções adicionais no tamanho dos arquivos ao ajustar a configuração de qualidade máxima para um valor inferior ao nível atual das imagens. Isto irá, claro, custar a qualidade de imagem:

  • YAML
    1
    2
    3
    4
    5
    6
    # app/config/config.yml
    assetic:
        filters:
            jpegoptim:
                bin: path/to/jpegoptim
                max: 70
    
  • XML
    1
    2
    3
    4
    5
    6
    7
    <!-- app/config/config.xml -->
    <assetic:config>
        <assetic:filter
            name="jpegoptim"
            bin="path/to/jpegoptim"
            max="70" />
    </assetic:config>
    
  • PHP
    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',
            ),
        ),
    ));
    

Sintaxe curta: Função Twig

Se você estiver usando o Twig, é possível conseguir tudo isso com uma sintaxe curta, ao habilitar e usar uma função especial do Twig. Comece adicionando a seguinte configuração:

  • YAML
    1
    2
    3
    4
    5
    6
    7
    8
    # app/config/config.yml
    assetic:
        filters:
            jpegoptim:
                bin: path/to/jpegoptim
        twig:
            functions:
                jpegoptim: ~
    
  • XML
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    <!-- 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
     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'),
            ),
        ),
    ));
    

O template Twig pode agora ser alterado para o seguinte:

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

Você pode especificar o diretório de saída na configuração da seguinte forma:

  • YAML
    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 }
    
  • XML
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    <!-- 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
     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'
                ),
            ),
        ),
    ));