ImageUpload Casual
by
terut
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 default75ͬΆ͍͚ͲɺlibraryʹΑͬͯ 100ͱ͔ͬͪΌͬͯΔͷ͋Δ ϑΝΠϧαΠζʹେ͖ؔ͘ΘΔΦϓγϣϯ
Slide 10
Slide 10 text
Exif Exif - Exchangeable image file 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ʢը૾ॲཧͷ ਫ਼͕ߴ͍͔Ͳ͏͔తͳײͬ͡Ά͍ʣ Q8Q16ʹൺͯϝϞϦ༻ྔɺ 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 iPhonedepth 8ʹͳͬͯΔΑ͏ͳ ݕূͯ͠ͳ͍ʢͩͬͯΧδϡΞϧ͔ͩΒͶʂ
Slide 22
Slide 22 text
convert slow problem ຊ൪ʹdeploy͔ͯ͠Δ convert ͞ AWSͷ͍҆ͭͦΕͳΓεϖοΫ youͷmacSSDͰquadͰmemory8Gͳ͜ͱΛ ͓Ε͔
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
speed, speed, speed jpegͳΒdefineΦϓγϣϯʹΑΓ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 define
Slide 30
Slide 30 text
Casual note 7 -define jpeg:sizeͰߴԽ ྫ͑ɺiOSΞϓϦ͔ΒͷimageΛͯ͢jpeg ʹ͢Δ ը૾ฤू͠ͳ͍͠ɺҰཡը૾ͱ͔jpeg mogrify -define 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 MiniMagickmogrifyΛୟ͘ͷͰࠓ·ͰͷΦϓ γϣϯ͕͑Δ
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ͷεϥΠυͱ͔ݟͨΒΑ͍