画像がない場合にNoImage画像に切替えたい場合がたまにありますが、
サーバ側で行うべきか？プログラム側で行うべきか？プログラムを使う場合もphp？Javascript？といった様々な方法があり、悩ましいことがあります。

そこで、今回nginxを使った画像切替を実装してみて、
他の方法との違いを比べてみたいと思います。

Nginxでの実装方法

nginxに「try_filesディレクティブ」というものがありますので、こちらを使ってみたいと思います。

try_filesディレクティブ

server {
    (略)
    location /img/ {
        try_files $uri /img/noimage.jpg;
    }
}

これで、画像がないときには、/img/noimage.jpg
に転送されて、noimage.jpgが表示されていることが確認できました。

次は画像がないときにステータスコードを404で返す記述です。

server {
    (略)
    location /img/ {
        try_files $uri =404;
    }
}

ステータスコード404で返されているのが確認できました。

今回nginxを使ってno image画像に切替える処理を行いましたが、
プログラムで実装するより遥かに簡単に実装できる印象です。

実際にパフォーマンスはどうなんでしょうか？
abコマンドを使って、試してみたいと思います。

比較材料として、php方式とjavascript方式を用意して比較してみます。

php

<p>
<?php for($i=0; $i<=100; $i++): ?>
    <img src="<?php echo chengeImage(); ?>" />
<?php endfor; ?>
</p>

<?php
/**
 * 画像切替
 */
function chengeImage() {
    $targetImg = dirname(__FILE__) . '/img/hoge.jpg';
    if (file_exists($targetImg)) {
        return '/img/hoge.jpg';
    } else {
        return '/img/noimage.jpg';
    }
}
?>

javascript

<p>
<?php for($i=0; $i<=100; $i++): ?>
    <img src="hoge.jpg" onerror="this.src='/img/noimage.jpg';" />
<?php endfor; ?>
</p>

nginx

<p>
<?php for($i=0; $i<=100; $i++): ?>
    <img src="/img/hoge.jpg" />
<?php endfor; ?>
</p>

これらを用意して、abコマンドでベンチマークしてみます。

負荷が低い場合

$ ab -n 1000 -c 100 http://www.example.jp/

Requests per second

ほとんど違いはありませんでした。

Javascript方式は画像の切替はブラウザに渡ってから行うため、
abコマンドでのベンチマーク時点では切替処理を行っておりません。
このベンチーマークの段階ではHTMLを出力しているだけですので、当然早くなります。

負荷を高くした場合

$ ab -n 1000 -c 200 http://www.example.jp/

Requests per second

Failed requests(リクエストが失敗した回数)の平均値

php方式では処理が追い付かずエラーが出始めました。
nginxもHTMLを出力しているだけのJavascript方式にはやや劣りますが、そこそこいい勝負をしています。
負荷にも強そうです。

nginxでNoImage画像切替処理を行うと実装も簡単で、パフォーマンスもそこそこよさそうです。

選択肢の一つとして、参考になればと思います。