Cómo utilizar Assetic para optimizar imágenes con funciones Twig

Entre sus muchos filtros, Assetic tiene cuatro filtros que puedes utilizar para optimizar imágenes al vuelo. Esto te permite obtener el beneficio de archivos de menor tamaño sin tener que usar un editor de imágenes para procesar cada imagen. Los resultados se almacenan en caché y se puede vaciar en producción para que no haya impacto en el rendimiento para los usuarios finales.

Usando Jpegoptim

Jpegoptim es una utilidad para la optimización de archivos JPEG. Para usarlo con Assetic, añade lo siguiente a la configuración de Assetic:

• YAML

  # app/config/config.yml
  assetic:
      filters:
          jpegoptim:
              bin: ruta/a/jpegoptim
  

• XML

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

• PHP

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

Nota

Ten en cuenta que al usar jpegoptim, ya lo debes tener instalado en tu sistema. La opción bin apunta a la ubicación de los binarios compilados.

Ahora lo puedes utilizar desde una plantilla:

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

Eliminando todos los datos EXIF

De manera predeterminada, al ejecutar este filtro sólo eliminas parte de la metainformación almacenada en el archivo. Todos los datos EXIF ​​y comentarios no se eliminan, pero los puedes quitar usando la opción strip_all:

• YAML

  # app/config/config.yml
  assetic:
      filters:
          jpegoptim:
              bin: ruta/a/jpegoptim
              strip_all: true
  

• XML

  <!-- app/config/config.xml -->
  <assetic:config>
      <assetic:filter
          name="jpegoptim"
          bin="ruta/a/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',
          ),
      ),
  ));
  

Reduciendo la calidad máxima

El nivel de calidad del JPEG de manera predeterminada no se ve afectado. Puedes obtener mayor reducción de tamaño del archivo estableciendo la configuración de calidad máxima más baja que el nivel actual de las imágenes. Esto, por supuesto, a expensas de la calidad de la imagen:

• YAML

  # app/config/config.yml
  assetic:
      filters:
          jpegoptim:
              bin: ruta/a/jpegoptim
              max: 70
  

• XML

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

• PHP

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

Sintaxis corta: Función Twig

Si estás utilizando Twig, es posible lograr todo esto con una sintaxis más corta habilitando y utilizando una función especial de Twig. Comienza por agregar la siguiente configuración:

• YAML

  # app/config/config.yml
  assetic:
      filters:
          jpegoptim:
              bin: ruta/a/jpegoptim
      twig:
          functions:
              jpegoptim: ~
  

• XML

  <!-- app/config/config.xml -->
  <assetic:config>
      <assetic:filter
          name="jpegoptim"
          bin="ruta/a/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' => 'ruta/a/jpegoptim',
          ),
      ),
      'twig' => array(
          'functions' => array('jpegoptim'),
          ),
      ),
  ));
  

Ahora,puedes cambiar la plantilla Twig a lo siguiente:

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

Puedes especificar el directorio de salida en la configuración de la siguiente manera:

• YAML

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

• XML

  <!-- app/config/config.xml -->
  <assetic:config>
      <assetic:filter
          name="jpegoptim"
          bin="ruta/a/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' => 'ruta/a/jpegoptim',
          ),
      ),
      'twig' => array(
          'functions' => array(
              'jpegoptim' => array(
                  output => 'images/*.jpg'
              ),
          ),
      ),
  ));