1. 2015/07/19 11:58
1/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
いまさら聞けないいまさら聞けない
画像自動処理画像自動処理
@kanayannet
Gunma.web #20

2. 2015/07/19 11:58
2/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
きょう話す事きょう話す事
なぜ今この話?
よくある処理
比較的よくある処理
ちょっと聞かないかも?しれない処理
思わぬ罠
まとめ

3. 2015/07/19 11:58
3/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
怖い話怖い話....
ちまたで偉い人が画像や通信の最適化など
色々話されていますが..

4. 2015/07/19 11:58
4/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
全くの偶然です全くの偶然です!!
タイミングが被っただけです。
ごめんなさい。
不備がございましたらご容赦ください。 m(__)m

5. 2015/07/19 11:58
5/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
なぜ今この話なぜ今この話??
最近、画像処理に関わる事が多いよな∼
不具合調整
過去の遺産..orz

6. 2015/07/19 11:58
6/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
過去の遺産過去の遺産 == 悪悪??
必ずきっかけ、経緯があるはず。
作った時は良かれと思ってやった事。

7. 2015/07/19 11:58
7/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
経緯経緯 == ユーザの要望ユーザの要望
と考えて成功、失敗談を話せれば..
興味を持ってもらえる話になりそう。

8. 2015/07/19 11:58
8/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
よくある画像処理よくある画像処理
画面に収まりきらない大きい画像を
表示させる場合

9. 2015/07/19 11:58
9/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
「縮小して表示して！」「縮小して表示して！」

10. 2015/07/19 11:58
10/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
HTMLHTMLタグで調整する方法もタグで調整する方法も
ありますがありますが....
<<imgimg srcsrc==""画像ファイル名"" widthwidth==""横幅"" heightheight==""高さ"">>

11. 2015/07/19 11:58
11/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
画像容量は小さくならない画像容量は小さくならない
アクセス頻度が高いサイトでトラフィック
(通信量)平気?
ユーザの通信環境は平気?
携帯電話は平気?

12. 2015/07/19 11:58
12/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
表示する大きさに画像を表示する大きさに画像を
convertconvert
容量は結果小さくなる。

13. 2015/07/19 11:58
13/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
一つ一つの画像に対して一つ一つの画像に対して
都度行う都度行う

14. 2015/07/19 11:58
14/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
手動でやると面倒臭い手動でやると面倒臭い
一般ユーザはやりたがらない。

15. 2015/07/19 11:58
15/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
自動で縮小自動で縮小
ImageMagick

16. 2015/07/19 11:58
16/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
プログラムから呼び出せるプログラムから呼び出せる
convert -resize 400x300 input.jpg output.jpg
今回のコマンドはImageMagickメインで解説します。

17. 2015/07/19 11:58
17/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
よくある画像処理よくある画像処理 終了終了
Are You OK ?

18. 2015/07/19 11:58
18/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
比較的よくある画像処理比較的よくある画像処理
画像を一覧で表示したい場合
小さい画像を並べますよね?

19. 2015/07/19 11:58
19/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
全体的に小さくすると全体的に小さくすると
メインの被写体が見えずらくなる場合がある。

20. 2015/07/19 11:58
20/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
例例

21. 2015/07/19 11:58
21/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
小さくしてみた小さくしてみた

22. 2015/07/19 11:58
22/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
どうするのどうするの??
Crop

23. 2015/07/19 11:58
23/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
CropCropの定義の定義
画像から xxPX を抜き出す

24. 2015/07/19 11:58
24/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
コマンドでやるとこんな感じですね。コマンドでやるとこんな感じですね。
convert -crop 横x縦+横の切抜位置+縦の切抜位置 input.jpg output.jpg

25. 2015/07/19 11:58
25/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
Before -> AfterBefore -> After

