Twigの関数で画像の最適化にAsseticをどうやって使うか?¶
沢山のフィルタの中でAsseticはオンザフライでの画像の最適化に使えるフィルタを4つ持っています。 このフィルタを使うことでフォトレタッチソフトを使わなくても簡単に画像のサイズを最適化できます。 最適化された結果はキャッシュ、もしくは指定したディレクトリに保存することが出来るので プロダクション環境でのパフォーマンスに影響しません。
Jpegoptimを使う¶
Jpegoptim は JPEG ファイルの最適化の為のツールです. Asseticでこのフィルタを使うには 下記のような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
jpegoptimを使うには既にあなたの環境にjpegoptimがインストールされている 必要があります。 設定の bin にあなたの環境でjpegoptimがインストールされている 場所を指定してください。
これでテンプレートからjpegoptimを使うことが出来ます。
-
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; ?>
全てのEXIFデータを削除する¶
初期状態ではこのフィルタはいくつかのメタ情報だけを削除するようにしています。 それ以外のEXIFデータやコメントは削除されません。 strip_all optionを つけることで全てのEXIFデータを削除することが出来ます。
-
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', ), ), ));
最適化クオリティを下げる¶
初期設定ではJPEGの最適化レベルは変更されません。現在の画像の最適化レベルを 下げる事でファイルサイズを更に小さくすることが出来ます。しかしこれは 画像の見た目とのトレードオフとなってしまいます。
-
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 Functionのより短い書き方¶
もし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'), ), ), ));
この設定を使うことで下記のような書き方でAsseticを使えるようになります。
<img src="{{ jpegoptim('@AcmeFooBundle/Resources/public/images/example.jpg') }}"
alt="Example"/>
下記の設定をすることでキャッシュの生成ディレクトリを指定することもできます。
-
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' ), ), ), ));