ImageUpload Casual

ImageUploadをカジュアルに考えてみた

Transcript

1. ImageUpload Casual Togo@terut
2. ImageUpload Casualͱ͸ʁ ਂ͘ઙ͘ɺ޿͘ڱ͘ImageUploadʹ͍ͭͯߟ ͑ͯΈΑ͏ͱ͍͏ࢼΈ MySQL CasualͷύΫϦ GachualͰ͸ͳ͍
3. ImageUpload ImageMagick convert mogrify identfy ImageUploadͷΩϞ convertͱmogrifyͷҧ͍Λ೺Ѳ͢Δ content-typeͱ͔΋͋Δ
4. pjpeg?? problem IEͱ͔͍͏HTMLΛrender͢ΔπʔϧΛ࢖ͬͨ ৔߹ʹ͘ΔΒ͍͠content-type ϒϥ΢βҎ֎͔Βpost͢Δͱ͸… pjpegͱ͔x-pngͱ͔͋Δ redirect chrome unless Hoge.isBrowser? ࣮૷͸Α
5. ๻͕ແ஌͔΋͠ΕΜ͠… x-png΋ಉ༷ʹͳ͍
6. Casual note 1 pjpeg, x-pngͳͲ͸͢΂ͯڧ੍తʹjpeg, png objective-cͩͱpjpegΛૉ௚ʹදࣔͰ͖ͳ͔ͬ ͨͷͰ ϒϥ΢βͳΒ໰୊ͳ͘දࣔͰ͖Δ
7. Uma.jpg Problem a.k.a അࢗը૾ 500KBʢ600x◦◦ʣ ࠓ͸HIKARI࣌୅ͩ͠ɺͦΜͳͷ༨༟ͬ͠ΐͱ ͔ݴͬͪΌ͏΍ͭ͸֯ͰখࢦͿ͚ͭΖ ΫϥΠΞϯτʹcache͠ΖͬͯݴͬͪΌ͏΍ͭ ͸ਖ਼͍͠Ͱ͍͢͢·ͤΜͰͨ͠
8. ܰ͞͸ਖ਼ٛ εϚϗΞϓϦ͸3Gɺը૾͸ݟͨ໨ΩϨΠͰܰ ͍΄͏͕ମײ଎౓΋౰વ଎͍ ͍ܰͱۭؒޮ཰Α͍ʢը૾Λmemory cacheʣ ྫ͑͹ face ͳΜͱ͔ - 70ʙ100KBલޙ ʢ600x◦◦ʣ path - 200KBલޙ (918x1632ʣ
9. Casual note 2 imageΛܰྔԽ qualityΛ80ʙ85΁ mogrify -quality 80 hoge.jpg default͸75ͬΆ͍͚ͲɺlibraryʹΑͬͯ͸ 100ͱ͔΍ͬͪΌͬͯΔͷ΋͋Δ ϑΝΠϧαΠζʹେ͖ؔ͘ΘΔΦϓγϣϯ
10. Exif Exif - Exchangeable image file format Πάδϑ΋͘͠͸Τάδϑ Χϝϥͷػछ ࡱӨ࣌ͷ৚݅ ϑϥογϡͷ༗ແ GPSͱ͔৭ʑ
11. Exif ͱ͸ʙ
12. Exifʹ͸ࢥ͍ग़͕͋Δ ͕͓ͩલͷࢥ͍ग़ʹΈΜͳ͸ͦΜͳڵຯͳ͍ ͠໨Λ੧·ͤ GPSͳͲෆཁͳ৘ใͩͬͨΓɺಛఆ͞ΕΔ͜ ͱ΋े෼Մೳੑͱͯ͋͠Δ ϝλσʔλͩ͠࡟Ε͹ϑΝΠϧαΠζ͕ݮΔ
13. GPS… LocateϘλϯΛԡͨͥ͠…
14. Ͱ͸͢·͞Εͳ͍͜ͱ͕ى͖Δ͔΋…
15. Casual note 3 ෆཁͳ৘ใΛ࡟Δ ݸਓ৘ใతͳҙຯͰ΋ mogrify -strip hoge.jpg
16. rotate problem Uploadͨ͠Βը૾͕ԣ޲͖ ͜Ε͸߄ͯΔ͠ Ή͠Ζ߄ͯΖ
17. Orientation ը૾͸޲͖ͷ৘ใΛ࣋ͬͯΔ ͦͷ··convert͢ΔͱSendo͕͍Α͏͕߄ͯΔ
18. Casual note 4 OrientationΛߟྀͯ͠convert mogrify -auto-orient hoge.jpg ͖ͬ͞ͷ-stripͰExif౳ͷϝλσʔλΛ࡟Δ orientation΋ফ͑ΔͷͰ೰·͞Εͳͯ͘͢Ή
19. Casual note 5 image dimention mogrify -resize 600x> hoge.jpg 600x౳ൺͷॎ ྫ͑͹originalΛresize 1200x>ͱͯ͠อଘ dimensionม͑ͳͯ͘΋size͸ݮΒͦ͏ͥ…
20. QuantumDepth Q8 - QuantumDepth 8 version RGB֤ཁૉͷ෼ղೳ͕8bit, 16bitʢը૾ॲཧͷ ਫ਼౓͕ߴ͍͔Ͳ͏͔తͳײͬ͡Ά͍ʣ Q8͸Q16ʹൺ΂ͯϝϞϦ࢖༻ྔ͸໿൒෼ɺ CPU࢖༻ྔ͸30%ఔ౓গͳ͍ͱ͔
21. Casual note 6 Q8Λ࢖͏ HomebrewͰೖΔͷ͸Q16 ίϯύΠϧ࣌ʹ--with-quantum-depth=8Λͭ ͚Δ͔ɺconvertͰ-depth 8Λ͚ͭΔ mogrify -depth 8 hoge.jpg iPhone͸depth 8ʹͳͬͯΔΑ͏ͳ ݕূͯ͠ͳ͍ʢͩͬͯΧδϡΞϧ͔ͩΒͶʂ
22. convert slow problem ຊ൪ʹdeployͯ͠෼͔Δ convert ஗͞ AWSͷ͍҆΍ͭ͸ͦΕͳΓεϖοΫ youͷmac͸SSDͰquadͰmemory8Gͳ͜ͱΛ ͓๨Ε͔
24. speed, speed, speed jpegͳΒdefineΦϓγϣϯʹΑΓ10ഒߴ଎Խ http:/ /blog.mirakui.com/entry/ 20110123/1295795409 ࠓͲ͖ͷPanda͞Μ ͍͢͝ ৄ͍͠આ໌͸ϦϯΫͰʢͩͬͯΧδϡry
25. Env MacBook Air 13inch Core i5 1.7GHz memory 4G SSD Image 4032x3024 5.1MB The Greatest Image (Special Thanks Hym)
26. Command
27. Bench
28. Resized Image 600x450 59KB small, but The Greatest Image
29. Compare Resized vs Resized with define
30. Casual note 7 -define jpeg:sizeͰߴ଎Խ ྫ͑͹ɺiOSΞϓϦ͔ΒͷimageΛ͢΂ͯjpeg ʹ͢Δ ը૾ฤू͠ͳ͍͠ɺҰཡը૾ͱ͔͸jpeg mogrify -define jpeg:size=”600x>” ...
31. Casual Planʢޙʹ mogrify -unsharp ͰΩϨΠ mogrify -color [number] Ͱը࣭ͱαΠζͷό ϥϯε OpenMpͷon/offʢ͜ͷล͸@hattorix0ͷ΄͏ ͕ৄͦ͠͏ͳͷͰڭ͑Ζ͍ͩ͘͞ʣ QuantumDepth libjpeg-turbo!!!
32. RubyͰ࢖͏ ྫ͑͹CarrierWaveͱMimiMagick MiniMagick͸mogrifyΛୟ͘ͷͰࠓ·ͰͷΦϓ γϣϯ͕࢖͑Δ
33. content-type
34. oreore process method CarrierWaveʹ͋Δprocess :resize_to_limitͱ ͔͸manipulate!Λ࢖͍ɺΑ͘࢖͏ॲཧͱͯ͠ resize_to_limit methodΛ௥Ճͯ͠Δ͚ͩ Α͔Ζ͏ɺͳΒ͹oreoreͩ
35. Casual note matome
36. keypoint manipulate! https:/ /github.com/jnicklas/carrierwave/blob/ master/lib/carrierwave/processing/ mini_magick.rb mogrify command https:/ /github.com/probablycorey/ mini_magick/blob/master/lib/mini_magick.rb formatͰ͸content-type·Ͱม׵͠ͳ͍
37. PHPͰ࢖͏ ஌ΒΜ optionΛbuildͯ͠mogrifyୟ͘Α͏ʹ͢Ε͹͍ ͍͚ͩ library͕ͳ͍ʁ php-mini-magick͞Μ… ࣗ෼Ͱ࡞Ε͹͍͍Μ͡Όͳ͍Ͱ͔͢Ͷʂʂʂ
38. ௥ه convert͸ը૾͕ͿͬյΕͯͨΓɺը૾͡Όͳ ͚Ε͹Τϥʔ͸͘ libjpeg-turbo͸ݕূͨ݁͠ՌɺͪΌΜͱૣ͘ ͳͬͨʢΧδϡry pixiv thumbnailͷεϥΠυͱ͔ݟͨΒΑ͍