26. 2015/07/19 11:58
26/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
切抜位置の適切な数値は切抜位置の適切な数値は....
サイトのユーザがアップする画像の特徴を反映する必要がある。
ユーザに委ねたい時は javascriptなどで簡単に切り抜けるGUI
用意...(ry

27. 2015/07/19 11:58
27/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
比較的よく聞く話比較的よく聞く話::終了終了

28. 2015/07/19 11:58
28/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
ちょっと聞かないちょっと聞かない
画像処理画像処理

29. 2015/07/19 11:58
29/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
アニメアニメGIFGIF
みなさん知ってますよね?

30. 2015/07/19 11:58
30/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
アニメアニメGIFGIF にも色々ありますよ。にも色々ありますよ。

31. 2015/07/19 11:58
31/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
パラパラアニメ方式パラパラアニメ方式
一枚一枚を連続で再生

32. 2015/07/19 11:58
32/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
フレーム差分の最適化フレーム差分の最適化
動きがある部分の差分情報で再生する方式
先ほどのパラパラアニメよりも容量が小さい
参考(英語)
http://www.imagemagick.org/Usage/anim_opt/#opt_trans

33. 2015/07/19 11:58
33/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
これをこれを -resize option-resize option だけでだけで
convertconvert するとすると......
画像の容量が大幅に増える場合があります(汗)
差分アニメでは無くなってしまう。
黒い部分が変に混ざる場合も..(壊れる)

34. 2015/07/19 11:58
34/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
こうすると上手くいくこうすると上手くいく
convert input.gif -coalesce -layers OptimizeTransparency -resize 横x縦
output.gif

35. 2015/07/19 11:58
35/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
ちょっと聞かないちょっと聞かない
画像処理画像処理::終了終了

36. 2015/07/19 11:58
36/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
思わぬ罠思わぬ罠

37. 2015/07/19 11:58
37/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
画像の横、縦の取得方法画像の横、縦の取得方法((コマンドコマンド))
identify input.gif

38. 2015/07/19 11:58
38/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
こんな情報が返却させるこんな情報が返却させる
input.gif GIF 116x116 116x116+0+0 PseudoClass 256c 5kb

39. 2015/07/19 11:58
39/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
ところでアニメところでアニメgifgif ってどうなんだろってどうなんだろ??

40. 2015/07/19 11:58
40/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
むむむむ!!
input.gif[0] GIF 236x42 236x42+0+0 PseudoClass 256c 4e+01kb
input.gif[1] GIF 236x42 236x42+0+0 PseudoClass 128c 4e+01kb
input.gif[2] GIF 236x42 236x42+0+0 PseudoClass 128c 4e+01kb
input.gif[3] GIF 236x42 236x42+0+0 PseudoClass 256c 4e+01kb
input.gif[4] GIF 236x42 236x42+0+0 PseudoClass 256c 4e+01kb

41. 2015/07/19 11:58
41/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
これってこれって 22枚目から枚目から
サイズ大きくとかあるサイズ大きくとかある??

42. 2015/07/19 11:58
42/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
あるねあるね......

43. 2015/07/19 11:58
43/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
identifyidentify で確認で確認
atack.gif[0] GIF 32x31 1216x1201+16+15 8-bit sRGB 8c 21.8KB 0.000u
0:00.000 atack.gif[1] GIF 1200x1105 1216x1201+2+9 8-bit sRGB 8c 21.8KB
0.000u 0:00.000 atack.gif[2] GIF 1200x1132 1216x1201+3+8 8-bit sRGB 8c
21.8KB 0.000u 0:00.000

44. 2015/07/19 11:58
44/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
これを考慮し忘れるとこれを考慮し忘れると......
atack.gif[0] GIF 32x31
だけで横幅を認識 -> PGは縮小する必要なしと判断

45. 2015/07/19 11:58
45/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
convertconvert されずにされずに すり抜けるすり抜ける

46. 2015/07/19 11:58
46/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
余談余談
imagemagick の option はかなりあるよ
http://www.imagemagick.org/script/command-line-
options.php

47. 2015/07/19 11:58
47/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
まとめまとめ
画像処理は奥が深い
ImageMagick の optionの数 パネエ
アニメGIF怖い!

48. 2015/07/19 11:58
48/48 ページhttp://localhost:3000/image_convert.md?print-pdf=1#/4/2
ご清聴ご清聴
ありがとうございましたありがとうございました