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

Transcript

1. Tatsuhiko Kubo@cubicdaiya ImageFlux meetup #2 2018/09/25 ࣮ྫͰֶͿը૾࠷దԽू with ImageFlux
2. @cubicdaiya / Tatsuhiko Kubo Principal Engineer, SRE @ Mercari, Inc.
3. imageflux-cli • ImageFluxͷAPIΫϥΠΞϯτ • github.com/mercari/imageflux-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
5. ϝϧΧϦʹ͍ͭͯ • ೔ຊ࠷େͷϑϦϚΞϓϦ • 3෼Ͱ؆୯ʹग़඼ • 1) ࣸਅΛࡱΔ • 2) ঎඼৘ใΛهೖ • 3) ग़඼ϘλϯΛԡ͢ • ҆৺҆શͳܾࡁɾऔҾ • ΤεΫϩʔ • ಗ໊഑ૹ
6. ྦྷܭग़඼਺ͷਪҠ
7. ϝϧΧϦʹ͓͚Δը૾഑৴ • ϝϧΧϦͷσʔλ௨৴ྔͷେ෦෼Λ઎ΊΔͷ͸ը૾ • ঎඼ը૾ • ϓϩϑΟʔϧը૾ • όφʔը૾ • etc…
8. ϝϧΧϦʹ͓͚Δը૾഑৴ • ը૾ͷྔ͕ͱʹ͔͘ଟ͍ • ຖ೔ը૾σʔλ͕ඦສݸ୯ҐͰ૿͑Δ • ଟ͘ͷػೳ໘Ͱը૾͕ओ໾ͳͷͰը૾σʔλͷ഑৴ྔ͕ͱͯ΋ଟ͍ • λΠϜϥΠϯɺݕࡧɺ঎඼ৄࡉ • ͍͍ͶʂҰཡɺӾཡཤྺ • etc…
9. ϝϧΧϦʹ͓͚Δը૾഑৴ • 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
10. ImageFlux࠾༻ͷഎܠ • ೔ʑ૿͑ଓ͚ΔCDNͷը૾഑৴σʔλྔ • ഑৴ίετͷ૿Ճ • ΞϓϦͷσʔλ௨৴ྔͷ૿Ճ • ΞϓϦͷಈ࡞଎౓΍UXʹӨڹ • UI΍σβΠϯมߋʹ൐͏࠷దͳը૾αΠζͷมԽ • σʔλ਺͕ଟ͍ͷͰෳ਺ύλʔϯͷը૾Λࣄલʹ४උ͢Δͷ͸ࠔ೉
11. ΞϓϦ͕շదʹ࢖͑ΔΑ͏ʹͳΔͨΊʹ͸ • σʔλͷ௨৴ྔΛ཈͑Δ޻෉͕ඞཁ • ௿଎ͳωοτϫʔΫͰ΋ετϨεͳ͘ಈ࡞ • ߴ଎ͳಈ࡞͕ඞཁෆՄܽ • ͲΜͳʹૉ੖Β͍͠UIͰ΋ಈ࡞͕஗ա͗Δͷ͸UXͱͯͩ͠Ί
12. ImageFluxͷ࠾༻Ͱظ଴Ͱ͖Δ͜ͱ • ը૾ͷಈతͳϦαΠζɺ࠷దԽʹΑΔ • ഑৴σʔλྔͷ࡟ݮ • ΞϓϦͷσʔλ௨৴ྔͷ࡟ݮ • UI΍σβΠϯʹ͋ͬͨ࠷దͳը૾αΠζͷ࠾༻
13. ImageFluxʹΑΔը૾࠷దԽ • ϝϧΧϦͰ഑৴͞ΕΔը૾ΛΦϯβϑϥΠͰϦαΠζ & WebPʹม׵ • ΦϦδϯ্ʹΦϒδΣΫτ͸ۃྗ૿΍͞ͳ͍ • ύϑΥʔϚϯεతͳ࿩ • ωοτϫʔΫϨΠςϯγ >>>>> ը૾ͷม׵ॲཧʹ͔͔ΔΦʔόʔϔου • ίετతͳ࿩ • ωοτϫʔΫϦιʔε >>>>>>(ӽ͑ΒΕͳ͍น)>>>>>>CPUϦιʔε
14. εϚʔτϑΥϯΞϓϦͰWebPը૾Λ഑৴͢Δ • iOS • ΞϓϦଆͰରԠ͕ඞཁ • Webview͸ෆՄ • Android • OSωΠςΟϒͰରԠʢ4.0+ʣ • Webview΋Մ
15. ࣮ྫͰֶͿը૾࠷దԽू with ImageFlux
16. UIͷมԽʹରԠʢ2ྻλΠϜϥΠϯ -> 3ྻλΠϜϥΠϯʣ
17. 2ྻλΠϜϥΠϯ͔Β3ྻλΠϜϥΠϯ΁ • ௕ظؒͷA/Bςετͷ຤ʹ੾ସ • Ұ౓ʹදࣔͰ͖Δը૾ͷ਺͕૿͑Δ • CDNͷτϥϑΟοΫ͕1.5ഒʹͳͬͨ • ίετ͕(ry • ΞϓϦͷ௨৴ྔ΋૿Ճ • ΪΨ͕ݮΔ
18. 3ྻ༻ͷαΠζʹϦαΠζ & WebPԽ 296x296 15.1KB 240x240 7.2KB w=240,f=webp 2ྻ༻ 3ྻ༻ 296x296 15.1KB 240x240 12.5KB w=240 2ྻ༻ 3ྻ༻
19. 1αϜωΠϧ͋ͨΓͷαΠζ࡟ݮޮՌ • ϦαΠζ • 10~20%ݮ • ϦαΠζ & WebPԽ • 40~50%ݮ • λΠϜϥΠϯ΍ݕࡧ݁ՌͰ͸঎඼ը૾αϜωΠϧ͕େྔʹදࣔ͞ΕΔͷͰޮՌେ
20. ϝϧΧϦετΞ
21. ϝϧΧϦετΞ ϝϧΧϦͷΞϓϦ಺Ͱ ࠝแࡐ౳ͷΦϦδφϧάοζ ͕ߪೖͰ͖Δػೳ
22. ϝϧΧϦετΞͷ঎඼ը૾഑৴ • ঎඼ը૾ͷ਺ࣗମ͸গͳ͍ • े਺඼໨ • λΠϜϥΠϯͷҰ෦ͳͷͰϦΫΤετ਺͕ଟ͍ • ը૾αΠζ͕େ͖͍ͱ௨৴ྔ͕๲ΕΔ
23. ϝϧΧϦετΞʢλΠϜϥΠϯʣ
24. ϝϧΧϦετΞʢλΠϜϥΠϯʣ ࣮͸1ը૾͋ͨΓ 140KB͋ͬͨ (720x720)
25. ϝϧΧϦετΞʢ঎඼ৄࡉʣ
26. ϝϧΧϦετΞʢ঎඼ৄࡉʣ ͜Ε͸ݪੇେͰදࣔ
27. ϝϧΧϦετΞͷ঎඼ը૾഑৴ • λΠϜϥΠϯͱৄࡉը໘Ͱ͸ٻΊΒΕΔը૾αΠζ͕ҧ͏ • Ͱ΋ɺΦϦδϯʹαΠζຖͷΦϒδΣΫτ͸ͭ͘Βͳ͍ • λΠϜϥΠϯͷը૾͚ͩImageFluxͰϦαΠζ
28. 720x720 140KB o=1
 (JPEG࠷దԽ) ϝϧΧϦετΞͷ঎඼ը૾ 720x720 50KB
29. 720x720 140KB o=1
 (JPEG࠷దԽ) ϝϧΧϦετΞͷ঎඼ը૾ 720x720 50KB αΠζ65%ݮ
30. 720x720 140KB w=360 ϝϧΧϦετΞͷ঎඼ը૾ 360x360 15KB
31. 720x720 140KB w=360 ϝϧΧϦετΞͷ঎඼ը૾ 360x360 15KB αΠζ90%ݮ
32. 720x720 140KB w=360,f=webp ϝϧΧϦετΞͷ঎඼ը૾ 360x360 8KB
33. 720x720 140KB w=360,f=webp ϝϧΧϦετΞͷ঎඼ը૾ 360x360 8KB αΠζ94%ݮ
34. ImageFluxͰϦαΠζ & WebPม׵ w=360 or w=360,f=webp
35. ImageFluxͰϦαΠζ & WebPม׵ w=720,o=1 or w=720,f=webp
36. ঎඼ը૾ͷը࣭ௐ੔ Before After
37. ঎඼ը૾ͷը࣭ௐ੔ Beforeɿ720x720 74KB Afterɿ1080x1080 102KB
38. ঎඼ը૾ͷը࣭վળ • ࠓ೥ͷ8݄ޙ൒Ҏ߱ʹग़඼͞Εͨݪੇେ঎඼ը૾ͷ • ղ૾౓Λ720x720͔Β1080x1080ʹมߋ • ը࣭ύϥϝʔλΛௐ੔ • ΑΓߴը࣭Ͱ઱໌ͳը૾ʹ
39. ঎඼ը૾ͷը࣭վળ • ը૾ͷදࣔεϐʔυ͸଎͍ํ͕Α͍ͷͰը૾αΠζ͸ۃྗ཈͍͑ͨ • ͱ͸͍͑ɺݪੇେͷ঎඼ը૾͸΋ͬͱߴը࣭ʹ͍ͨ͠ • ͜ͷ̎ͭ͸τϨʔυΦϑͳͷͰɺαΠζͱը࣭ͷόϥϯεΛ͏·͘ௐ੔͢ Δඞཁ͕͋Δ
40. ঎඼ը૾ͷը࣭վળ • ϝϧΧϦͷ঎඼ը૾͸ग़඼࣌ʹΫϥΠΞϯταΠυͰϦαΠζɺը࣭ௐ੔ ͕ߦΘΕΔ • ύϥϝʔλࣗମ͸αʔόαΠυͰมߋՄೳ • ը૾ͷαΠζ͸഑৴͚࣌ͩͰͳ͘ɺग़඼࣌ͷUXʹ΋େ͖͘Өڹ͢Δ • ग़඼࣌ͷUX΁ͷӨڹΛௐࠪ͢ΔͨΊʹA/BςετΛ࣮ࢪ্ͨ͠Ͱมߋ
41. ঎඼ը૾ͷը࣭վળ Beforeɿ720x720 74KB Afterɿ1080x1080 102KB
42. ը૾Λ֦େ ͦͷ1 Beforeɿ720x720 74KB Afterɿ1080x1080 102KB
43. ը૾Λ֦େ ͦͷ2 Beforeɿ720x720 74KB Afterɿ1080x1080 102KB
44. ҰํͰɺ • ղ૾౓Ξοϓ & ߴը࣭ԽʹΑΓը૾ͷαΠζ͸౰વ૿͑Δ • ഑৴ίετ૿ • ग़඼࣌ͷը૾Ξοϓϩʔυɺݪੇେը૾ͷදࣔʹ͕͔͔࣌ؒΔ • UX௿Լ
45. ͜ΕΒͷ໰୊Λ࿨Β͛ΔͨΊʹɺ • ImageFluxͷΫΥϦςΟύϥϝʔλͰը࣭Λௐ੔ʢe.g. q=75ʣ • ImageFluxͷσϑΥϧτύϥϝʔλΛར༻͢Ε͹ίϯτϩʔϧύωϧͰ ੍ޚ͢Δ͜ͱ΋Մೳ • ঎඼ৄࡉը໘Ͱͷը૾දࣔͷ࢓ํΛ޻෉ • λΠϜϥΠϯ͔Β঎඼ৄࡉը໘ʹભҠͨ͠ࡍʹɺখ͍͞ը૾Λදࣔͨ͠ ޙͰେ͖͍ը૾ʹࠩ͠ସ͑ʢࠓ͸iOS൛ͷΈʣ
46. ·ͱΊ • ImageFluxͷಋೖʹΑΓΞϓϦͷσʔλ௨৴ྔ࡟ݮͱUX޲্Λಉ࣌ʹ࣮ݱ • ը૾σʔλͷ௨৴ྔΛ30%Ҏ্࡟ݮ • ΞϓϦͷUI΍σβΠϯͷมԽʹ΋ॊೈʹରԠͰ͖ΔΑ͏ʹͳͬͨ • ΦϦδϯͷετϨʔδʹผʑͷαΠζͷը૾Λ഑ஔ͢Δ͜ͱͳ͘ɺΦϯβϑϥ ΠͰը૾Λม׵ • εϚʔτϑΥϯΞϓϦ͕շదʹ࢖͑ΔΑ͏ʹͳΔͨΊʹ͸ɺ • σʔλͷ௨৴ྔΛ཈͑Δ޻෉͕ॏཁ