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

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

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

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

• PHP

  <?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

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

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

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

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

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

O template Twig pode agora ser alterado para o seguinte:

<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

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