pixiv insideは移転しました! ≫ https://inside.pixiv.blog/

インターンでmod_small_lightを拡張した話

先月からpixivの選考インターンに来ている@knmkrと申します。 インターンではbokkoさんのもと、 動的にサムネイルを生成するmod_small_lightを拡張する課題に取り組みました。

Github: mod_small_light (with GraphicskMagick)

mod_small_lightによる動的サムネイル生成

pixivのように画像を大量に扱うwebサービスでは、サムネイルもまた大量に必要となります。大量のサムネイルを扱う場合、

  • サムネイルを保存するのに大容量のストレージが必要
  • サイトのデザイン変更に伴う新規サムネイルの生成コストが高い

といったことが問題になります。

そこで、pixivでは一部のサムネイルは事前に用意せず、画像を配信する際にmod_small_lightでサムネイルに変換する「動的サムネイル生成」が行われています。 mod_small_lightApacheのモジュールで、次のように画像のURIにパラメータを渡すことで、 動的に画像変換を行うことができます。

1
2
# オリジナル画像のURL
http://path/to/images/img.jpg
1
2
# 動的にサムネイルが生成されるURI
http://path/to/small_light(dw=100,dh=100)/img.jpg

実際には、pixivでサムネイルをなんでかんでも動的に生成すると画像変換サーバに凄い負荷がかかるので、 あらかじめ前段のキャッシュサーバでキャッシュすることを前提に運用されています。

このあたりの話は「YAPC::Asia 2012で「pixivのサムネイル事情」について発表してきました」で少し触れられているので興味のある方はご覧ください。

mod_small_lightの拡張

今回、mod_small_lightを拡張してGraphicsMagickをバックエンドに追加してみました。

Github: mod_small_light (with GraphicskMagick)

small_light(e=graphicsmagick,...とするとGraphicsMagickがバックエンドになります。

GraphicsMagickはImageMagickからフォークされたもので、より高速に動作すると言われており(GraphicsMagick vs ImageMagick Benchmarks)、実際にmod_small_lightに対してab(apache bench)でパフォーマンスを確認したところ、ImageMagickよりもGraphicsMagickの方が高速に動作するのを確認できました。以下は手持ちのMacBook Air(mid 2011)上で単純なリサイズのみを行った場合のベンチマーク結果です。(abのオプションは、「ab -n 100 -c 10 $url」、small_lightに渡すパラメータは「e=graphicsmagick,ch=30,cw=30,dh=28,dw=28,jpeghint=y」、画像のピクセル数は600x425です。)

また、せっかくURIで簡単にパラメータを渡せるので、画像エフェクトに「回転」、「油絵風エフェクト」、「コントラスト強弱」を追加してみました。 「色合いの強弱」も追加したかったのですが、ImageMagickの関数であるMagickTintImageがGraphicsMagickではサポートされていないなど、 GraphicsMagickならでの弊害もありました。

終わりに

インターンでの開発の機会を与えて下さったpixiv Inc.さま、bokkoさま、ありがとうございました!