実例で学ぶ画像最適化集 with ImageFlux / ImageFlux meetup#2

by Tatsuhiko Kubo

Slide 1

Slide 1 text

Tatsuhiko Kubo@cubicdaiya ImageFlux meetup #2 2018/09/25 ࣮ྫͰֶͿը૾࠷దԽू with ImageFlux

Slide 2

Slide 2 text

@cubicdaiya / Tatsuhiko Kubo Principal Engineer, SRE @ Mercari, Inc.

Slide 3

Slide 3 text

imageﬂux-cli • ImageFluxͷAPIΫϥΠΞϯτ • github.com/mercari/imageﬂux-cli • $ imageflux-cli Usage: imageflux-cli cache.lookup -k $url # lookup cache by key imageflux-cli cache.delete -k $url # delete cache by key imageflux-cli signature -s $secret -p $path # calculate signature of signed url

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ϝϧΧϦʹ͍ͭͯ • ೔ຊ࠷େͷϑϦϚΞϓϦ • 3෼Ͱ؆୯ʹग़඼ • 1) ࣸਅΛࡱΔ • 2) ঎඼৘ใΛهೖ • 3) ग़඼ϘλϯΛԡ͢ • ҆৺҆શͳܾࡁɾऔҾ • ΤεΫϩʔ • ಗ໊഑ૹ

Slide 6

Slide 6 text

ྦྷܭग़඼਺ͷਪҠ

Slide 7

Slide 7 text

ϝϧΧϦʹ͓͚Δը૾഑৴ • ϝϧΧϦͷσʔλ௨৴ྔͷେ෦෼Λ઎ΊΔͷ͸ը૾ • ঎඼ը૾ • ϓϩϑΟʔϧը૾ • όφʔը૾ • etc…

Slide 8

Slide 8 text

ϝϧΧϦʹ͓͚Δը૾഑৴ • ը૾ͷྔ͕ͱʹ͔͘ଟ͍ • ຖ೔ը૾σʔλ͕ඦສݸ୯ҐͰ૿͑Δ • ଟ͘ͷػೳ໘Ͱը૾͕ओ໾ͳͷͰը૾σʔλͷ഑৴ྔ͕ͱͯ΋ଟ͍ • λΠϜϥΠϯɺݕࡧɺ঎඼ৄࡉ • ͍͍ͶʂҰཡɺӾཡཤྺ • etc…

Slide 9

Slide 9 text

ϝϧΧϦʹ͓͚Δը૾഑৴ • CDN • Akamai • ImageFlux • Fastly • Origin • Amazon S3 ©2011 Amazon Web Services LLC or its affiliates. All rights reserved. User Users Client Multimedia Corporate data center Traditional server Mobile Client Internet AWS Management Console IAM Add-on Example: IAM Add-on Amazon Mechanical Turk On-Demand Workforce Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific ©2011 Amazon Web Services LLC or its affiliates. All rights reserved. User Users Client Multimedia Corporate data center Traditional server Mobile Client Internet AWS Management Console IAM Add-on Example: IAM Add-on Amazon Mechanical Turk On-Demand Workforce Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific User Users Client Multimedia Corporate data center Traditional server Mobile Client Amazon Mechanical Turk On-Demand Workforce Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific User Users Client Multimedia Corporate data center Traditional server Mobile Client Internet AWS Management Console IAM Add-on Example: IAM Add-on Amazon Mechanical Turk On-Demand Workforce Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific ©2011 Amazon Web Services LLC or its affiliates. All rights reserved. User Users Client Multimedia Corporate data center Traditional server Mobile Client Internet AWS Management Console IAM Add-on Example: IAM Add-on Human Intelligence Tasks (HIT) Assignment/ Task Requester Workers Amazon Mechanical Turk Non-Service Specific

Slide 10

Slide 10 text

