カンタン画像サムネイル作成「Smalllight」

10,728 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,728
On SlideShare
0
From Embeds
0
Number of Embeds
302
Actions
Shares
0
Downloads
26
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

カンタン画像サムネイル作成「Smalllight」

  1. 1. カンタン画像サムネイル生成 株式会社ライブドア 開発部 山下 拓也
  2. 2. 画像サムネイル サムネイルの構築 – アップロードされた画像をサムネイル化(縮小) – サムネイル化された画像を保存 よくあること – 複数パターンのサムネイル(大・中・小・縦長など) – 機能追加によるサムネイルパターンの増加 管理が面倒 動的に生成
  3. 3. Small Light Small Light(スモールライト) – to smaller → 小さく – to lighter → 軽く Small + Light = Small Light
  4. 4. 導入コンテンツ coming soon
  5. 5. Small Lightの概要 Apache module – mod_small_light – OutputFilter – Imlib2 – ImageMagick(wand)
  6. 6. mod_small_light URL中にリサイズ定義を含める 単純な縮小 長辺・短辺を基準としたcrop 単色の枠をつける(モバイル向け) Sharpen/Blur/UnsharpMask
  7. 7. Small Light 定義文字列 /small_light(dw= http://example.com 60,dh=60,...e=imlib2)/http://int ernal.example.com/images/12345678.jpg URL中に – small_light(定義文字列)
  8. 8. small_light( ) 変換前の画像の座標指定: sx 変換前画像x座標 sy 変換前画像y座標 sw 変換前画像横幅 sh 変換前画像縦幅 変換後の画像の座標指定: dx 変換後画像x座標 dy 変換後画像y座標 dw 変換後画像横幅 dh 変換後画像縦幅 変換オプション: da 変換後画像アスペクト比制御種別 (s=短辺基準 l=長辺基準 n=なし 初期値:l) ds 変換後画像スケーリング制御種別 (s=小さい画像も拡大 n=小さい画像はそのまま 初期値:n)
  9. 9. small_light( ) キャンバス: cw キャンバス横幅 ch キャンバス縦幅 cc キャンバス色 ボーダー: bw ボーダー横幅 bh ボーダー縦幅 bc ボーダー色 出力オプション: of 出力形式(jpeg,png) q クォリティー(0~100)
  10. 10. small_light( ) その他: info HTTPヘッダーに詳細情報を出力 p パターン名 e 画像変換ライブラリ名 (imlib2,imagemagick,gegl,dummy) sharpen シャープ unsharp アンシャープマスク blur ブラー(ぼかし)
  11. 11. httpd.conf RewriteRule ^/small_light[^/]+/(http://.+)$ $1 [P,L] <LocationMatch ^/small_light[^/]+/> SetOutputFilter SMALL_LIGHT </LocationMatch> </LocationMatch> RewriteRule ^/resize/(L|M|S)/(.+¥.jpg)$ http://localhost/small_light(p=$1)/http://image.exa ^/resize/(L|M|S)/(.+¥ jpg)$ http://localhost/small_light(p=$1)/http://image.exa mple.com/$2 [P,L] mple.com/$2 SmallLightPatternDefine L sx=5p,sy=5p,sw=90p,sh=90p,dw=200,dh=200,da=l,d sx=5p,sy=5p,sw=90p,sh=90p,dw=200,dh=200,da=l,d s=s,cw=200,ch=200,cc=ffffff,q=80,of=jpg =s,cw=200,ch=200,cc=ffffff,q=80,of=jpg SmallLightPatternDefine M sx=5p,sy=5p,sw=90p,sh=90p,dw=100,dh=100,da=l, sx=5p,sy=5p,sw=90p,sh=90p,dw=100,dh=100,da=l, ds=s,cw=100,ch=100,cc=ffffff,q=70,of=jpg ds=s,cw=100,ch=100,cc=ffffff,q=70,of=jpg SmallLightPatternDefine S sx=5p,sy=5p,sw=90p,sh=90p,dw=50,dh=50,da=l,ds sx=5p,sy=5p,sw=90p,sh=90p,dw=50,dh=50,da=l,ds =s,cw=50,ch=50,cc=ffffff,q=60,of=jpg =s,cw=50,ch=50,cc=ffffff,q=60,of=jpg # /resize/L/ → small_light(p=L) small_light(p=L) # /resize/M/ → small_light(p=M) small_light(p=M) # /resize/S/ → small_light(p=S) small_light(p=S)
  12. 12. smalled lighted 元画像 160x160 の画像から 60x60 のサムネイル 60x60 元画像 160x160 http://.../small_light(dw=60,dh=60)/...
  13. 13. smalled lighted 枠つき 枠つき small_light(dw=60,dh=60, bw=3,bh=3,bc=808080)
  14. 14. smalled lighted ブラー効果 ブラー効果 small_light(dw=60,dh=60, blur=8)
  15. 15. smalled lighted キャンバスとは? small_light(cw=160,ch=160,cc=ff00ff) キャンバスなし 160x43 キャンバスあり 160x160
  16. 16. smalled lighted sharpen=0
  17. 17. smalled lighted sharpen=1
  18. 18. 以上 なんですが・・・
  19. 19. さすがに軽くはない
  20. 20. nginx + squid nginx – ngx_http_upstream_consistent_hash – failover squid
  21. 21. サーバー構成 サービスA サービスA サービスB サービスB サービスC サービスC load balancer load balancer nginx nginx nginx nginx nginx nginx nginx nginx squid squid squid squid squid squid squid squid apache apache apache apache apache apache apache apache (mod_small_light) (mod_small_light) (mod_small_light) (mod_small_light) (mod_small_light) (mod_small_light) (mod_small_light) (mod_small_light) STF / image storage STF / image storage
  22. 22. 稼働状況 複数のコンテンツで4台を共有 1台約450万reqs/day (4台約1,800万reqs/day) squid キャッシュヒット率 約70% cache hits = 300万, cache misses = 150万 150万reqs/day = small light load averageはまだまだ余裕
  23. 23. nginx + squid nginx + squidの詳細について – [ hideden + nginx ] というキーワードで、 Googleでググったり、 NAVERでネバったりしてみてください。
  24. 24. まとめ サムネイルを動的に生成して楽をする 楽した分をキャッシュサーバーでカバー
  25. 25. ありがとうございました

×