Nginxにngx_small_lightモジュールを入れて画像の自動リサイズ処理をする

ngx_small_lightについて

ngx_small_lightモジュールの概要

ngx_small_lightはNginxにモジュールとして追加できる機能になります。

主に画像のリサイズやクオリティー値(圧縮度)の調整、画像の切り取りなどがngx_small_lightにて行なえますが、その他にもまだまだ行える事があります。

導入メリット

  • サーバにアップロードする画像にリサイズ調整を加える必要がない
  • ngx_small_lightでクオリティー値(圧縮度)の調整ができるため、Webブラウザのダウンロード時間が短縮され、ブラウザ表示が速くなる

デメリット・リスク

  • オリジナル画像(ngx_small_lightでリサイズする前の画像)が大きい場合、サーバの容量を圧迫する可能性がある
  • ngx_small_lightで画像をリサイズしたり、クオリティー値の調整をしたりするため、ngx_small_lightを利用しない時に比べて、サーバに負荷がかかる

今回紹介する内容

  • Nginxをソースからインストール
  • ngx_small_lightモジュールの導入
  • ngx_small_lightの設定
    • パターン指定で画像をリサイズ
    • クオリティー値の設定

導入環境

Nginxをソースからインストール

ではさっそくやってみます。

Nginxのインストールの前に必要な諸々

ngx_small_lightのインストール

Nginxパッケージの取得とインストール

ngx_small_lightの設定

今回Nginxの設定紹介は省いております。

nginx.conf

small_light_pattern_define

これは画像変換するパターンを設定する時に利用する記述です。

今回設定したパターンは下記になります。

  • パターン:l
    • 縦横比を維持して画像幅を800pxに変換、クオリティー値を75に設定し、画像エンジンにImagemagickを利用し、jpeg画像の変換を速くしています。
    • http://ドメイン/img/****.jpg
    • http://ドメイン/img/****.jpg?size=l
  • パターン:m
    • 縦横比を維持して画像幅を500pxに変換、クオリティー値を50に設定し、画像エンジンにImagemagickを利用し、jpeg画像の変換を速くしています。
    • http://ドメイン/img/****.jpg?size=m
  • パターン:s
    • 縦横比を維持して画像幅を300pxに変換、クオリティー値を30に設定し、画像エンジンにImagemagickを利用し、jpeg画像の変換を速くしています。
    • http://ドメイン/img/****.jpg?size=s

その他の設定値などは正式なREADME.mdを参照ください。

https://github.com/cubicdaiya/ngx_small_light

最後に

後はNginxを再起動してブラウザでアクセスして表示をご確認ください。

今回なぜパターンを決めて利用するようにしたかというと、クエリーにdw,dyなどを常に付与するようにしてもっと汎用性のある利用方法もあるのですが、デメリットにも書きましたがngx_small_lightの画像変換処理が走るためサーバの負荷が高くなります。

ですが今回のようにパターンを設定し、画像をproxy_cacheなどでキャッシュすれば、ある程度の画像リサイズや変換の恩恵も受けつつ、キャッシュによってサーバへの負荷も下げられるためパターン指定を利用するようにしました。

スペックのいいサーバを利用されている方などはパターン指定を行わず利用すれば、cssなどから画像サイズ指定を全て取り払うことも可能になります。

ではではこれにてngx_small_lightモジュールの導入は完了になります。

スポンサーリンク
レスポンシブ




レスポンシブ




シェアする

フォローする

スポンサーリンク
レスポンシブ