Tatsuhiko Kubo@cubicdaiyaImageFlux meetup #2 2018/09/25࣮ྫͰֶͿը૾࠷దԽू with ImageFlux
View Slide
@cubicdaiya / Tatsuhiko KuboPrincipal Engineer, SRE @ Mercari, Inc.
imageflux-cli• ImageFluxͷAPIΫϥΠΞϯτ• github.com/mercari/imageflux-cli•$ imageflux-cliUsage:imageflux-cli cache.lookup -k $url # lookup cache by keyimageflux-cli cache.delete -k $url # delete cache by keyimageflux-cli signature -s $secret -p $path # calculate signature of signed url
ϝϧΧϦʹ͍ͭͯ• ຊ࠷େͷϑϦϚΞϓϦ• 3Ͱ؆୯ʹग़• 1) ࣸਅΛࡱΔ• 2) ใΛهೖ• 3) ग़ϘλϯΛԡ͢• ҆৺҆શͳܾࡁɾऔҾ• ΤεΫϩʔ• ಗ໊ૹ
ྦྷܭग़ͷਪҠ
ϝϧΧϦʹ͓͚Δը૾৴• ϝϧΧϦͷσʔλ௨৴ྔͷେ෦ΛΊΔͷը૾• ը૾• ϓϩϑΟʔϧը૾• όφʔը૾• etc…
ϝϧΧϦʹ͓͚Δը૾৴• ը૾ͷྔ͕ͱʹ͔͘ଟ͍• ຖը૾σʔλ͕ඦສݸ୯ҐͰ૿͑Δ• ଟ͘ͷػೳ໘Ͱը૾͕ओͳͷͰը૾σʔλͷ৴ྔ͕ͱͯଟ͍• λΠϜϥΠϯɺݕࡧɺৄࡉ• ͍͍ͶʂҰཡɺӾཡཤྺ• etc…
ϝϧΧϦʹ͓͚Δը૾৴• CDN• Akamai• ImageFlux• Fastly• Origin• Amazon S3©2011 Amazon Web Services LLC or its affiliates. All rights reserved.User Users Client Multimedia Corporatedata centerTraditionalserverMobile ClientInternet AWS ManagementConsoleIAM Add-on Example:IAM Add-onAmazon Mechanical TurkOn-Demand WorkforceHuman IntelligenceTasks (HIT)Assignment/TaskRequesterWorkersAmazonMechanical TurkNon-Service Specific©2011 Amazon Web Services LLC or its affiliates. All rights reserved.User Users Client Multimedia Corporatedata centerTraditionalserverMobile ClientInternet AWS ManagementConsoleIAM Add-on Example:IAM Add-onAmazon Mechanical TurkOn-Demand WorkforceHuman IntelligenceTasks (HIT)Assignment/TaskRequesterWorkersAmazonMechanical TurkNon-Service SpecificUser Users Client Multimedia Corporatedata centerTraditionalserverMobile ClientAmazon Mechanical TurkOn-Demand WorkforceHuman IntelligenceTasks (HIT)Assignment/TaskRequesterWorkersAmazonMechanical TurkNon-Service SpecificUser Users Client Multimedia Corporatedata centerTraditionalserverMobile ClientInternet AWS ManagementConsoleIAM Add-on Example:IAM Add-onAmazon Mechanical TurkOn-Demand WorkforceHuman IntelligenceTasks (HIT)Assignment/TaskRequesterWorkersAmazonMechanical TurkNon-Service Specific©2011 Amazon Web Services LLC or its affiliates. All rights reserved.User Users Client Multimedia Corporatedata centerTraditionalserverMobile ClientInternet AWS ManagementConsoleIAM Add-on Example:IAM Add-onHuman IntelligenceTasks (HIT)Assignment/TaskRequesterWorkersAmazonMechanical TurkNon-Service Specific
ImageFlux࠾༻ͷഎܠ• ʑ૿͑ଓ͚ΔCDNͷը૾৴σʔλྔ• ৴ίετͷ૿Ճ• ΞϓϦͷσʔλ௨৴ྔͷ૿Ճ• ΞϓϦͷಈ࡞UXʹӨڹ• UIσβΠϯมߋʹ͏࠷దͳը૾αΠζͷมԽ• σʔλ͕ଟ͍ͷͰෳύλʔϯͷը૾Λࣄલʹ४උ͢Δͷࠔ
ΞϓϦ͕շదʹ͑ΔΑ͏ʹͳΔͨΊʹ• σʔλͷ௨৴ྔΛ͑Δ͕ඞཁ• ͳωοτϫʔΫͰετϨεͳ͘ಈ࡞• ߴͳಈ࡞͕ඞཁෆՄܽ• ͲΜͳʹૉΒ͍͠UIͰಈ࡞͕ա͗ΔͷUXͱͯͩ͠Ί
ImageFluxͷ࠾༻ͰظͰ͖Δ͜ͱ• ը૾ͷಈతͳϦαΠζɺ࠷దԽʹΑΔ• ৴σʔλྔͷݮ• ΞϓϦͷσʔλ௨৴ྔͷݮ• UIσβΠϯʹ͋ͬͨ࠷దͳը૾αΠζͷ࠾༻
ImageFluxʹΑΔը૾࠷దԽ• ϝϧΧϦͰ৴͞ΕΔը૾ΛΦϯβϑϥΠͰϦαΠζ & WebPʹม• ΦϦδϯ্ʹΦϒδΣΫτۃྗ૿͞ͳ͍• ύϑΥʔϚϯεతͳ• ωοτϫʔΫϨΠςϯγ >>>>> ը૾ͷมॲཧʹ͔͔ΔΦʔόʔϔου• ίετతͳ• ωοτϫʔΫϦιʔε >>>>>>(ӽ͑ΒΕͳ͍น)>>>>>>CPUϦιʔε
εϚʔτϑΥϯΞϓϦͰWebPը૾Λ৴͢Δ• iOS• ΞϓϦଆͰରԠ͕ඞཁ• WebviewෆՄ• Android• OSωΠςΟϒͰରԠʢ4.0+ʣ• WebviewՄ
࣮ྫͰֶͿը૾࠷దԽू with ImageFlux
UIͷมԽʹରԠʢ2ྻλΠϜϥΠϯ -> 3ྻλΠϜϥΠϯʣ
2ྻλΠϜϥΠϯ͔Β3ྻλΠϜϥΠϯ• ظؒͷA/Bςετͷʹସ• ҰʹදࣔͰ͖Δը૾ͷ͕૿͑Δ• CDNͷτϥϑΟοΫ͕1.5ഒʹͳͬͨ• ίετ͕(ry• ΞϓϦͷ௨৴ྔ૿Ճ• ΪΨ͕ݮΔ
3ྻ༻ͷαΠζʹϦαΠζ & WebPԽ296x29615.1KB240x2407.2KBw=240,f=webp2ྻ༻3ྻ༻296x29615.1KB240x24012.5KBw=2402ྻ༻3ྻ༻
1αϜωΠϧ͋ͨΓͷαΠζݮޮՌ• ϦαΠζ• 10~20%ݮ• ϦαΠζ & WebPԽ• 40~50%ݮ• λΠϜϥΠϯݕࡧ݁ՌͰը૾αϜωΠϧ͕େྔʹදࣔ͞ΕΔͷͰޮՌେ
ϝϧΧϦετΞ
ϝϧΧϦετΞϝϧΧϦͷΞϓϦͰࠝแࡐͷΦϦδφϧάοζ͕ߪೖͰ͖Δػೳ
ϝϧΧϦετΞͷը૾৴• ը૾ͷࣗମগͳ͍• े• λΠϜϥΠϯͷҰ෦ͳͷͰϦΫΤετ͕ଟ͍• ը૾αΠζ͕େ͖͍ͱ௨৴ྔ͕ΕΔ
ϝϧΧϦετΞʢλΠϜϥΠϯʣ
ϝϧΧϦετΞʢλΠϜϥΠϯʣ࣮1ը૾͋ͨΓ140KB͋ͬͨ(720x720)
ϝϧΧϦετΞʢৄࡉʣ
ϝϧΧϦετΞʢৄࡉʣ͜ΕݪੇେͰදࣔ
ϝϧΧϦετΞͷը૾৴• λΠϜϥΠϯͱৄࡉը໘ͰٻΊΒΕΔը૾αΠζ͕ҧ͏• ͰɺΦϦδϯʹαΠζຖͷΦϒδΣΫτͭ͘Βͳ͍• λΠϜϥΠϯͷը૾͚ͩImageFluxͰϦαΠζ
720x720 140KBo=1 (JPEG࠷దԽ)ϝϧΧϦετΞͷը૾720x720 50KB
720x720 140KBo=1 (JPEG࠷దԽ)ϝϧΧϦετΞͷը૾720x720 50KBαΠζ65%ݮ
720x720 140KBw=360ϝϧΧϦετΞͷը૾360x360 15KB
720x720 140KBw=360ϝϧΧϦετΞͷը૾360x360 15KBαΠζ90%ݮ
720x720 140KBw=360,f=webpϝϧΧϦετΞͷը૾360x360 8KB
720x720 140KBw=360,f=webpϝϧΧϦετΞͷը૾360x360 8KBαΠζ94%ݮ
ImageFluxͰϦαΠζ & WebPมw=360 or w=360,f=webp
ImageFluxͰϦαΠζ & WebPมw=720,o=1 or w=720,f=webp
ը૾ͷը࣭ௐBefore After
ը૾ͷը࣭ௐBeforeɿ720x720 74KB Afterɿ1080x1080 102KB
ը૾ͷը࣭վળ• ࠓͷ8݄ޙҎ߱ʹग़͞Εͨݪੇେը૾ͷ• ղ૾Λ720x720͔Β1080x1080ʹมߋ• ը࣭ύϥϝʔλΛௐ• ΑΓߴը࣭Ͱ໌ͳը૾ʹ
ը૾ͷը࣭վળ• ը૾ͷදࣔεϐʔυ͍ํ͕Α͍ͷͰը૾αΠζۃྗ͍͑ͨ• ͱ͍͑ɺݪੇେͷը૾ͬͱߴը࣭ʹ͍ͨ͠• ͜ͷ̎ͭτϨʔυΦϑͳͷͰɺαΠζͱը࣭ͷόϥϯεΛ͏·͘ௐ͢Δඞཁ͕͋Δ
ը૾ͷը࣭վળ• ϝϧΧϦͷը૾ग़࣌ʹΫϥΠΞϯταΠυͰϦαΠζɺը࣭ௐ͕ߦΘΕΔ• ύϥϝʔλࣗମαʔόαΠυͰมߋՄೳ• ը૾ͷαΠζ৴͚࣌ͩͰͳ͘ɺग़࣌ͷUXʹେ͖͘Өڹ͢Δ• ग़࣌ͷUXͷӨڹΛௐࠪ͢ΔͨΊʹA/BςετΛ࣮ࢪ্ͨ͠Ͱมߋ
ը૾ͷը࣭վળBeforeɿ720x720 74KB Afterɿ1080x1080 102KB
ը૾Λ֦େ ͦͷ1Beforeɿ720x720 74KB Afterɿ1080x1080 102KB
ը૾Λ֦େ ͦͷ2Beforeɿ720x720 74KB Afterɿ1080x1080 102KB
ҰํͰɺ• ղ૾Ξοϓ & ߴը࣭ԽʹΑΓը૾ͷαΠζવ૿͑Δ• ৴ίετ૿• ग़࣌ͷը૾Ξοϓϩʔυɺݪੇେը૾ͷදࣔʹ͕͔͔࣌ؒΔ• UXԼ
͜ΕΒͷΛΒ͛ΔͨΊʹɺ• ImageFluxͷΫΥϦςΟύϥϝʔλͰը࣭Λௐʢe.g. q=75ʣ• ImageFluxͷσϑΥϧτύϥϝʔλΛར༻͢ΕίϯτϩʔϧύωϧͰ੍ޚ͢Δ͜ͱՄೳ• ৄࡉը໘Ͱͷը૾දࣔͷํΛ• λΠϜϥΠϯ͔Βৄࡉը໘ʹભҠͨ͠ࡍʹɺখ͍͞ը૾Λදࣔͨ͠ޙͰେ͖͍ը૾ʹࠩ͠ସ͑ʢࠓiOS൛ͷΈʣ
·ͱΊ• ImageFluxͷಋೖʹΑΓΞϓϦͷσʔλ௨৴ྔݮͱUX্Λಉ࣌ʹ࣮ݱ• ը૾σʔλͷ௨৴ྔΛ30%Ҏ্ݮ• ΞϓϦͷUIσβΠϯͷมԽʹॊೈʹରԠͰ͖ΔΑ͏ʹͳͬͨ• ΦϦδϯͷετϨʔδʹผʑͷαΠζͷը૾Λஔ͢Δ͜ͱͳ͘ɺΦϯβϑϥΠͰը૾Λม• εϚʔτϑΥϯΞϓϦ͕շదʹ͑ΔΑ͏ʹͳΔͨΊʹɺ• σʔλͷ௨৴ྔΛ͑Δ͕ॏཁ
cubicdaiya
edwardkenfox
gl_tsukasa
nktamago
nrryuya
th0x0472
tsujiba
oracle4engineer
soudai
tomuro
takatsunobuhiro
torounit
lauravandoore
shlominoach
stephaniewalter
chriscoyier
lara
vanstee
zakiyama
hatefulcrawdad
eileencodes
sugarenia
edds