ImageFlux࠾༻ͷഎܠ • ೔ʑ૿͑ଓ͚ΔCDNͷը૾഑৴σʔλྔ • ഑৴ίετͷ૿Ճ • ΞϓϦͷσʔλ௨৴ྔͷ૿Ճ • ΞϓϦͷಈ࡞଎౓΍UXʹӨڹ • UI΍σβΠϯมߋʹ൐͏࠷దͳը૾αΠζͷมԽ • σʔλ਺͕ଟ͍ͷͰෳ਺ύλʔϯͷը૾Λࣄલʹ४උ͢Δͷ͸ࠔ೉

Slide 11

Slide 11 text

ΞϓϦ͕շదʹ࢖͑ΔΑ͏ʹͳΔͨΊʹ͸ • σʔλͷ௨৴ྔΛ཈͑Δ޻෉͕ඞཁ • ௿଎ͳωοτϫʔΫͰ΋ετϨεͳ͘ಈ࡞ • ߴ଎ͳಈ࡞͕ඞཁෆՄܽ • ͲΜͳʹૉ੖Β͍͠UIͰ΋ಈ࡞͕஗ա͗Δͷ͸UXͱͯͩ͠Ί

Slide 12

Slide 12 text

ImageFluxͷ࠾༻Ͱظ଴Ͱ͖Δ͜ͱ • ը૾ͷಈతͳϦαΠζɺ࠷దԽʹΑΔ • ഑৴σʔλྔͷ࡟ݮ • ΞϓϦͷσʔλ௨৴ྔͷ࡟ݮ • UI΍σβΠϯʹ͋ͬͨ࠷దͳը૾αΠζͷ࠾༻

Slide 13

Slide 13 text

ImageFluxʹΑΔը૾࠷దԽ • ϝϧΧϦͰ഑৴͞ΕΔը૾ΛΦϯβϑϥΠͰϦαΠζ & WebPʹม׵ • ΦϦδϯ্ʹΦϒδΣΫτ͸ۃྗ૿΍͞ͳ͍ • ύϑΥʔϚϯεతͳ࿩ • ωοτϫʔΫϨΠςϯγ >>>>> ը૾ͷม׵ॲཧʹ͔͔ΔΦʔόʔϔου • ίετతͳ࿩ • ωοτϫʔΫϦιʔε >>>>>>(ӽ͑ΒΕͳ͍น)>>>>>>CPUϦιʔε

Slide 14

Slide 14 text

εϚʔτϑΥϯΞϓϦͰWebPը૾Λ഑৴͢Δ • iOS • ΞϓϦଆͰରԠ͕ඞཁ • Webview͸ෆՄ • Android • OSωΠςΟϒͰରԠʢ4.0+ʣ • Webview΋Մ

Slide 15

Slide 15 text

࣮ྫͰֶͿը૾࠷దԽू with ImageFlux

Slide 16

Slide 16 text

UIͷมԽʹରԠʢ2ྻλΠϜϥΠϯ -> 3ྻλΠϜϥΠϯʣ

Slide 17

Slide 17 text

