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'
                ),
            ),
        ),
    ));
    
Bifúrcame en GitHub