ImageUpload Casual - Speaker Deck

ImageUpload Casual

by terut

Slide 1

Slide 1 text

ImageUpload Casual Togo@terut

Slide 2

Slide 2 text

ImageUpload Casualͱ͸ʁ ਂ͘ઙ͘ɺ޿͘ڱ͘ImageUploadʹ͍ͭͯߟ ͑ͯΈΑ͏ͱ͍͏ࢼΈ MySQL CasualͷύΫϦ GachualͰ͸ͳ͍

Slide 3

Slide 3 text

ImageUpload ImageMagick convert mogrify identfy ImageUploadͷΩϞ convertͱmogrifyͷҧ͍Λ೺Ѳ͢Δ content-typeͱ͔΋͋Δ

Slide 4

Slide 4 text

pjpeg?? problem IEͱ͔͍͏HTMLΛrender͢ΔπʔϧΛ࢖ͬͨ ৔߹ʹ͘ΔΒ͍͠content-type ϒϥ΢βҎ֎͔Βpost͢Δͱ͸… pjpegͱ͔x-pngͱ͔͋Δ redirect chrome unless Hoge.isBrowser? ࣮૷͸Α

Slide 5

Slide 5 text

๻͕ແ஌͔΋͠ΕΜ͠… x-png΋ಉ༷ʹͳ͍

Slide 6

Slide 6 text

Casual note 1 pjpeg, x-pngͳͲ͸͢΂ͯڧ੍తʹjpeg, png objective-cͩͱpjpegΛૉ௚ʹදࣔͰ͖ͳ͔ͬ ͨͷͰ ϒϥ΢βͳΒ໰୊ͳ͘දࣔͰ͖Δ

Slide 7

Slide 7 text

Uma.jpg Problem a.k.a അࢗը૾ 500KBʢ600x○○ʣ ࠓ͸HIKARI࣌୅ͩ͠ɺͦΜͳͷ༨༟ͬ͠ΐͱ ͔ݴͬͪΌ͏΍ͭ͸֯ͰখࢦͿ͚ͭΖ ΫϥΠΞϯτʹcache͠ΖͬͯݴͬͪΌ͏΍ͭ ͸ਖ਼͍͠Ͱ͍͢͢·ͤΜͰͨ͠

Slide 8

Slide 8 text