2ྻλΠϜϥΠϯ͔Β3ྻλΠϜϥΠϯ΁ • ௕ظؒͷA/Bςετͷ຤ʹ੾ସ • Ұ౓ʹදࣔͰ͖Δը૾ͷ਺͕૿͑Δ • CDNͷτϥϑΟοΫ͕1.5ഒʹͳͬͨ • ίετ͕(ry • ΞϓϦͷ௨৴ྔ΋૿Ճ • ΪΨ͕ݮΔ

Slide 18

Slide 18 text

3ྻ༻ͷαΠζʹϦαΠζ & WebPԽ 296x296 15.1KB 240x240 7.2KB w=240,f=webp 2ྻ༻ 3ྻ༻ 296x296 15.1KB 240x240 12.5KB w=240 2ྻ༻ 3ྻ༻

Slide 19

Slide 19 text

1αϜωΠϧ͋ͨΓͷαΠζ࡟ݮޮՌ • ϦαΠζ • 10~20%ݮ • ϦαΠζ & WebPԽ • 40~50%ݮ • λΠϜϥΠϯ΍ݕࡧ݁ՌͰ͸঎඼ը૾αϜωΠϧ͕େྔʹදࣔ͞ΕΔͷͰޮՌେ

Slide 20

Slide 20 text

ϝϧΧϦετΞ

Slide 21

Slide 21 text

ϝϧΧϦετΞ ϝϧΧϦͷΞϓϦ಺Ͱ ࠝแࡐ౳ͷΦϦδφϧάοζ ͕ߪೖͰ͖Δػೳ

Slide 22

Slide 22 text

ϝϧΧϦετΞͷ঎඼ը૾഑৴ • ঎඼ը૾ͷ਺ࣗମ͸গͳ͍ • े਺඼໨ • λΠϜϥΠϯͷҰ෦ͳͷͰϦΫΤετ਺͕ଟ͍ • ը૾αΠζ͕େ͖͍ͱ௨৴ྔ͕๲ΕΔ

Slide 23

Slide 23 text

ϝϧΧϦετΞʢλΠϜϥΠϯʣ

Slide 24

Slide 24 text

ϝϧΧϦετΞʢλΠϜϥΠϯʣ ࣮͸1ը૾͋ͨΓ 140KB͋ͬͨ (720x720)

Slide 25

Slide 25 text

ϝϧΧϦετΞʢ঎඼ৄࡉʣ

Slide 26

Slide 26 text

ϝϧΧϦετΞʢ঎඼ৄࡉʣ ͜Ε͸ݪੇେͰදࣔ

Slide 27

Slide 27 text

ϝϧΧϦετΞͷ঎඼ը૾഑৴ • λΠϜϥΠϯͱৄࡉը໘Ͱ͸ٻΊΒΕΔը૾αΠζ͕ҧ͏ • Ͱ΋ɺΦϦδϯʹαΠζຖͷΦϒδΣΫτ͸ͭ͘Βͳ͍ • λΠϜϥΠϯͷը૾͚ͩImageFluxͰϦαΠζ

Slide 28

Slide 28 text

720x720 140KB o=1  (JPEG࠷దԽ) ϝϧΧϦετΞͷ঎඼ը૾ 720x720 50KB

Slide 29

Slide 29 text

720x720 140KB o=1  (JPEG࠷దԽ) ϝϧΧϦετΞͷ঎඼ը૾ 720x720 50KB αΠζ65%ݮ

Slide 30

Slide 30 text

720x720 140KB w=360 ϝϧΧϦετΞͷ঎඼ը૾ 360x360 15KB

Slide 31

Slide 31 text

720x720 140KB w=360 ϝϧΧϦετΞͷ঎඼ը૾ 360x360 15KB αΠζ90%ݮ

Slide 32

Slide 32 text

720x720 140KB w=360,f=webp ϝϧΧϦετΞͷ঎඼ը૾ 360x360 8KB

Slide 33

Slide 33 text

720x720 140KB w=360,f=webp ϝϧΧϦετΞͷ঎඼ը૾ 360x360 8KB αΠζ94%ݮ

Slide 34

Slide 34 text

ImageFluxͰϦαΠζ & WebPม׵ w=360 or w=360,f=webp

Slide 35

Slide 35 text

ImageFluxͰϦαΠζ & WebPม׵ w=720,o=1 or w=720,f=webp

Slide 36

Slide 36 text

঎඼ը૾ͷը࣭ௐ੔ Before After

Slide 37

Slide 37 text

঎඼ը૾ͷը࣭ௐ੔ Beforeɿ720x720 74KB Afterɿ1080x1080 102KB

Slide 38

Slide 38 text

঎඼ը૾ͷը࣭վળ • ࠓ೥ͷ8݄ޙ൒Ҏ߱ʹग़඼͞Εͨݪੇେ঎඼ը૾ͷ • ղ૾౓Λ720x720͔Β1080x1080ʹมߋ • ը࣭ύϥϝʔλΛௐ੔ • ΑΓߴը࣭Ͱ઱໌ͳը૾ʹ

Slide 39

Slide 39 text

঎඼ը૾ͷը࣭վળ • ը૾ͷදࣔεϐʔυ͸଎͍ํ͕Α͍ͷͰը૾αΠζ͸ۃྗ཈͍͑ͨ • ͱ͸͍͑ɺݪੇେͷ঎඼ը૾͸΋ͬͱߴը࣭ʹ͍ͨ͠ • ͜ͷ̎ͭ͸τϨʔυΦϑͳͷͰɺαΠζͱը࣭ͷόϥϯεΛ͏·͘ௐ੔͢ Δඞཁ͕͋Δ

Slide 40

Slide 40 text

঎඼ը૾ͷը࣭վળ • ϝϧΧϦͷ঎඼ը૾͸ग़඼࣌ʹΫϥΠΞϯταΠυͰϦαΠζɺը࣭ௐ੔ ͕ߦΘΕΔ • ύϥϝʔλࣗମ͸αʔόαΠυͰมߋՄೳ • ը૾ͷαΠζ͸഑৴͚࣌ͩͰͳ͘ɺग़඼࣌ͷUXʹ΋େ͖͘Өڹ͢Δ • ग़඼࣌ͷUX΁ͷӨڹΛௐࠪ͢ΔͨΊʹA/BςετΛ࣮ࢪ্ͨ͠Ͱมߋ

Slide 41

Slide 41 text

঎඼ը૾ͷը࣭վળ Beforeɿ720x720 74KB Afterɿ1080x1080 102KB

Slide 42

Slide 42 text

ը૾Λ֦େ ͦͷ1 Beforeɿ720x720 74KB Afterɿ1080x1080 102KB

Slide 43

Slide 43 text

ը૾Λ֦େ ͦͷ2 Beforeɿ720x720 74KB Afterɿ1080x1080 102KB

Slide 44

Slide 44 text

ҰํͰɺ • ղ૾౓Ξοϓ & ߴը࣭ԽʹΑΓը૾ͷαΠζ͸౰વ૿͑Δ • ഑৴ίετ૿ • ग़඼࣌ͷը૾Ξοϓϩʔυɺݪੇେը૾ͷදࣔʹ͕͔͔࣌ؒΔ • UX௿Լ

Slide 45

Slide 45 text

͜ΕΒͷ໰୊Λ࿨Β͛ΔͨΊʹɺ • ImageFluxͷΫΥϦςΟύϥϝʔλͰը࣭Λௐ੔ʢe.g. q=75ʣ • ImageFluxͷσϑΥϧτύϥϝʔλΛར༻͢Ε͹ίϯτϩʔϧύωϧͰ ੍ޚ͢Δ͜ͱ΋Մೳ • ঎඼ৄࡉը໘Ͱͷը૾දࣔͷ࢓ํΛ޻෉ • λΠϜϥΠϯ͔Β঎඼ৄࡉը໘ʹભҠͨ͠ࡍʹɺখ͍͞ը૾Λදࣔͨ͠ ޙͰେ͖͍ը૾ʹࠩ͠ସ͑ʢࠓ͸iOS൛ͷΈʣ

Slide 46

Slide 46 text

·ͱΊ • ImageFluxͷಋೖʹΑΓΞϓϦͷσʔλ௨৴ྔ࡟ݮͱUX޲্Λಉ࣌ʹ࣮ݱ • ը૾σʔλͷ௨৴ྔΛ30%Ҏ্࡟ݮ • ΞϓϦͷUI΍σβΠϯͷมԽʹ΋ॊೈʹରԠͰ͖ΔΑ͏ʹͳͬͨ • ΦϦδϯͷετϨʔδʹผʑͷαΠζͷը૾Λ഑ஔ͢Δ͜ͱͳ͘ɺΦϯβϑϥ ΠͰը૾Λม׵ • εϚʔτϑΥϯΞϓϦ͕շదʹ࢖͑ΔΑ͏ʹͳΔͨΊʹ͸ɺ • σʔλͷ௨৴ྔΛ཈͑Δ޻෉͕ॏཁ