ܰ͞͸ਖ਼ٛ εϚϗΞϓϦ͸3Gɺը૾͸ݟͨ໨ΩϨΠͰܰ ͍΄͏͕ମײ଎౓΋౰વ଎͍ ͍ܰͱۭؒޮ཰Α͍ʢը૾Λmemory cacheʣ ྫ͑͹ face ͳΜͱ͔ - 70ʙ100KBલޙ ʢ600x○○ʣ path - 200KBલޙ (918x1632ʣ

Slide 9

Slide 9 text

Casual note 2 imageΛܰྔԽ qualityΛ80ʙ85΁ mogrify -quality 80 hoge.jpg default͸75ͬΆ͍͚ͲɺlibraryʹΑͬͯ͸ 100ͱ͔΍ͬͪΌͬͯΔͷ΋͋Δ ϑΝΠϧαΠζʹେ͖ؔ͘ΘΔΦϓγϣϯ

Slide 10

Slide 10 text

Exif Exif - Exchangeable image ﬁle format Πάδϑ΋͘͠͸Τάδϑ Χϝϥͷػछ ࡱӨ࣌ͷ৚݅ ϑϥογϡͷ༗ແ GPSͱ͔৭ʑ

Slide 11

Slide 11 text

Exif ͱ͸ʙ

Slide 12

Slide 12 text

Exifʹ͸ࢥ͍ग़͕͋Δ ͕͓ͩલͷࢥ͍ग़ʹΈΜͳ͸ͦΜͳڵຯͳ͍ ͠໨Λ੧·ͤ GPSͳͲෆཁͳ৘ใͩͬͨΓɺಛఆ͞ΕΔ͜ ͱ΋े෼Մೳੑͱͯ͋͠Δ ϝλσʔλͩ͠࡟Ε͹ϑΝΠϧαΠζ͕ݮΔ

Slide 13

Slide 13 text

GPS… LocateϘλϯΛԡͨͥ͠…

Slide 14

Slide 14 text

Ͱ͸͢·͞Εͳ͍͜ͱ͕ى͖Δ͔΋…

Slide 15

Slide 15 text

Casual note 3 ෆཁͳ৘ใΛ࡟Δ ݸਓ৘ใతͳҙຯͰ΋ mogrify -strip hoge.jpg

Slide 16

Slide 16 text

rotate problem Uploadͨ͠Βը૾͕ԣ޲͖ ͜Ε͸߄ͯΔ͠ Ή͠Ζ߄ͯΖ

Slide 17

Slide 17 text

Orientation ը૾͸޲͖ͷ৘ใΛ࣋ͬͯΔ ͦͷ··convert͢ΔͱSendo͕͍Α͏͕߄ͯΔ

Slide 18

Slide 18 text

Casual note 4 OrientationΛߟྀͯ͠convert mogrify -auto-orient hoge.jpg ͖ͬ͞ͷ-stripͰExif౳ͷϝλσʔλΛ࡟Δ orientation΋ফ͑ΔͷͰ೰·͞Εͳͯ͘͢Ή

Slide 19

Slide 19 text

Casual note 5 image dimention mogrify -resize 600x> hoge.jpg 600x౳ൺͷॎ ྫ͑͹originalΛresize 1200x>ͱͯ͠อଘ dimensionม͑ͳͯ͘΋size͸ݮΒͦ͏ͥ…

Slide 20

Slide 20 text

QuantumDepth Q8 - QuantumDepth 8 version RGB֤ཁૉͷ෼ղೳ͕8bit, 16bitʢը૾ॲཧͷ ਫ਼౓͕ߴ͍͔Ͳ͏͔తͳײͬ͡Ά͍ʣ Q8͸Q16ʹൺ΂ͯϝϞϦ࢖༻ྔ͸໿൒෼ɺ CPU࢖༻ྔ͸30%ఔ౓গͳ͍ͱ͔

Slide 21

Slide 21 text

Casual note 6 Q8Λ࢖͏ HomebrewͰೖΔͷ͸Q16 ίϯύΠϧ࣌ʹ--with-quantum-depth=8Λͭ ͚Δ͔ɺconvertͰ-depth 8Λ͚ͭΔ mogrify -depth 8 hoge.jpg iPhone͸depth 8ʹͳͬͯΔΑ͏ͳ ݕূͯ͠ͳ͍ʢͩͬͯΧδϡΞϧ͔ͩΒͶʂ

Slide 22

Slide 22 text

convert slow problem ຊ൪ʹdeployͯ͠෼͔Δ convert ஗͞ AWSͷ͍҆΍ͭ͸ͦΕͳΓεϖοΫ youͷmac͸SSDͰquadͰmemory8Gͳ͜ͱΛ ͓๨Ε͔

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

speed, speed, speed jpegͳΒdeﬁneΦϓγϣϯʹΑΓ10ഒߴ଎Խ http:/ /blog.mirakui.com/entry/ 20110123/1295795409 ࠓͲ͖ͷPanda͞Μ ͍͢͝ ৄ͍͠આ໌͸ϦϯΫͰʢͩͬͯΧδϡry

Slide 25

Slide 25 text

Env MacBook Air 13inch Core i5 1.7GHz memory 4G SSD Image 4032x3024 5.1MB The Greatest Image (Special Thanks Hym)

Slide 26

Slide 26 text

Command

Slide 27

Slide 27 text

Bench

Slide 28

Slide 28 text

Resized Image 600x450 59KB small, but The Greatest Image

Slide 29

Slide 29 text

Compare Resized vs Resized with deﬁne

Slide 30

Slide 30 text

Casual note 7 -deﬁne jpeg:sizeͰߴ଎Խ ྫ͑͹ɺiOSΞϓϦ͔ΒͷimageΛ͢΂ͯjpeg ʹ͢Δ ը૾ฤू͠ͳ͍͠ɺҰཡը૾ͱ͔͸jpeg mogrify -deﬁne jpeg:size=”600x>” ...

Slide 31

Slide 31 text

Casual Planʢޙʹ mogrify -unsharp ͰΩϨΠ mogrify -color [number] Ͱը࣭ͱαΠζͷό ϥϯε OpenMpͷon/offʢ͜ͷล͸@hattorix0ͷ΄͏ ͕ৄͦ͠͏ͳͷͰڭ͑Ζ͍ͩ͘͞ʣ QuantumDepth libjpeg-turbo!!!

Slide 32

Slide 32 text

RubyͰ࢖͏ ྫ͑͹CarrierWaveͱMimiMagick MiniMagick͸mogrifyΛୟ͘ͷͰࠓ·ͰͷΦϓ γϣϯ͕࢖͑Δ

Slide 33

Slide 33 text

content-type

Slide 34

Slide 34 text

oreore process method CarrierWaveʹ͋Δprocess :resize_to_limitͱ ͔͸manipulate!Λ࢖͍ɺΑ͘࢖͏ॲཧͱͯ͠ resize_to_limit methodΛ௥Ճͯ͠Δ͚ͩ Α͔Ζ͏ɺͳΒ͹oreoreͩ

Slide 35

Slide 35 text

Casual note matome

Slide 36

Slide 36 text

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·Ͱม׵͠ͳ͍

Slide 37

Slide 37 text

PHPͰ࢖͏ ஌ΒΜ optionΛbuildͯ͠mogrifyୟ͘Α͏ʹ͢Ε͹͍ ͍͚ͩ library͕ͳ͍ʁ php-mini-magick͞Μ… ࣗ෼Ͱ࡞Ε͹͍͍Μ͡Όͳ͍Ͱ͔͢Ͷʂʂʂ

Slide 38

Slide 38 text

௥ه convert͸ը૾͕ͿͬյΕͯͨΓɺը૾͡Όͳ ͚Ε͹Τϥʔ͸͘ libjpeg-turbo͸ݕূͨ݁͠ՌɺͪΌΜͱૣ͘ ͳͬͨʢΧδϡry pixiv thumbnailͷεϥΠυͱ͔ݟͨΒΑ͍